4

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

specimen cart page

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

can someone help to achieve this solution?

3
  • what version of magento? 2?
    – Barry
    Dec 30, 2019 at 13:56
  • 1
    its magento 2.3.3 @Barry Dec 30, 2019 at 13:59
  • Can you try my code Dec 31, 2019 at 4:38

1 Answer 1

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>

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
10
  • Thank you for your answer. Dec 31, 2019 at 5:45
  • @RamalakshmiT if my answer solved your concern then please mark as accepted by clicking on ✓ icon next to my answer Dec 31, 2019 at 5:53
  • Its working fine.but i am also need some changes. Dec 31, 2019 at 6:44
  • @RamalakshmiT Okay, First please mark as accepted by clicking on ✓ the icon next to my answer and please ask a new question regarding the new changes! Dec 31, 2019 at 6:48
  • @ Vithal Bariya Every time when I increase the quantity or decrease and when i press enter only the price gets updated and page also gets reloaded. Dec 31, 2019 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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