Magento – Magento 2 : How to Add quantity increment & decrements button on product details page

catalogmagento2

How to add increment(plus +) and decrements(minus -) qty button on product detail page?

enter image description here

Best Answer

You can implement this with UI Components

1) Configure your requirejs-config.js to define your js module: (app/design/frontend/<vendor>/<theme>/Magento_Catalog/).

var config = {
    map: {
        '*': {
            'qty-counter': 'Magento_Catalog/js/qty-counter'
        }
    }
};

2) Copy and change template from vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml to your theme app/design/frontend/<vendor>/<theme>/Magento_Catalog/templates/product/view/

...
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Quantity:') ?></span></label>
            <div id="custom-qty" class="control" data-bind="scope: 'qty-counter'">
                <!-- ko template: getTemplate() --><!-- /ko -->
                <script type="text/x-magento-init">
                    {
                        "#custom-qty": {
                            "Magento_Ui/js/core/app": {
                                "components": {
                                    "qty-counter": {
                                        "component": "qty-counter",
                                        "config": {
                                            "qty": <?php echo $block->getProductDefaultQty() * 1 ?>,
                                            "dataValidate": <?php echo json_encode($block->getQuantityValidators()) ?>
                                        }
                                    }
                                 }
                            }
                        }
                    }
                </script>
            </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>
...

3) Add your js module

'use strict';

define([
    'ko',
    'uiElement'
], function (ko, Element) {
    return Element.extend({
        defaults: {
            template: 'Magento_Catalog/input-counter'
        },

        initObservable: function () {
            this._super()
                .observe('qty');

            return this;
        },

        getDataValidator: function() {
            return JSON.stringify(this.dataValidate);
        },

        decreaseQty: function() {
            var qty;

            if (this.qty() > 1) {
                qty = this.qty() - 1;
            } else {
                qty = 1;
            }

            this.qty(qty);
        },

        increaseQty: function() {
            var qty = this.qty() + 1;

            this.qty(qty);
        }
    });
});

4) Add html template

<div class="input-group">
    <span class="input-group__addon">
        <button click="decreaseQty" class="input-group__button input-group__button--decrease">
            <span class="input-group__icon input-group__icon--decrease"></span>
        </button>
    </span>
    <input data-bind="value: qty(), attr: {'data-validate': getDataValidator(), 'title': $t('Qty')}"
           type="number"
           name="qty"
           id="qty"
           maxlength="12"
           class="input-group__input" />
    <span class="input-group__addon">
        <button click="increaseQty" class="input-group__button input-group__button--increase">
            <span class="input-group__icon input-group__icon--increase"></span>
        </button>
    </span>
</div>
Related Topic