Problem z funkcjonalnością - sklep koszyk.

Question

Cześć, mam prośbę bo obecnie przycisk addToBasket dodaje do koszyka taką ilość jaką użytkownik poklikał w substractBtn i addBtn. A chciałbym żeby to było bardziej intuicyjnie i działało tak jak w większości sklepów, czyli jeśli ktoś ustawił ilość 5 to przy kliknięciu dodaj do koszyka raz doda te 5 szt, i po kolejnym kliknięciu znowu doda 5 szt.

Mam pytanie też jak np ograniczyć liczbę dodawanych sztuk do 10.

document.addEventListener("DOMContentLoaded", (e) => {

    let substractBtn = document.getElementsByClassName("substract");
    let counter = document.getElementsByClassName("count");
    let addBtn = document.getElementsByClassName("add");
    let totalPurchases = document.getElementsByClassName("totalPurchases");
    let cartQuantity = document.getElementsByClassName("cartQuantity");
    let addToBasket = document.getElementsByClassName("addToBasket");

    let count = 0;
    let totalPLN = 0;

    substractBtn[0].addEventListener("click", (e) => {
        if( count > 0)
        {
            count--;
            counter[0].innerText = count;
            totalPLN -= 1278;
        }
        else
        {
            counter[0].innerText = "0";
        }
    });

    addBtn[0].addEventListener("click", (e) => {

        if (count <= 0)
        {
            count++;
            counter[0].innerText = count;
            totalPLN += 1278;

        }
        else if (count >= 14)
        {
            counter[0].innerText = count;
        }
        else
        {
            count++;
            counter[0].innerText = count;
            totalPLN += 1278;
        }
    });

    addToBasket[0].addEventListener("click", (e) => {
        totalPurchases[0].innerText = parseFloat(totalPLN) +" zł";
        cartQuantity[0].innerText = count;
    });
});

 

Answer 1

totalPLN powinieneś obliczać w funkcji podsumowującej. Oraz utwórz dodatkwą zmienną sumującą kliknięcia aktualne i poprzednie.

I użyłbym input number do ilości produktów

    let count = 0;
    let totalPLN = 1278;
 
    substractBtn[0].addEventListener("click", (e) => {
        if( count > 0)
        {
            count--;
            counter[0].innerText = count;
        }
        else
        {
            counter[0].innerText = "0";
        }
    });
 
    addBtn[0].addEventListener("click", (e) => {
 
        if (count <= 0)
        {
            count++;
            counter[0].innerText = count;
        }
        else if (count >= 14)
        {
            counter[0].innerText = count;
        }
        else
        {
            count++;
            counter[0].innerText = count;
        }
    });
    let sum = 0;
    addToBasket[0].addEventListener("click", (e) => {
			  sum+=count
        totalPurchases[0].innerText = parseFloat(totalPLN*sum) +" zł";
        cartQuantity[0].innerText = sum;
    });
});

 

Answer 2

Możesz użyć jednej funkcji do "obsługi" licznika

Przykład

<div id="counter">
  <button class="substract">&minus;</button>
  <span class="count">1</span>
  <button class="add">&plus;</button>
</div>

<button class="addToBasket">Koszyk</button>
<div>
  <span class="cartQuantity"></span>
  <span class="totalPurchases"></span>
</div>

const substractBtn = document.querySelector('.substract'),
      counter = document.querySelector('.count'),
      addBtn = document.querySelector('.add'),
      totalPurchases = document.querySelector('.totalPurchases'),
      cartQuantity = document.querySelector('.cartQuantity'),
      addToBasket = document.querySelector('.addToBasket');


const countLimit = {
  min: 1,
  max: 10
}

const totalPLN = 1278;

addBtn.addEventListener('click', () => {
  updateCounter(1);
});

substractBtn.addEventListener('click', () => {
  updateCounter(0);
});

function updateCounter(action) {
  let count = parseInt(counter.textContent);
  // 0 (false) - odjąć, 1 (true) - dodać
  action ? count++ : count--;
  if (count >= countLimit.min && count <= countLimit.max)
    counter.textContent = count;
}

addToBasket.addEventListener("click", (e) => {
  const currentCount = parseInt(counter.textContent);
  let sum =  parseInt(cartQuantity.textContent) || 0;
  
  sum += currentCount;  
  totalPurchases.innerText = parseFloat(totalPLN * sum) + " zł";
  cartQuantity.innerText = sum;
});