0

I want to add Quantity Increment/Decrement buttons on Category Page.

I am using a theme that already provides this feature on product page. Now I want to add same feature in category pages.

Anyone who has done similar work? Please guide.

2
  • getting any solution ??? Apr 8 '21 at 6:17
  • Yes I had to do custom development. Solution shared as answer Apr 9 '21 at 12:21
2

Found the solution by adding this code to the theme product listing phtml file. app/design/frontend/Sm/destino/Magento_Catalog/templates/product/list.phtml

<div class="box-tocart">
    <div class="fieldset">
        <div class="field qty">
            <!-- <label class="label" for="qty"><span><?php /* @escapeNotVerified */
            //echo __('Qty') ?></span></label> -->
            <div class="control control-qty-cart">
                <input type="number" name="qty" id="qty" maxlength="12" value="<?php /* @escapeNotVerified */
               echo $block->getProductDefaultQty() * 1 ?>" title="<?php /* @escapeNotVerified */
               echo __('Qty') ?>" class="qty-default input-text qty"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                />            
                <div class="control-qty">
                    <span class="quantity-controls quantity-plus"></span>
                    <span class="quantity-controls quantity-minus"></span>
                </div>
            </div>
        </div>
        <div class="actions">
            <button type="submit"
                    title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                    class="action tocart primary">
                <span><?php /* @escapeNotVerified */
                    echo __('Add to Cart') ?></span>
            </button>
        </div>
    </div>
</div>

<script type="text/javascript">
    require([
          'jquery'
      ], function ($) {
          $('.quantity-plus').click(function () {
              // $('.qty-default').val(Number($('.qty-default').val()) + 1);
              var currentQTY = parseInt($(this).parent().parent().find(".qty-default").val());
              currentQTY = currentQTY + 1;
              $(this).parent().parent().find(".qty-default").val(currentQTY);
          });

          $('.quantity-minus').click(function () {
              // var value = Number($('.qty-default').val()) - 1;
              var currentQTY = parseInt($(this).parent().parent().find(".qty-default").val());
              currentQTY = currentQTY - 1;
              if (currentQTY > 0) {
                  $(this).parent().parent().find(".qty-default").val(currentQTY);
              }
          });
      });
</script>
2
  • i think using this code on click of plus or minus every products qty will change Apr 9 '21 at 15:17
  • Nope. I have added .parent().parent() ,this will only take change qty of that specific product. I have tested it and working fine on my site as well. Apr 12 '21 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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