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

tworzenie koszyka javaScript - zend

VPS Starter Arubacloud
0 głosów
1,007 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 (227,510 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 (212,630 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

komentarz 27 września 2017 przez Tomek Sochacki Ekspert (227,510 p.)
myślę, że chyba przyjemniejsze w obsłudze jest localStorage i po prostu zapisywanie obiektu po JSON.stringify().
komentarz 27 września 2017 przez Alterwar Dyskutant (7,650 p.)
Okej :) znalazłem coś takiego: https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript

To rozwiązanie chyba będzie sensowane w tym przypadku? :)
komentarz 27 września 2017 przez Tomek Sochacki Ekspert (227,510 p.)
lepiej wygugluj sobie localStorage i tu zapisuj dane. Jest to lepsze niż ciasteczka i pewniejsze.
komentarz 27 września 2017 przez Alterwar Dyskutant (7,650 p.)
var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

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

 

Mam coś takiego, wygląda to chyba sensownie. I w przypadku gdy obiekt istnieje, w koszyku powinienem wyświetlać ten obiekt? Dobrze myślę?

komentarz 27 września 2017 przez Tomek Sochacki Ekspert (227,510 p.)
z tym wyświetlaniem tak bezpośrednio to bym uważał... zastanów się czy istnieje ryzyko, że zapisany koszyk nie będzie mógł zostać zrealizowany.

Na przykład co gdy wczoraj zapisałem w koszyku 3 książki X i gdy dziś wejdę do sklepu to dalej będę je miał w koszyku, ale w międzyczasie ktoś je wykupi? Myślę, że koszyk pobrany z localStorage powinien być zweryfikowany pod kątem aktualnej oferty.

A co jeśli np. tydzień temu zapisałem koszyk... dziś chcę kupić te produkty i zaczytuje mi ceny z koszyka, np. książka X za 50zł. Ale... 2 dni temu dałeś promocję, i obecnie książka kosztuje np. 30zł... a ja mam płacić nadal 50zł tylko dlatego, że wrzuciłem ją do koszyka kilka dni temu?

Takich przypadków pewnie można by rozważać jeszcze wiele... może warto w takiej sytuacji dać jakaś elegancką informację dla użytkownika?

To w sumie taka mała dygresja, ale robiąc koszyk produktowy powinieneś przeanalizować wiele scenariuszy...

Pytanie np. czy warto w koszyku zapisywać ceny, czy może pobierać je zawsze z bazy? Dyskusyjna kwestia... zapisałem do koszyka książkę za 20zł. Wchodzę po 2 dniach i nie analizując wielce klikam KUP, a tu okazuje się, że w międzyczasie cena wzrosła do 30zł... Kupię po 30zł, ale może konkurencja miałaby ją za 20zł i masz jednego wkurzonego klienta więcej :)

 

Reasumując zanim zaczniesz bawić się w zapisywanie i odczytywanie koszyka zastanów się dobrze co tak na prawdę chcesz tam umieszczać i w jaki sposób pobierać... Bardzo często analiza funkcjonalności aplikacji (case method) jest o wiele trudniejsza niż samo jej napisanie...
komentarz 27 września 2017 przez Alterwar Dyskutant (7,650 p.)
Z tym, że koszyk istnieje np. 3 dni i za 3 dni chcę wykupić te produkty a one mają inną cenę się zgodzę. Kwestia jest tylko taka, że nie mam konkretnego produktu. Otóż jakby to przybliżyć, mam 5 selectów. W każdym selectcie jest po 5 wartości. Każda wartość ma osobną cenę. Więc wybieram po 1 pozycji z każdego selecta i dostaję cenę. W ten sposób użytkownik tworzy produkt. Więc cenę muszę przechowywać w koszyku. Może ograniczyć czas istnienia localStorage np. do 24h?
2
komentarz 27 września 2017 przez Tomek Sochacki Ekspert (227,510 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 (227,510 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ź 2,190 wizyt
pytanie zadane 1 lutego 2016 w PHP przez fusemul Użytkownik (720 p.)
0 głosów
1 odpowiedź 661 wizyt
+1 głos
1 odpowiedź 1,083 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...