Answers for "how to add the plus and minus qty in cart page"

1

how to add the plus and minus qty in cart page

5

For the cart page

First, override this file in your module or theme Path: vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml

Find the element <div class="control qty"> and replace it with 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"/>
    <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>
and add below script in the last

<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>
Posted by: Guest on September-03-2021

Browse Popular Code Answers by Language