Magento 2: How to update mini cart after add product to cart from API?

Question

I'm working on a task that need an API endpoint for adding product to cart in Magento 2.

My code do the job "add product to cart" properly (it add product to cart and when I go to .../checkout/cart I can see it.

$params = array('product' => $cardId, 'qty' => 1);

$product = $this->productRepository->getById($cardId);
$this->cart->addProduct($product, $params);
$this->cart->save();

But I need to update the mini cart also. I searched google and this is the best solution that I found:

Create file etc/frontend/sections.xml:

<?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="rest/V1/badgemakerapi/addToCart">
        <section name="cart"/>
    </action>
</config>

In the tutorial, the part

name="rest/V1/badgemakerapi/addToCart"

is actually

name="frontname/controller/action"

but because I don't have controller, I have to change it to API route

I noticed that in Checkout module, magento 2 core team does the same thing:

    <action name="rest/*/V1/carts/*/payment-information">
        <section name="cart"/>
        <section name="checkout-data"/>
        <section name="last-ordered-items"/>
    </action>
    <action name="rest/*/V1/guest-carts/*/payment-information">
        <section name="cart"/>
        <section name="checkout-data"/>
    </action>
    <action name="rest/*/V1/guest-carts/*/selected-payment-method">
        <section name="cart"/>
        <section name="checkout-data"/>
    </action>
    <action name="rest/*/V1/carts/*/selected-payment-method">
        <section name="cart"/>
        <section name="checkout-data"/>
    </action>

The problem is I can not update mini cart using this method.

Anyone has any idea?

Thank you very much.

Answer 1

I am now running into this same issue. It appears to be related to the way the cart is cached in the browser's "local storage". I don't actually have a solution yet, unfortunately, but clearing the local storage in Chome refreshed my minicart.

There are some open bugs in Magento's GitHub:

• https://github.com/magento/magento2/issues/3625
• https://github.com/magento/magento2/issues/2339

It looks like a long standing bug. Hopefully they will fix it soon.

Here are some related SE questions I'm working from right now:

• How to trigger a minicart update after adding to cart
• Magento 2: Syncing Backend and Frontend State/Cache

My (current) solution is to request that the minicart component refresh by default on page load. This way if the user updates the cart via an API request somewhere else, when they reload the Magento site the cart refreshes.

Specifically, I override the minicart.js file and modified it to force the customerData to refresh in the initialize method every page load:

initialize: function () {
    var self = this,
        cartData = customerData.get('cart');
    ....
    // always clear minicart local storage cache, since we might be updating it via API call
    customerData.reload(['cart'], false);
    // if (cartData().website_id !== window.checkout.websiteId) {
    //     customerData.reload(['cart'], false);
    // }
    return this._super();
},