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

Problem z funkcjonalnością - sklep koszyk.

+1 głos
132 wizyt
pytanie zadane 28 sierpnia 2021 w JavaScript przez ShockWave Bywalec (2,320 p.)

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;
    });
});

 

2 odpowiedzi

0 głosów
odpowiedź 28 sierpnia 2021 przez pablop76 VIP (119,480 p.)

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;
    });
});

 

0 głosów
odpowiedź 30 sierpnia 2021 przez VBService Mędrzec (163,370 p.)
edycja 30 sierpnia 2021 przez VBService

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;
});

 

Podobne pytania

0 głosów
2 odpowiedzi 367 wizyt
pytanie zadane 13 września 2016 w HTML i CSS przez mowmiheniek Stary wyjadacz (11,940 p.)
0 głosów
2 odpowiedzi 535 wizyt
pytanie zadane 2 kwietnia 2020 w JavaScript przez patrick167 Początkujący (260 p.)
+5 głosów
1 odpowiedź 255 wizyt

87,976 zapytań

136,557 odpowiedzi

304,510 komentarzy

58,337 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.

...