Adding quantity increment button in cart and mini cart

magento.stackexchange https://magento.stackexchange.com/questions/318925

Question

I need to add a quantity increment button in cart page and mini cart popup like this.

enter image description here

I added the button but I can't assign the functionality.
This is what I did app/code/Amsi/UserManagement/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock  name="checkout.cart.form">
            <block class="Magento\Framework\View\Element\RendererList" name="checkout.cart.item.renderers.override" as="renderer.list.custom"/>
            <arguments>
                <argument name="renderer_list_name" xsi:type="string">checkout.cart.item.renderers.override</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Amsi/UserManagement/view/frontend/layout/checkout_cart_item_renderers.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.cart.item.renderers.override">
            <block class="Magento\Checkout\Block\Cart\Item\Renderer" as="default" template="Amsi_UserManagement::cart/item/default.phtml" />

            <block class="Magento\Checkout\Block\Cart\Item\Renderer" as="simple" template="Amsi_UserManagement::cart/item/default.phtml" />
        </referenceBlock>
    </body>
</page>

app/code/Amsi/UserManagement/view/frontend/templates/cart/item/default.phtml

.......
<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
    <div class="field qty">
        <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
            <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
        </label>
        <div class="control qty">
            <button>-</button>
            <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                   name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                   data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
                   value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                   type="number"
                   size="4"
                   title="<?= $block->escapeHtml(__('Qty')) ?>"
                   class="input-text qty"
                   data-validate="{required:true,'validate-greater-than-zero':true}"
                   data-role="cart-item-qty"/>
            <button >+</button>
        </div>
    </div>
</td>
......

How can i assign functionality to increment and decrements buttons ?

Was it helpful?

Solution

app/code/Amsi/UserManagement/view/frontend/templates/cart/item/default.phtml

I have added For both increment and decrementing quantity.

You can add the button near Quantiy using below code. 

<div class="control qty">
   <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
       name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
       data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
       value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
       type="number"
       size="4"
       title="<?= $block->escapeHtml(__('Qty')) ?>"
       class="input-text qty"
       data-validate="{required:true,'validate-greater-than-zero':true}"
       data-role="cart-item-qty"/>                                                     

      /*Code to add increment and decrement button*/

   <div class="qty_control">
            <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
            <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"></button>
      </div>
</div>

<script type="text/javascript">
require(["jquery"],function($){
    $('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){ 
        var $this = $(this);
        var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
        var currentQty = $("#cart-"+ctrl+"-qty").val();
        if($this.hasClass('increaseQty')){
            var newAdd = parseInt(currentQty)+parseInt(1);
             $("#cart-"+ctrl+"-qty").val(newAdd);
        }else{
             if(currentQty>1){
                var newAdd = parseInt(currentQty)-parseInt(1);
                $("#cart-"+ctrl+"-qty").val(newAdd); 
             }
        }
    });
});
</script>

OTHER TIPS

<div class="field qty">
                <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
                <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="{'required-number':true,digits:true}"/>
                </div>
                <div class="qty-change">
                    <a href="javascript:void(0)" class="increaseQty">+</a>
                    <a href="javascript:void(0)" class="decreaseQty">-</a>
                </div>
            </div>

      <script>
require([
        'jquery',
        'mage/mage'
    ], function ($) {
        'use strict';

        $(".increaseQty").unbind('click').click(function () {
            if ($(this).parents('.field.qty').find("input.input-text.qty").is(':enabled')) {
                $(this).parents('.field.qty').find("input.input-text.qty").val((+$(this).parents('.field.qty').find("input.input-text.qty").val() + 1) || 0);
                $(this).parents('.field.qty').find("input.input-text.qty").trigger('change');
                $(this).focus();
            }
        });

        $(".decreaseQty").unbind('click').click(function () {
                if ($(this).parents('.field.qty').find("input.input- 
                        text.qty ").is(':enabled')){
                        $(this).parents('.field.qty').find("input.input- 
                            text.qty ").val(($(this).parents('.field.qty').find("
                            input.input -
                            text.qty ").val() - 1 > 0) 
                            ($(this).parents('.field.qty').find("input.input-text.qty").val() -
                                1): 0); $(this).parents('.field.qty').find("input.input-text.qty").trigger('change'); $(this).focus();
                    }
                });
        });

    </script>

also you can do it the super fast way just inject this jQuery snippet in your html head

jQuery('#shopping-cart-table :input[type="number"]').bind('keyup mouseup', function () { jQuery(".update").click() });

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top