I have a problem in product listing quantity counter, sometimes it will work and sometimes it will not. I want to create custom JQuery script to enable product counter increment and decrement, But the problem is that, it is a listing page so if I create script others will be affected. Please correct me if I'm wrong.

Below attached is screenshot.

enter image description here

Here's my script that is working in product detail page only.

 var $currentQTY=parseInt($('#qty').val());

        // console.log($currentQTY);

        if ($currentQTY<1){
        // console.log($currentQTY);


  • Were you able to resolve the issue ? if yes, please post your answer Commented Nov 7, 2017 at 7:49
  • Hello @ManashviBirla yes I resolved this one in my end. Commented Nov 7, 2017 at 7:59
  • can you please post your solution here, so that it would be of help.! Commented Nov 7, 2017 at 9:24
  • Hello @ManashviBirla I'm a little bit busy right now in my work. But If I have free time I will post it in here. Thanks Commented Nov 7, 2017 at 9:28
  • Hi @ManashviBirla I have now posted the solution of my problem below. please check it. I just added a jquery codes to addtocart.phtml found on Magento_Catalog/templates/product/view/addtocart.phtml Commented Nov 7, 2017 at 9:41

2 Answers 2


Others get affected because id of each input box is same.

You can achieve whatever you want by doing following -

You will have to define each input box with different-2 id and give a common class name for each input box (.qty).

For example -

Input boxes id will be like - #qty_1, #qty_2

Class name will be like - .qty

Note - Suffix in the input box id can be the product id of the respective product.

Then put both increment and decrement buttons and input box in the same division (By doing this you can easily find the respective input box). Then you can use the object of clicked element (this) in the function to identify the clicked element.

Assuming that your structure of division is something like following -

<input class="qty" id="qty_1" />
<button class="qty-inc">+</button>
<button class="qty-dec">-</button>

Javascript code Example -

$(".qty-inc").click(function() {
   // This will return the quantity of the box which is clicked
  // this is the object of element, which has been clicked
   var currentQTY = parseInt($(this).parent().find(".qty").val());
   // Increasing the quantity
   currentQTY = currentQTY + 1;
   // Setting the quantity of only that element,
   //which has been clicked

You can do the same with .qty-dec , make sure to remove

var currentQTY=parseInt($('#qty').val());

line as the replacement of that line is included inside the click function.


Here's how I solved my problem.

This is the codes.

enter image description here

  • which file is this ? Commented Nov 7, 2017 at 9:41
  • app/design/frontend/Magento_Catalog/templates/product/view/addtocart.phtml Commented Nov 7, 2017 at 9:42
  • @ManashviBirla click accept my answer if this answer helped you. so that others can see this and help them if they will encounter a problem like this in the future. Thanks Commented Nov 7, 2017 at 9:46
  • You're welcome man! Just sharing what I got. Thanks Commented Nov 7, 2017 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.