Quantity Increment and Decrement Button not work in Magento 2

Question

I'm using custom modules to show quantity increment/decrement in quantity box using KnockoutJS.

Making custom modules for every folder is correct.but it nothing happpend, after click on increment/decrement button on product details page in magentov2.1.9.

I followed this link during this task:

https://magenticians.com/quantity-increment-decrement-magento-2/

what are missing from my side.

Answer 1

=> Go to your theme Folder and create file called addtocart.phtml and past below code.

Quantity Increment and Decrement Button working fine by using below code

E.g :

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/addtocart.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
            <?php /*Add Plus Button */ ?>
             <input type='button' value='+' class='qtyplus' field='qty' />
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       maxlength="12"
                       value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
                       title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
                <?php /*Add Minus Button */ ?>
            <input type='button' value='-' class='qtyminus' field='qty' />
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                    class="action primary tocart"
                    id="product-addtocart-button">
                <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
            </button>
            <?php echo $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": false
            }
        }
    }
</script>
<?php endif; ?>
<?php /*JS FOR +-*/ ?>
<script type="text/javascript">
        //&lt;![CDATA[
        require(['jquery'], function ($) {
            setTimeout(function () {
                // This button will increment the value
                jQuery('.qtyplus').click(function (e) {
                    // Stop acting like a button
                    e.preventDefault();
                    // Get the field name
                    fieldName = jQuery(this).attr('field');
                    // Get its current value
                    var currentVal = parseInt(jQuery('input[name=' + fieldName + ']').val());
                    // If is not undefined
                    if (!isNaN(currentVal)) {
                        // Increment
                        jQuery('input[name=' + fieldName + ']').val(currentVal + 1);
                    } else {
                        // Otherwise put a 0 there
                        jQuery('input[name=' + fieldName + ']').val(0);
                    }
                });
                // This button will decrement the value till 0
                jQuery(".qtyminus").click(function (e) {
                    // Stop acting like a button
                    e.preventDefault();
                    // Get the field name
                    fieldName = jQuery(this).attr('field');
                    // Get its current value
                    var currentVal = parseInt(jQuery('input[name=' + fieldName + ']').val());
                    // If it isn't undefined or its greater than 0
                    if (!isNaN(currentVal) && currentVal > 0) {
                        // Decrement one
                        jQuery('input[name=' + fieldName + ']').val(currentVal - 1);
                    } else {
                        // Otherwise put a 0 there
                        jQuery('input[name=' + fieldName + ']').val(0);
                    }
                });
            }, 100);
        });
        //]]&gt;
    </script>

Answer 2

Magento 2 product listing page add quantity increase and decrease buttons

Add below HTML code in form of add to cart section

<div class="field qty">
    <div class="control qty-change">
      <button class="decreaseqty">-</button>
        <input type="hidden"
               name="qty"
               id="qty"
               value="<?= /* @escapeNotVerified */ $block->getProductDefaultQty() * 1 ?>"
               title="<?= /* @escapeNotVerified */ __('Qty') ?>"
               class="input-text qty"
               data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
               />

        <span class="qty-label"> 1 ITEMS </span>
      <button class="increaseqty">+</button>
    </div>
</div>

Add below jQuery in foldet costume theme > web > js > inc_dec.js and call it to default_head_blocks.xml <link src="js/inc_dec.js"/>

<script type="text/javascript">
    require(["jquery"],function($){
    jQuery(".increaseqty").click(function(e){
        e.preventDefault();
        var qty = jQuery(this).closest("div.control").find("input");
        var newqty = parseInt(qty.val())+parseInt(1);
        qty.val(newqty);
        var val = qty.val();
        var label = jQuery.mage.__('ITEMS');
        var changeQty = parseInt(val) + label;
        qtyLabel = jQuery(this).closest("div.control").find("span");
        jQuery(qtyLabel).text(changeQty);
        return false;
    });

    jQuery(".decreaseqty").click(function(){
        var qty = jQuery(this).closest("div.control").find("input");
        var newqty = parseInt(qty.val())-parseInt(1);
        if(newqty < 1){
            return false;
        }
        qty.val(newqty);
        var val = qty.val();
        var label = jQuery.mage.__('ITEMS');
        var changeQty = parseInt(val) + label;
        qtyLabel = jQuery(this).closest("div.control").find("span");
        jQuery(qtyLabel).text(changeQty);
        return false;

    });
});
</script>