Vue Storefront integration easy as 1-2-3
Vue Storefront is platform agnostic which means it can be connected to virtually any CMS. Currently we do officially support:
- Magento2 via
- Magento1 via
- Limited: Pimcore via
In this repository You can find materials that will let You integrate any other 3rd party platform or bespoke e-Commerce backend with the Vue Storefront.
Three steps of integration
Layer A Vue Storefront uses Elastic Search as backend for all catalog operations. It stores products, categories, attributes and tax-rules in the ES and fetch data from it using
Layer B The second layer are so called dynamic calls that are used to synchronize shopping carts, promotion rules, user accounts etc.
vue-storefront-api was initially meant to support all kind of requests (and it's supporting them for Magento2 currently) - we found that's much easier to create a dedicated api which provides the same data formats like
vue-storefront-api around Your platform of choice, than adding very customized data adapters in the
That means that creating the Vue Storefront integration basically is divided into 3 main steps:
You exposes the API around Your platform of choice regarding our spec. In fact it's a
vue-storefront-apienpodints specification. Having such an API - Vue Storefront will be able to speak directly with Your platform as a backend Layer B.
You need to use
node-appapplication to import the data from the freshly created API endpoints to the Elastic Search Layer A.
Then You just need to point
vue-storefrontapplication to newly created endpoints.
Step 1: How to expose the API around Your platform
You may take a look how we did it for the Magento1. It was a bunch of additional Magento1 api methods we created to fullfill the API specification. You can create a separate nodejs/php/rails/whatever app if Your platform doesn't exposes the required API and just fullfill the spec.
Step 2: How to use node-app
Then, having the API in place You're to fo the Layer A integration. Which means - to fill the ElasticSearch with products, categories, attributes and taxrules data.
You can use our boilerplate node-app which is compilant with the data formats specified above. This is a consumer application that's responsible for synchronizing the Magento1 data with the ElasticSearch instance.
This tool required ElasticSearch instance up and running. The simplest way to have one is to install vue-storefront and vue-storefront-api and run
docker-compose up inside
vue-storefront-api installation as the project contains Docker file for Vue Storefront.
Then you need to modify the configs:
cd node-app/src cp config.example.json config.json nano config.json
In the config file please setup the following variables:
authsection to setup user login and password - these values will be used to generate the JWT token used to authorize the requests against Your API
- 'endpoints' should match the public URLs of Your API corresponding methos (for auth, products, categories, taxrule and attributes)
elasticsearch.indexName- should be set to Your ElasticSearch index which then will be connected to the Vue Storefront. It can be fresh / non-existient index as well (will be created then). For example You may have:
The bridge works on temporary, versioned ES indexes. You decide when the index should be published (when all data objects are properly set).
Create new version of index (for example: vue_storefront_mangento1_1):
node index.js new
node index.js attributes node index.js taxrules node index.js categories node index.js products
Publish new version of index (creates an alias with prod. name of the index: vue_storefront_magento1_1 -> vue_storefront_magento1):
node index.js publish
Congratulations! After this step You should have got the ES index synchronized with Your custom platform!
Step 3: How to configure vue-storefront
All You need to do is to set the proper API endpoints in the
config/local.json. Here You have the details.
Please note that You still need to use the
vue-storefront-api for accessing the ElasticSearch / do the server side tax callculation etc.
This is MIT project so it's ... just AS IS :) However, if You're planing to add the new platform to the Vue Storefront ecosystem and publish it freely as an open source - we'll do our best to support You!