3

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 ?

  • You jQuery to add functionality. – aravind Mar 8 '18 at 6:09
  • Where should i define my jquery function ? – Ebin Manuval Mar 8 '18 at 6:15
  • 1
    Create a custom module for those increment & decrement field. – aravind Mar 8 '18 at 6:27
4

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($){
    $('.increaseQty, .decreaseQty').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>
  • Your code is almost correct but it will work only when you are having 1 product in cart. Because increment and decrement in your code is managed by increment / decrement button's class i.e "increaseQty" & "decreaseQty". So if you want to make is available for n numbers of products in cart then you are required to replace this line in above code "$('.increaseQty, .decreaseQty').on("click",function(){" with this line "$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){". Hence right now I have managed using ID so it will work perfect. – LR Soni Sep 27 '18 at 19:34
  • How does this trigger a change event so ko knows to show the 'update' button? I'm able to get the + - buttons working and changing the input value, but the 'update' button does not appear to actually save and update the cart – IamFace Oct 18 '18 at 14:52
  • 1
    hi @aravind, above code works in cart page, not on minicart – jafar pinjar Feb 21 at 8:37
  • Since minicart is rendered using KO.You need to override "module-checkout/view/frontend/web/template/minicart/item/default.html" file in vendor – aravind Feb 25 at 6:06
0
<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>    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.