plus, minus in cart page

Question

I have the following design below, in which it has plus and minus on the cart page and mini cart page.

I have achieved it in minicart but couldn't achieve it on the cart page.

can someone help to achieve this solution?

Answer 1

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>

For mini cart

Override this file in your module or your theme Path: vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

Find the element <div class="details-qty qty"> and replace it with below code

<div class="details-qty qty">
    <label class="label" data-bind="i18n: 'Qty', attr: {
           for: 'cart-item-'+item_id+'-qty'}"></label>
    <div class="more">+</div>
    <input data-bind="attr: {
           id: 'cart-item-'+item_id+'-qty',
           'data-cart-item': item_id,
           'data-item-qty': qty,
           'data-cart-item-id': product_sku
           }, value: qty"
           type="number"
           size="4"
           class="item-qty cart-item-qty">
    <div class="less">-</div>
    <button data-bind="attr: {
           id: 'update-cart-item-'+item_id,
           'data-cart-item': item_id,
           title: $t('Update')
           }"
            class="update-cart-item"
            style="display: none">
        <span data-bind="i18n: 'Update'"></span>
    </button>
</div>

Path: vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml

Put this code in last

<script type="text/javascript">
    require(["jquery"],function($){
        $('body').on("click",".more, .less",function(){
            var obj = $(this);
            var currentQty = obj.siblings('.cart-item-qty').val();
            var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

            if(obj.hasClass('more')){
                var newAdd = parseInt(currentQty)+parseInt(1);
                obj.siblings('.cart-item-qty').val(newAdd);
                obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                $('.update-cart-item').show();
            }else{
                if(parseInt(currentQty) > 1)
                {
                    var newAdd = parseInt(currentQty)-parseInt(1);
                    obj.siblings('.cart-item-qty').val(newAdd);
                    obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                    $('.update-cart-item').show();

                }
            }
        });
    });
</script>

Note: Run all necessary CLI commands Ex.

• php bin/magento setup:upgrade
• php bin/magento setup:static-content:deploy -f
• php bin/magento cache:clean