0

I added a module to automatically update shopping cart by Ajax which works fine. Basically, when I change the item qty in the shopping cart, it will automatically update the shopping cart subtotal and cart summary.

But when I update the item qty on minicart, it only reload/update the cart summary but not the shopping cart items qty and subtotal. How can I fix this?

Ajax Update

Created a new module:

app/code/Learning/AutoUpdateCart/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
     \Magento\Framework\Component\ComponentRegistrar::MODULE,
     'Learning_AutoUpdateCart',
     __DIR__
);

app/code/Learning/AutoUpdateCart/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Learning_AutoUpdateCart" setup_version="1.0.0" />
</config>

app/code/Learning/AutoUpdateCart/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>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="cart.auto.update.qty"  template="Learning_AutoUpdateCart::js.phtml" after="-"/>


    </referenceContainer>
</body>

app/code/Learning/AutoUpdateCart/view/frontend/templates/js.phtml

<script>
require ([
        'jquery'
    ],
    function ($) {
        $(window).on("load", function () {
            require([
                'Learning_AutoUpdateCart/js/cartQtyUpdate'
            ]);
        });
    });

app/code/Learning/AutoUpdateCart/view/frontend/web/js/cartQtyUpdate.js

define([
'jquery',
'Magento_Checkout/js/action/get-totals',
'Magento_Customer/js/customer-data'
], function ($, getTotalsAction, customerData) {

$(document).ready(function(){
    $(document).on('change', 'input[name$="[qty]"]', function(){
        var form = $('form#form-validate');
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            showLoader: true,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                var sections = ['cart'];

                $("#form-validate").replaceWith(result);

                /* Minicart reloading */
                customerData.reload(sections, true);

                /* Totals summary reloading */
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });
    });
});
});

app/code/Learning/AutoUpdateCart/view/frontend/web/requirejs-config.js

var config = {
   map: {
       '*': {
           ajaxQty: 'Learning_AutoUpdateCart/js/cartQtyUpdate'
        }
   }
};
3
0

Try this code

app/code/Learning/AutoUpdateCart/view/frontend/web/js/cartQtyUpdate.js

define([
'jquery',
'Magento_Checkout/js/action/get-totals',
'Magento_Customer/js/customer-data'
], function ($, getTotalsAction, customerData) {

$(document).ready(function(){
    $(document).on('change', 'input[name$="[qty]"]', function(){
        var form = $('form#form-validate');
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            showLoader: true,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");


                $("#form-validate").replaceWith(result);

                /* Minicart reloading */
                var sections = ['cart'];
                customerData.invalidate(sections);
                customerData.reload(sections, true);

                /* Totals summary reloading */
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });
    });
});
});

I Hope This Helps You

13
  • Thanks, that works @Msquare. does it always have to reload the whole page when I update the qty of item in the minicart? Aug 18 '20 at 16:33
  • the checkout cart page local.com/checkout/cart. It reloads the whole page after changing the qty in the minicart. Aug 19 '20 at 17:59
  • try this link magento.stackexchange.com/a/235041/82670
    – Msquare
    Aug 20 '20 at 11:02
  • does "customerData.invalidate" checks for the stock status? and if it does, is there any way to display a message like "the qty you asked is not available" when a user change/increases the items's quantity to something higher than the stock available. Sep 4 '20 at 15:00
  • yes customerData.invalidate(sections); that remove old data and add new data customerData.reload(sections, true); using this
    – Msquare
    Sep 7 '20 at 9:37
0

Just change the code as below in file

app/code/Learning/AutoUpdateCart/view/frontend/web/js/cartQtyUpdate.js

From:

var sections = ['cart'];

$("#form-validate").replaceWith(result);

/* Minicart reloading */
customerData.reload(sections, true);

To:

$("#form-validate").replaceWith(result);

/* Minicart reloading */
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
4
  • Thanks, that works @RiteshSantra. does it always have to reload the whole page when I update the qty of item in the minicart? Aug 18 '20 at 16:33
  • It is not reload the whole page. It is only reload the minicart section. Aug 18 '20 at 16:46
  • is there a way to update minicart without having to click "update button"? @RiteshSantra Aug 18 '20 at 19:29
  • You can remove the update button and reload the minicart after keyup for every change in qty field or can use dropdown in qty field. Aug 19 '20 at 1:52

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.