1

Is there any way to update the mini cart with ajax without update button.

I am using Magento 2.1.7 how to do mini cart ajax update when qty increment(+) and decrement(-) inside the mini cart, as qty increment(+) and decrement(-) inside the mini cart product price and the total must change without clicking on update

Thanks in advance

1
  • Can i get module pls.
    – zus
    Apr 10, 2021 at 13:39

2 Answers 2

5

There are two Methods of updating the minicart

Method 1: Using sections.xml

Create sections.xml file under app/code/Vendor/Module/etc/frontend directory

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="module/ajax/index">
        <section name="cart"/>
    </action>
</config>

Note: Put your ajax call URL in place of 'module/ajax/index'

Method 2: Using customerData dependency in the script tag

<script>
    require([
        'jquery',
        'Magento_Customer/js/customer-data'
    ], function ($, customerData) {

        $.ajax({
        type: "post",
        url: "your_url",
        data: {data : yourData},
        cache: false,
            success: function(response) {

                // reload the minicart
                var sections = ['cart'];
                customerData.reload(sections, true);

            }
        });

    });
</script>
10
  • When do you want to update the minicart? There must be an action, right? You can use that action url in one of the two above methods. Oct 9, 2018 at 9:15
  • Dinesh Yadav as i did as you have shared the procedure only but as qty increment(+) and decrement(-) inside the mini cart product price and total is not changing Oct 18, 2018 at 11:34
  • @trilokkumar There is an update button in minicart. You have to trigger the click on that button if you want to update the quantity on increment and decrement button. Oct 18, 2018 at 12:19
  • How to trigger the update button in mini cart Dinesh Yadav Oct 18, 2018 at 12:28
  • You have to write the jquery on click of your increment/decrement button. In this click function, you can trigger the update minicart button as given below jQuery('.update-cart-item').trigger('click'); Oct 18, 2018 at 12:35
0

Modify sidebar.js file. Find this code:

events['keyup ' + this.options.item.qty] = function (event) {
            self._showItemButton($(event.target));
        };

And change it to:

events['keyup ' + this.options.item.qty] = function (event) {
            self._updateItemQty($(event.currentTarget));
        };

Now it won't show update button and will update minicart automatically without page refreshing

Your Answer

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

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