How to reload shopping cart items?

magento.stackexchange https://magento.stackexchange.com/questions/320057

Question

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'
        }
   }
};
Was it helpful?

Solution

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

OTHER TIPS

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);
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top