Magento2.3 - Add Quantity Increment/Decrement on Category Page

Question

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.

Answer 1

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>