• 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.

VPS Starter Arubacloud
+1 głos
258 wizyt
pytanie zadane 28 sierpnia 2021 w JavaScript przez ShockWave Bywalec (2,350 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 (123,060 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 Ekspert (251,270 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 566 wizyt
pytanie zadane 13 września 2016 w HTML i CSS przez mowmiheniek Stary wyjadacz (11,900 p.)
0 głosów
2 odpowiedzi 882 wizyt
pytanie zadane 2 kwietnia 2020 w JavaScript przez patrick167 Początkujący (260 p.)
0 głosów
2 odpowiedzi 155 wizyt
pytanie zadane 14 sierpnia 2023 w Systemy CMS przez Billy Użytkownik (680 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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!

...