Totals and cart sync with Magento

One of the key principles of the Vue Storefront architecture is afull scalability. We've achieved very good performance results by not relying on the Magento2/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 de-synchronized or the discount rules haven't got applied. It can ruin the business, no matter the performance 😃

Cart and Totals sync

This is the reason that we've got the direct Shopping cart sync with Magento2. Whenever the user add something to the cart we're checking the stock and synchronize the local in-browser cart with CMS.

This is the dynamic requests architecture

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.

This is how the cart sync works

As you can see the synchronization works like a sequence of the network calls to the vue-storefront-api:

  1. The pull method is executed to get the current user's Magento cart
  2. On the client side the logic is checking which elements are new on the client side, server side, removed
  3. In our case one element doesn't exist on server side so we're calling an update method to add it to the server cart
  4. Then we call totals to get the current row values and general totals for the cart.

How to make this feature work?

By default cart and totals sync is disabled. To make it work You just need to follow the steps described bellow:

  1. Please generate the Magento2 API accesses. In our first tutorial there is an explanation on how to do this.

  2. Use the OAuth keys from the previous step to properly configure the vue-storefront-api data layer (it should've been installed locally on your computer / server). To do so you need to modify the conf/local.json and paste the authorization data to the magento2.api section:

"magento2": {
		"url": "",
		"imgUrl": "http://localhost:8080/media/catalog/product",
		"magentoUserName": "",
		"magentoUserPassword": "",
		"httpUserName": "",
		"httpUserPassword": "",
		"api": {
			"url": "",
			"consumerKey": "byv3730rhoulpopcq64don8ukb8lf2gq",
			"consumerSecret": "u9q4fcobv7vfx9td80oupa6uhexc27rb",
			"accessToken": "040xx3qy7s0j28o3q0exrfop579cy20m",
			"accessTokenSecret": "7qunl3p505rubmr7u1ijt7odyialnih9"

Please check the conf/default.json for the reference.

  1. 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 and synchronize_totals flags to true:
   "cart": {
      "synchronize": false,
      "synchronize_totals": false,
      "create_endpoint": "http://localhost:8080/api/cart/create?token={{token}}",
      "updateitem_endpoint": "http://localhost:8080/api/cart/update?token={{token}}&cartId={{cartId}}",
      "deleteitem_endpoint": "http://localhost:8080/api/cart/delete?token={{token}}&cartId={{cartId}}",
      "pull_endpoint": "http://localhost:8080/api/cart/pull?token={{token}}&cartId={{cartId}}",
      "totals_endpoint": "http://localhost:8080/api/cart/totals?token={{token}}&cartId={{cartId}}",
      "paymentmethods_endpoint": "http://localhost:8080/api/cart/payment-methods?token={{token}}&cartId={{cartId}}",
      "shippingmethods_endpoint": "http://localhost:8080/api/cart/shipping-methods?token={{token}}&cartId={{cartId}}",
      "shippinginfo_endpoint": "http://localhost:8080/api/cart/shipping-information?token={{token}}&cartId={{cartId}}",
      "collecttotals_endpoint": "http://localhost:8080/api/cart/collect-totals?token={{token}}&cartId={{cartId}}"

Please check the conf/default.json for a reference.

Prices sync

The last missing block 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.

Order sync

One of the cool features of Vue Storefront is queued order sync. This means 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.

Orders are stored locally before they're send to the server

On the server side the vue-storefront-api is the first line which the Order is crossing on its way back to Magento2. No matter if the shopping cart was synchronized (as described above) or not the order will be converted to Magento2 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:

  1. You must have the Magento2 API access configures in the config/local.json file of vue-storefront-api
  2. 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).
  3. After the configuration step You just run npm run o2m inside your vue-storefront-api directory.

This is the output of o2m after successfull setup