Shopify Question posted in
The Shopify help center can be found here.

JS incrementing quantity 2 by 2 instead of 1 by 1 – Shopify

I’m creating a shopify theme but when i add this script to carti got a bug. Whe you try increment products in cart they jump 2 by 2.

HTML

<div class="quantity">

<input type="number" name="updates[]" value="{{ item.quantity }}" data-id="{{ item.id }}" min="0" max="99" step="1" title="Qty" class="qty" size="4">

</div>

JS

if ((".quantity").length > 0) {
    var form_cart = $("form .quantity");
    form_cart.prepend('<span class="minus"><i class="fa fa-minus-square-o"></i></span>');
    form_cart.append('<span class="plus"><i class="fa fa-plus-square-o"></i></span>');

    var minus = form_cart.find($(".minus"));
    var plus  = form_cart.find($(".plus"));

    minus.on("click", function(){
      var qty = $(this).parent().find(".qty");
      if (qty.val() <= 1) {
        qty.val(1);
      } else {
        qty.val((parseInt(qty.val())-1));
      }
    });
    plus.on("click", function(){
      var qty = $(this).parent().find(".qty");
      qty.val((parseInt(qty.val())+1));
    });
  }

ps. min and max arent working

sorry for bad english

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    changing var qty = $(this).parent().find(".qty"); for outside if and works tks for all

    if ((".quantity").length > 0) { var form_cart = $("form .quantity"); form_cart.prepend(''); form_cart.append('');

    var minus = form_cart.find($(".minus"));
var plus  = form_cart.find($(".plus"));

var qty = $(this).parent().find(".qty");

minus.on("click", function(){
  if (qty.val() <= 1) {
    qty.val(1);
  } else {
    qty.val((parseInt(qty.val())-1));
  }
});
plus.on("click", function(){
  qty.val((parseInt(qty.val())+1));
});

    };


  2. 0

    I dont think you actually need the JS for this input type to work, so adding or removing values inside of the JS is like just double-adding or double-removing values 😉

    Hope this can help !

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search