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'
        }
   }
};
Improve this question
3

2 Answers 2

Reset to default
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

Improve this answer
13
  • Thanks, that works @Msquare. does it always have to reload the whole page when I update the qty of item in the minicart?
    – Magento_learner
    Commented Aug 18, 2020 at 16:33
  • the checkout cart page local.com/checkout/cart. It reloads the whole page after changing the qty in the minicart.
    – Magento_learner
    Commented Aug 19, 2020 at 17:59
  • try this link magento.stackexchange.com/a/235041/82670
    – Msquare
    Commented Aug 20, 2020 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.
    – Magento_learner
    Commented Sep 4, 2020 at 15:00
  • yes customerData.invalidate(sections); that remove old data and add new data customerData.reload(sections, true); using this
    – Msquare
    Commented Sep 7, 2020 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);
Improve this answer
4
  • Thanks, that works @RiteshSantra. does it always have to reload the whole page when I update the qty of item in the minicart?
    – Magento_learner
    Commented Aug 18, 2020 at 16:33
  • It is not reload the whole page. It is only reload the minicart section.
    – Ritesh Santra
    Commented Aug 18, 2020 at 16:46
  • is there a way to update minicart without having to click "update button"? @RiteshSantra
    – Magento_learner
    Commented Aug 18, 2020 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.
    – Ritesh Santra
    Commented Aug 19, 2020 at 1:52

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.