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

3

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>
  • 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. – Dinesh Yadav Oct 9 '18 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 – trilok kumar Oct 18 '18 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. – Dinesh Yadav Oct 18 '18 at 12:19
  • How to trigger the update button in mini cart Dinesh Yadav – trilok kumar Oct 18 '18 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'); – Dinesh Yadav Oct 18 '18 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, privacy policy and cookie policy

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