M2.2: Using REST API, Can Clear Cart but Mini-Cart Not Clearing

Question

We are currently integrating another checkout portal to go on top of our existing Magento 2 platform. They are using the REST API to do most of their calls to Magento 2, including that of clearing the cart. When clearing the cart on the portal, it will clear it fully, and when coming back to the Magento 2 side, the cart will be empty, however the Mini-Cart will still be populated with all the items that we're previously there before being cleared.

They are using the specific endpoint:

DELETE method : rest/V1/carts/mine/items/#ITEM_ID#

However they have not found any other means of clearing the cart, and using the above results in the mentioned issue of the mini cart still being populated.

I have done a little research and found that it appears the mini-cart information stays due to being stored in local storage. It is mentioned to try using;

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$cartObject = $objectManager->create('Magento\Checkout\Model\Cart')->truncate();
$cartObject->saveQuote();

or

$cart->truncate()->save();
Where $cart is an instance of \Magento\Checkout\Model\Cart.

However I wouldn't know where to make those above changes, nor aware if that will achieve the result of having both carts emptied when they use the DELETE method endpoint. Is there a different method I should have them use to clear both the cart and mini-cart while just having access to the REST API endpoints? Or something I can change on my end that will clear it for them when the endpoint is called, like hooking into the above API method and truncate the mini-cart from the Magento 2 code?

---

UPDATE - 10/26

The full process goes as follows:

From our Magento 2 webstore, the customer adds products to the cart and when they click the 'Proceed to checkout' button, it will redirect to the new portal (leaving magento 2 to their platform).

On the new portal, they use the API below to get the cart:

API endpoint: /rest/V1/carts/mine

Parameters to pass: [{"key":"Authorization","value":"Bearer vm3pful29u7ywxfdsfsadsa1414"}]

Here, the value should be the token returned by the customer login API.

API Response: Returns all the info from the M2 cart.

They only add products to the cart if they exist in their portal as well. If there are any products that do not exist in their portal, they show a message noting it on the portal and provide a link to go back to the Magento 2 site.

Assuming they have products in the portal and get the cart item there, once they place a successful order from the new portal, the portal calls the below API to delete the cart items of the Magento 2:

DELETE : rest/V1/carts/mine/items/#ITEM_ID#

Here the method is DELETE and they have to pass the item IDs to delete the cart from Magento 2.

---

They go on to mention:

"If you are asking regarding the API code files in Magento 2, we would need to research that. We don't have code access of Magento 2, but these are Magento 2 default inbuilt APIs and we are using that."

So knowing the above, is it possible with the default inbuilt APIs to do what we are asking? (Not just deleting from the cart but the mini-cart as well) or is there more we will need to get into to achieve that?

---

UPDATE - 10/29

Below are the exact file locations/complete contents within the created Custom_MinicartRefresh (in reference to @Sony 's answer) -- does anything look amiss that I am just not seeing for this to not be working?

/app/code/Custom/MinicartRefresh/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Custom_MinicartRefresh', __DIR__);

/app/code/Custom/MinicartRefresh/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="Custom_MinicartRefresh" setup_version="1.0.0"/>
</config>

/app/code/Custom/MinicartRefresh/view/frontend/web/requirejs-config.js

var config = {
    deps: ['Custom_MinicartRefresh/js/minicart-refresh'],
};

/app/code/Custom/MinicartRefresh/view/frontend/web/js/minicart-refresh.js

define([
        "jquery",
        'Magento_Customer/js/customer-data',
        'domReady!'
    ], function ($, customerData) {
        "use strict";
        var sections = ['cart'];
        console.log('cart checked');
            setInterval(function () {
                    customerData.invalidate(sections);
                    customerData.reload(sections, true);
            }, 3000);
    }
)

That is all, and I have done the steps of Development mode within Cloudflare, and;

• setup:upgrade
• setup:di:compile
• setup:static-content:deploy -f
• indexer:reindex
• cache:flush

All to no avail, is there something obvious I am just missing? Thanks!

Answer 1

If you want to clear the mini cart you need to invalidate the section and then to reload it.

To achieve that, usually we go through the JS, and it looks something like that :

define(['jquery','Magento_Customer/js/customer-data'], function ($, customerData) {
        "use strict";
        var sections = ['cart'];
        customerData.invalidate(sections);
        customerData.reload(sections, true);
        }
);

The thing is that the mini-cart is in the browser local storage, and you need to refresh it.

But since you don't have any access to the Magento 2 code... it seems quite hard to achieve what you what.

EDIT :

If you are able to load a new Magento module here is the code

Let's say that your module is called MinicartRefresh and your vendor name is MyNamespace

app/code/MyNamespace/MinicartRefresh/etc

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MyNamespace_MinicartRefresh" setup_version="1.0.0"/>
</config>

app/code/MyNamespace/MinicartRefresh/view/frontend/web/js/minicart-refresh.js

define([
        "jquery",
        'Magento_Customer/js/customer-data',
        'domReady!'
    ], function ($, customerData) {
        "use strict";
        var sections = ['cart'];
            setInterval(function () {
                    customerData.invalidate(sections);
                    customerData.reload(sections, true);
            }, 3000);
    }
)

The minicart should be refreshed every 3s , feel free to change the time.

app/code/MyNamespace/MinicartRefresh/view/frontend/web/requirejs-config.js

var config = {
    deps: ['MyNamespace_MinicartRefresh/js/minicart-refresh'],
};

app/code/MyNamespace/MinicartRefresh/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'MyNamespace_MinicartRefresh', __DIR__);

After upload the module , run php bin/magento s:up , php bin/magento s:d:c and clear cache and all the stuff you need.

Hope it helps.

Answer 2

@sony's answer was what I had in mind for you.

It seems it needs to be something else than API. The closest I have for you is for this external system to perform an ajax call to your magento site. This call would trigger the javascript Sony points out and this would clear the localstorage for you.

So, once the ajax cart call is successful, you would reload your page. If this is doable (MEANING: can your external system's partner confirm it is possible to trigger some javascript rather than API call??), I (and many of us, race on!) can come up with the module with ajax code.