• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

tworzenie koszyka javaScript - zend

0 głosów
639 wizyt
pytanie zadane 27 września 2017 w JavaScript przez Alterwar Dyskutant (7,650 p.)
Witam,

Próbuję wpaść na pomysł jak stworzyć prosty koszyk.

Otóż, mam 5 pól które muszą zostać wybrane z listy. Dla przykładu. Wybieram kolor, następnie rozmiar, następnie okładkę  itd.

Otrzymuję spis który wybrałem z ceną. Wyświetlam przycisk do zapłaty. Jeśli nie jestem zalogowany, robię przekierowanie do strony na której muszę podać dane (imię, nazwisko itd) i mogę zapłacić. Jeśli wybiorę zaloguj, powinno mnie zalogować i pokazać ten (produkt?)- to raczej nie do końca można nazwać produktem a zbiorem wartości z listy).

Ma być możliwość dodawania do koszyka. Więc po wyborze wszystkich wartości powinienem stworzyć przycisk np. dodaj do koszyka w razie gdyby ktoś chciał stworzyć parę kombinacji. Po kliknięciu powinienem otrzymać np. kombinacja 1 - > koszt.

Teraz pytanie. Jak stworzyć taki koszyk? Tworzę jakiś obiekt w js, przekazuję do niego te dane. I co? Ajaxem po kliknięciu wysyłam dane do jakiejś tabeli w bazie, która przetrzymuje koszyk? Czy przekazuję to do cookie?

Ogólny zamysł mam jak to zrobić, ale nie wiem jak się za to zabrać. Nie wiem jak wysłać i odebrać dane w cookie. Ma ktoś jakiś przykład dodawania czegoś do cookie?
komentarz 27 września 2017 przez Tomek Sochacki Ekspert (228,960 p.)

Ma ktoś jakiś przykład dodawania czegoś do cookie?

document.cookie = 'name=value;path=/';

1 odpowiedź

+2 głosów
odpowiedź 27 września 2017 przez Ehlert Ekspert (207,390 p.)

Koszyk lepiej trzymać w cookiesch lub Local Storage. Gdyby każdy koszyk wędrował od razu do bazy danych, to miałbyś taki mały autoDDoS laugh​​​​​​

Generalnie jeśli możesz, to obciążaj częścią operacji klienty swojej aplikacji. Dzisiaj komputery desktopowe są coraz silniejsze, a vpsy wciąż drogie cheeky

2
komentarz 27 września 2017 przez Tomek Sochacki Ekspert (228,960 p.)

Może ograniczyć czas istnienia localStorage np. do 24h?

localStorage nie ma czasu istnienia jak cookies. Ale możesz np. wraz z koszykiem (produktami) zapisać również datę jego stworzenia i następnie pobierając koszyk z LS sprawdzać tę datę względem daty aktualnej.

Z tymże tutaj mamy pewien problem, gdyż new Date() zwróci Ci datę aktualną względem daty komputera użytkownika. Najbezpieczniej więc byłoby pobrać datę z serwera i względem niej weryfikować ważność koszyka. Drobny szczegół ale przy kwestiach sklepowych warto zwracać na to uwagę.

komentarz 27 września 2017 przez Alterwar Dyskutant (7,650 p.)
Okej, dzięki za pomoc. Będę próbował. Jak nie będzie szło to będę się zwracał po rady w tym temacie.
komentarz 27 września 2017 przez Alterwar Dyskutant (7,650 p.)
let buttonAddToCart = document.getElementById('add-to-cart');
let phraseFormatForm = document.getElementById('phraseFormatForm');

let counter = 0;
buttonAddToCart.addEventListener('click', function(){

	let createProduct = {
		formats: phraseFormatForm.value,
		cover: 'cover1',
		page: 30,
		edition:100,
		cost:120.00
	};

	localStorage.setItem('product'+counter, JSON.stringify(createProduct));
	let retrievedObject = localStorage.getItem('product'+counter);
	console.log('retrievedObject: ', JSON.parse(retrievedObject));
	counter++;
});

Czy to mniej więcej będzie poprawny kod doawania do localStorage? Po kliknięciu dodaje wartości (będą dynamiczne). Mam jeden problem. Doklejam do obiektu counter, żeby się nie nadpisywał w localStorage. Ale jak odswieże strone to znowu będzie leciało od product0, product1 itd. Czy doklejać do tego jakiś losowy string czy jakbyś to zrobił?

