Quantity optin with plus-minus on Home/Collection page

SaqibAli
New Member
1 0 0

Hi All,

 

I was trying to set the quantity option on the Shopify home page through custom code.

Actually, i was doing that with a plus/minus icons for increment/decrement. The code works well for first product item but on the other product items, it increments of value 2,3,4 so on respectively. I tested that on other themes also but the problem is there. Code works well on product page but the issue is on collection/home page when there are more then one products on the page then the quantity increment/decrement not works well.

 

 

Code is here.

 

HTML : 

 

<div class="inc buttonss">+</div>

<input type="number" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" min="1">

<div class="dec buttonss">-</div>

</div>

 

 

JS Code:

 $(".buttonss").on("click", function() {
 
  var $button = $(this);
  var oldValue = $button.parent().find("input").val();
 
  if ($button.text() == "+") {
  var newVal = parseFloat(oldValue) + 1;
} else {
   // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }
 
  $button.parent().find("input").val(newVal);
 
});
 
 
Note: I tested the different codes, same result is for all. The issues is when there are more then one product item on the page. This issue appears.
Password : ubralo
 
Check my store quantity up down for all items
0 Likes