Pomoć jquery - webshop košarica

Programiranje
#1

Pozdrav,
imam jedan problem koji me j**e već satima…Prepravljam jedan webshop i moram na kategoriju proizvoda kod svakog proizvoda dodati količinu i gumb da se doda u košaricu. Gumb kao takav radi normalno, ali kad dodam polje za količinu dolazim do problema.
Zapravo sam došao do rješenja, ali radi samo na prvom proizvodu, a ne na cijeloj listi (znam da je problem da trebam koristiti .each, ali neznam sve zajedno uklopiti da radi).

Princip na koji radi dodavanje u košaricu mora ostati isti jer to ne mogu mijenjati.

Kod koji koristim za količinu i dodavanje u košaricu je sljedeći (prikazuje se za svaki proizvod na listi):

<input value="1" step="1" min="1" class="d-block form-control" type="number" id="quantity">
<button class="col-12 btn btn-blue btn-lg" id="addtocart" type="submit" class="item_add_to_cart_new" data-id="@item.Id" onclick="Util.AddToCart(this); return false;">Dodaj u košaricu</button>

Jquery koji koristim:

<script>
   $("#quantity").change(function(){
	var a = $('#quantity').val();
  $('#addtocart').attr('data-quantity', a );
});
</script>

Nisam baš na ti sa jquery-om i zato mi treba pomoć. Dobra duša koja mi pomogne ima cugu :slight_smile:

#2

Pa prvi problem je šta imaš atribut id sa value quantitiy postavljen na više elemenata u DOM-u.
Id atribut treba biti unique. Kad to središ možemo dalje :slight_smile:

#3

To mogu odraditi vrlo jednostavno da mi id bude id proizvoda i bude unique. Probao sam i stim, ali sam zapeo… najveci problem mi je da postavim i u ‘#i’ u jquery.

#4

Mozes to ovako otprilike uraditi.Kao sto je vec pomenuto, dupli ID-evi ne bi trebali postojati tako da sam ti ove inpute prebacio na klasu - pored toga imas i drugih gresaka u HTML-u gdje vise puta istom elementu deklarises class atribut.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>  
  <input value="1" step="1" min="1" class="d-block form-control qty" type="number">
  <button class="col-12 btn btn-blue btn-lg item_add_to_cart_new" type="submit" data-id="@item.Id">Dodaj u košaricu</button>
</div>  
  
<div>  
  <input value="1" step="1" min="1" class="d-block form-control qty" type="number">
  <button class="col-12 btn btn-blue btn-lg item_add_to_cart_new"  type="submit" data-id="@item.Id">Dodaj u košaricu</button>
</div> 
  
<div>  
  <input value="1" step="1" min="1" class="d-block form-control qty" type="number">
  <button class="col-12 btn btn-blue btn-lg item_add_to_cart_new" type="submit" data-id="@item.Id">Dodaj u košaricu</button>
</div> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

evo jQuery koji prati taj HTML:

$( document ).ready(function() {
    $('.qty').change(function() {
      const quantity = $(this).val()
      const addToCartBtn = $(this).next('.item_add_to_cart_new')
      addToCartBtn
        .attr('data-quantity', quantity)
    })
});

Samo jedan od nacina za rijesiti ovaj problem :slight_smile:

Evo i demo: https://jsbin.com/tenalituwe/edit?html,js,output

1 Like
#5

Odlicno, to je to. Inace takve stvari vrlo jednostavno radim putem forme, ali u ovom slucaju radim na tudem kodu i mogu samo male modifikacije raditi.

Hvala puno, posalji paypal da ti za cugu uplatim.

#6

jQuery je trebao umrijeti još prije 5 godina :slight_smile:

document.querySelectorAll('.qty').forEach( input => {
    input.addEventListener( 'change', e => {
        e.target.parentElement
            .querySelector('.item_add_to_cart_new').dataset.quantity = e.target.value;
    }, false );
} );
1 Like