komentarz 27 września 2017 przez Tomek Sochacki Ekspert (228,960 p.)
a może lepiej do localStorage zapisuj od razu cały koszyk, a nie pojedyncze produkty? Następnie pobierając koszyk sparsujesz sobie obiekt, który będzie zawierać właśnie poszczególne produkty.

Tak na prawdę pobierając koszyk i tak bierzesz go w całości, więc nie widzę sensu tworzenia oddzielnych wpisów do LS dla każdego produktu.

Ponad to teraz zapisujesz w LS tylko produkty. Ok, ale co jeśli za chwilę zechcesz wsadzić tam też inne dane, np. jakieś lokalne ustawienia itp.? W tym momencie nie będziesz mógł już swobodnie iterować po całym LS bo chwycisz też dane "dodatkowe", które trzeba będzie filtrować.

Mając jeden wpis na cały koszyk sprawa jest uproszczona - zawsze parsujesz tylko jeden obiekt, a co w nim jest to już zależy od koszyka.
komentarz 27 września 2017 przez Alterwar Dyskutant (7,650 p.)
edycja 28 września 2017 przez Alterwar

Rozumiem, ale i tak muszę dodać produkt do koszyka. Więc jak klikam dodaj do koszyka to powinienem to zapisać gdzieś, żeby wchodząc w koszyk mieć wszystkie produkty. Dlatego nie rozumiem, jak mogę zapisać cały koszyk, skoro najpierw produkty muszę do niego wsadzić. Coś chyba nie rozumiem jak to zrobić. Bo teraz dodaje dany produkt do koszyka

Dodaję teraz wszystkie 'dodania do koszyka' do tablicy. Czyli mam 1 LS z tablicą wszystkich obiektów(produktów)

let buttonAddToCart = document.getElementById('add-to-cart');
let phraseFormatForm = document.getElementById('phraseFormatForm');

let arrayProducts = [];
buttonAddToCart.addEventListener('click', function(){

	let createProduct = {
		formats: phraseFormatForm.value,
		cover: 'cover1',
		page: 30,
		edition:100,
		cost:120.00
	};

	arrayProducts.push(createProduct);
	localStorage.setItem('product', JSON.stringify(arrayProducts));

	let retrievedObject = localStorage.getItem('product');

	console.log('retrievedObject: ', JSON.parse(retrievedObject));
});

Jest tylko jeden problem. Gdy robię refresh strony i dodaję kolejny obiekt to tablica się zeruje i dodaję obiekty od nowa. Pewnie dlatego, że po refreshu tablica robi się pusta. Tylko jak to zrobić, żeby po refreshu dodawało do tablicy która była stworzona i znajduję sie w LS? Próbowałem warunków, przeszperałem stacka i dalej nic.

Udało mi się rozwiązać ten problem. Teraz tylko pytanie, czy o to chodzi? Dobry mam zamysł?

function createProducts(){	

		let products = {

			formats: phraseFormatForm.value,
	        cover: phraseCoverCost.value,
	        page: phrasePageCost.value,
	        edition: phraseEditionCost.value,
	        cost: howMuchPay.value
		}

		arrayProducts.push(products);

		localStorage.setItem('product', JSON.stringify(arrayProducts));

		let phraseObject = localStorage.getItem('product');

	}


	buttonAddToCart.addEventListener('click', function(){

		if(JSON.parse(localStorage.getItem('product'))){
			arrayProducts = JSON.parse(localStorage.getItem('product')) || [];
			createProducts();
		}else{
			arrayProducts = [];
			createProducts();
		}
		console.log(JSON.parse(localStorage.getItem('product')));
	});

 

Tworze produkt, dodaje go do tablicy w LS

Podobne pytania

0 głosów
1 odpowiedź 1,740 wizyt
pytanie zadane 1 lutego 2016 w PHP przez fusemul Użytkownik (720 p.)
0 głosów
1 odpowiedź 247 wizyt
+1 głos
1 odpowiedź 371 wizyt

88,331 zapytań

136,925 odpowiedzi

305,592 komentarzy

58,601 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...