Magento – Quantity Increment and Decrement Button not work in Magento 2

magento-2.1.9qty-incrementquantity

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.

enter image description here

Best Answer

=> 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>
Related Topic