Totals and cart sync with Magento
One of the fundamental principles of the Vue Storefront architecture is full scalability. We’ve achieved excellent performance results by not relying on the Magento 2/CMS API performance. By implementing the “Divide and conquer” rule we created the middleware and external data store for the catalog using ElasticSearch.
That was our first goal, but the second was to provide the full data safety and reliability to the business — so we never encounter situations like the stocks and prices are desynchronized, or the discount rules haven’t get applied. It can ruin the business, no matter the performance :)
Cart and Totals sync
That’s why we’ve got the direct Shopping cart sync with Magento 2 to work. Whenever the user adds something to the cart, we’re checking the stock and synchronize the local in-browser cart with CMS.
In the backward direction, we’re always getting the current Totals — after applied Magento shopping cart rules and discounts to display the proper data to the user. This synchronization is implemented to still keep the Vue Storefront platform agnostic—
vue-storefront-api layer is in charge of translating the platform-specific API formats to the Vue Storefront general data abstraction.
As you can see the synchronization works like a sequence of the network calls to the
pullmethod is executed to get the current user's Magento cart
- On the client-side: the synchronization algorithm is checking which cart items: are new on the client-side, server-side, removed
- In our case — one element didn’t exist server-side, so we’re calling an
updatemethod to add it to the server cart
- Then, we call
totalsto get the current row values and general totals for the cart.
How to make this feature work?
By default cart and totals sync is disbaled. To make it work you just need to go thru the following steps:
- Please do generate the Magento 2 API accesses. In our first tutorial there is an explanation on how to do this.
- Use the oauth keys from the previous step to properly configure the
vue-storefront-apidata layer (it should've been installed locally on your computer / server). To do so you need to modify the
conf/local.jsonand paste the authorization data to the
Please check the
conf/default.json for the reference.
Then move to your
vue-storefront installation catalog and modify the
config/local.json. You need to change the
cart section to switch the
synchronize_totals flags to true:
Please check the
conf/default.json for a reference.
The last missing part is the catalog prices sync. This can be very easily enabled using the feature called Dynamic Prices. Please check Dynamic Prices howto to switch this feature on.
One of the cool features of Vue Storefront is queued order sync. By “queued” I mean: whenever user makes and order in the application we store the order in the local browser cache (indexedDb instance) and send it to the server as fast as the Internet connection is available.
On the server-side the vue-storefront-api is the first line in which the Order is crossing on its way back to Magento 2. No matter the shopping cart was synchronized (as described above) or not the order will be converted to Magento 2 object.
The server API stores the order in the queue where it’s processed by the
order_2_magento worker process. We do support multiple types of orders: for guest users and logged in, with already synchronized carts or not etc.
This process doesn’t require much additional configuration:
- You must have the Magento 2 API access configures in the config/local.json file of vue-storefront-api
- You must have the “Orders” section marked On within the “Permissions” section of Magento Integration (see the previous tutorial for the reference on how to set it up).
- After the configuration step, You just run
npm run o2minside your