1

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!

  • what steps you will be following? add to cart from API, review the cart item from the desktop web app, then remove the item from API, again reviewing the cart from a desktop web app? why I asking because API is mostly used for communicating with third party app. – Nits Oct 23 at 4:54
  • do they still have access to layout and requirejs. can you post the files where the cart API call is made to give us an idea where we are when this call is performed? don't need all the details, just the file name and where is sits in the system I guess should be sufficient – Herve Tribouilloy Oct 24 at 19:18
  • Appreciate the assistance guys! @Nits I updated the question with a workflow of how they are interacting with our store. – ne0nlight Oct 26 at 16:54
  • @HerveTribouilloy I updated the post with their workflow, I don't believe they have direct access to the files (of course I could make edits for them if that is whats required) but their initial access is just the default API endpoints – ne0nlight Oct 26 at 16:55
  • They don't happen to use the same subdomain ? In that case there are ways to manipulate the local storage directly. – Kristoffer Oct 29 at 12:49
3
+100

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.

| improve this answer | |
  • I actually run the Magento 2 side of this whole interaction, though I don't know all sides of it just yet which is why I came here. If there are magento 2 files that I would need to edit to include such a function, I can do that. My question would just be what files to allow for such a thing? – ne0nlight Oct 26 at 20:05
  • Are you able to create a module ? have you any ssh access or only ftp ? can you run some command line ? – Sony Oct 27 at 16:58
  • I am indeed able of loading a module (via ftp or any means) along with running the ssh commands. I essentially have full control of all the Magento side – ne0nlight Oct 27 at 19:22
  • @ne0nlight I have edited the answer , and gave you the code that you would need. – Sony Oct 28 at 15:28
  • Thanks! I will get to trying this now. As I understand, it really pays no attention to the REST API work at all, it essentially jus just checking the cart every 3 seconds, and if the actual cart ends up being empty (and the mini cart continues to have products) it will continue checking and once the 3 second check sees the actual cart is empty, it will clear the mini cart as well. Is that correct? Thanks! – ne0nlight Oct 28 at 16:19
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.

| improve this answer | |
  • I believe this should be possible, I run the magento side so any file editing or including new modules, etc that would need to be done magento side, I can implement, and then just inform them what to call during their API interactions. Would that work? – ne0nlight Oct 26 at 20:06
  • I am still unsure whether your partner can perform some javascript on their system and within this javascript, it would need to perform a cross domain query to magento – Herve Tribouilloy Oct 28 at 6:52
  • They are not able to do javascript through the API. When using a REST API, they can only send the request to the API endpoint and then the Magento code takes all of the information from the request and handles it from there. That is where the module Sony has suggested may have to be the play – ne0nlight Oct 28 at 16:16
  • agreed, Sony has done already a great job and seems to be on the right track, please follow his lead, many thanks for your update – Herve Tribouilloy Oct 28 at 16:40

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.