Zliczenie odpowiedniej liczby kliknięć dla danego elemenu

Question

Cześć,

mam problem ze zliczeniem ilości dodanych produktów do koszyka. Na wstępie pobieram 20 elementów przez pętlę i umieszczam je w DOM. Dla każdego elementu mam przycisk dodaj do koszyka, chciałbym aby po kliknięciu w jeden produkt wiele razy pojawiał się on w koszyku tylko raz i zliczana była ilość tych produktów. Niestety nie mam pomysłu jak mógłbym to zrobić. Myślałem o jakimś if, który sprawdzał by nazwę pizzy, ale chyba byłby za bardzo rozbudowany.

.then(data => {
    let valueCurrency = 0;
    data.forEach(element => {
        const shoppingCart = document.querySelector(".shoppingCart");
        const pizzas = document.querySelector(".pizzas");
        const box = document.createElement("div");
        const img = document.createElement("img");
        const title = document.createElement("h3");
        const ingredients = document.createElement("p");
        const price = document.createElement("h4");
        const btn = document.createElement("button");
        const totalPrice = document.querySelector(".totalPrice");
        
        box.className = "box";
        ingredients.className = "ingredients"
        btn.className = "btn";
        
        img.src = element.image;
        img.style.width = "250px";
        img.style.height = "250px";
        
        title.innerHTML = element.title;
        
        ingredients.innerHTML = element.ingredients;
        
        price.innerHTML = element.price.toFixed(2) + " zł";
        
        btn.innerHTML = "Dodaj do koszyka";
        
        box.appendChild(img);
        box.appendChild(title);
        box.appendChild(ingredients);
        box.appendChild(price);
        box.appendChild(btn);
        pizzas.appendChild(box);


        btn.addEventListener("click", (e) =>{
            valueCurrency = valueCurrency + element.price;

            console.log(valueCurrency);
            const pizzasList = document.createElement("li");
            const pizzaPrice = document.createElement("p");
            const count = document.createElement("h5");
            const btnRemove = document.createElement("button");
            btnRemove.innerText = "X";
            
            pizzaPrice.innerText = price.textContent;
            
            totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);

            pizzasList.innerText = title.textContent + " " + price.textContent;
            console.log(price.textContent)
            shoppingCart.prepend(pizzasList);
        })
    });

link do repo: https://github.com/ItsShock/internJavaScript

Proszę o rady i z góry dziękuję za pomoc.

Answer 1

Możesz mieć tablicę z koszykiem zakupowym i do niej wrzucać kliknięte produkty i na nim robić co chcesz.

Comments

I jeśli pojawią się dwie takie same wartości to się z duplikują? Czy to kwestia wyciągnięcia z niej danych?

---

no ale to od Ciebie zależy w jaki sposób implementujesz strukturę obiektu, tak aby w swoim zbiorze był on rozróżnialny na tle innych tej samej kategorii

---

@ShockWave, Twoje produkty mają id, więc możesz do koszyka wrzucać tylko id (lub całe obiekty) z powtórzeniami i wyliczać odpowiednio cenę. Możesz wrzucać id (lub całe obiekty) + dla każdego mieć count i wyliczać odpowiednio cenę, możesz mieć same id (lub całe obiekty) + count i  obok w kodzie zmienną totalPriceToPay. Pełna dowolność. Napewno nie wymieniłem wszystkich możliwości.

---

a masz może jakiś przykład z implementacją dla takiego przypadku: " Możesz wrzucać id (lub całe obiekty) + dla każdego mieć count i wyliczać odpowiednio cenę" ?