Aktualizacja ceny i ilości z użyciem JS

Question

Hej

Chciałbym poprzez kliknięcie na dany produkt zaktualizować cenę i ilość w koszyku właśnie o dane tego produktu. Przykładowo: Początkowo koszyk jest pusty, klikam w produkt i do koszyka wskakuje cena i ilość, kolejne kliknięcia zwiększają te wartości. Strona jest tylko poglądowa, dlatego potrzebuję maksymalnie prostego kodu. Nie potrzebuję gotowców.

Czego użyć, czystego JS, czy jQuery?

Chciałbym te dane wysłać do pola <span>, jest lepsza opcja?

Odnośnik, który powinien dodawać ceny i koszyk, który powinien się aktualizować: 

<a href="javascript:void(0)" class="expand" onclick="add_item(1, 105.99);">Dodaj do koszyka</a>

<span id="quantity">Koszyk jest pusty</span>
<span id="price"></span>

oraz mój, działający w połowie kod JS (tzn dodaje tylko tą ostatnią pozycję, nie sumuje się)

function add_item(quantity, price){

	var quantity = quantity;
	var price = price;
	price = parseFloat(price);

	if(isNaN(basketQuantity))
	{
		var basketQuantity = 0;
		basketQuantity=basketQuantity + quantity;
	}
	if (isNaN(basketPrice))
	{
		var basketPrice = 0;
		basketPrice=basketPrice + price;
	}

	document.getElementById('quantity').innerHTML = basketQuantity+"szt. /";
	document.getElementById('price').innerHTML = basketPrice+"zł";
}

 

Nie liczę na gotowe rozwiązania, chciałbym wiedzieć gdzie robię błąd i może zmienić podejście, odświeżyć umysł :D

 

Pozdrawiam serdecznie ;)

Answer 1

innerHTML ktorego używasz po prostu zastąpi poprzedni content diva.

Najwygodniej byłoby przechowywać aktualny stan koszyka jako tablicę obiektów, na przykład:
 

var cartItems = [{
  id: 123,
  quantity: 2,
  price: 5
}, {
  id: 345,
  quantity: 1,
  price: 2
}];

Wtedy przy każdym dodaniu produktu do koszyka dodajesz go do tej tablicy lub usuwasz przy usunięciu. Dodatkowo na końcu każdej akcji wywołujesz funkcję, która przeiteruje po tej tablicy, pomnoży quantity razy price i zmieni zawartość spana.

A na sam koniec, eventy nawieszaj w JavaScriptie a nie w HTML :) I a.expand z Twojego przykładu powinna być buttonem a nie anchorem.

Comments

Co do buttona, faktycznie nie pomyślałem o tym, dzięki!

Chodziło mi o coś jeszcze prostszego, samo zwiększanie ilości o 1 po każdorazowym kliknięciu i dodawanie ceny do obecnej, ale rozumiem, że również mogę użyć podobnej tablicy, tylko trochę ją uprościć?

Co do innerHTML' a myślałem, że jak dodam cenę do już obecnej to będzie ta aktualna i podmienię to w tagu <span>, ale jakoś mi to nie pykło.

Pomyślę trochę nad tą tablicą, lecz proszę właśnie o utwierdzenie mnie czy warto jej użyć do tego prostego liczenia ;)

Dzięki za pomoc i leci naj ;)

---

W tym kodzie który wkleiłeś isNaN(basketPrice) zawsze będzie true bo deklarujesz tą zmienną wewnątrz bloku funkcji i dodatkowo w ifie. Deklarujesz je dopiero jeżeli jest NaN. To znaczy, że Twoja zmienna zostanie wyniesiona do kontekstu funkcji z wartością undefined za każdym razem kiedy wywołujesz tą funkcję. 

Spróbuj zadeklarować basketPrice  i basketQuantity poza blokiem tej funkcji i porównaj rezultaty.

Poczytaj czym jest hoisting w JavaScript'ie. To powinno Cię doprowadzić do tego dlaczego let działa lepiej :)

---

Poradziłem sobie, myślę że to jeden z najprostszych sposobów który mogłem zastosować, dzięki za wszystkie rady, wklejam jakby ktoś miał podobny problem.

function add_item(price){
	if(typeof sum === 'undefined')
	{
		var price = parseFloat(price);
		sum = price;
		quantity = 1;
	}
	else
	{
		sum+=price;
		quantity++;
	}

	document.getElementById('quantity').innerHTML = quantity+"szt./";
	document.getElementById('price').innerHTML = sum.toFixed(2)+"zł";
}