How to connect 3rd party platform to Vue Storefront?

Piotr Karwatka

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore, Prestashop or Shopware) through the API.

Sign up for a demo at https://vuestorefront.io/ (Vue Storefront integrated with Magento2).

Vue Storefront is and always will be in the open source. Anyone can use and support the project, we want it to be a tool for the improvement of the shopping experience. The project is still in the proof of concept phase. We are looking for Contributors and Designer willing to help us in the solution development.

Which platforms are supported?

We created the product to be platform-agnostic which means one can connect it to virtually any eCommerce CMS. We’ve created backends for Magento2 and Pimcore — however it’s still lot to do as we’ve already get lot of questions regarding Sylius, Prestashop and other platforms that need to have Progressive Web App experience for their end users!

So how to start and connect Prestashop and other platforms which are not officially supported?

Well, you need to create an bridge to convert the data to Vue Storefront format. We’re using Elastic Search data store as a backend — so the process of converting entities is pretty straightforward, as you don’t need to play with all relational stuff etc.

This is the architecture diagram for Vue Storefront

Writing your own platformX2vuestorefront connector

Good starting point for integration developers would be to take a look at our Pimcore 2 Vue Storefront bridge.

Architecture of this tool is very flexible, based on JSON templates for entities and attributes, using dynamic Strategy and Decorator design patterns.

If you wan’t to map custom attributes or sub-objects you need just to:

  1. Add custom mapper as copy of importers/product.js or importers/category.js. For example, you can create a speciall class under ./importers/my-product-importer.js:
const _ = require('lodash');
const attribute = require('../lib/attribute')

module.exports = class {
constructor(config, api, db) {
this.config = config
this.db = db
this.api = api
this.single = this.single.bind(this)
}

/**
* This is an EXAMPLE of custom Product / entity mapper; you can write your own to map the Pimcore entities to vue-storefront data format (see: templates/product.json for reference)
* @returns Promise
*/
single(pimcoreObjectData, convertedObject, childObjects, level = 1, parent_id = null) {
return new Promise((resolve, reject) => {
console.debug('Helo from custom product converter for', convertedObject.id)
convertedObject.url_key = pimcoreObjectData.key // pimcoreObjectData.path?
convertedObject.type_id = (childObjects.length > 0) ? 'configurable' : 'simple'

let elements = pimcoreObjectData.elements
let features = elements.find((elem) => elem.name === 'features')
let categories = elements.find((elem) => elem.name === 'categories')
let images = elements.find((elem) => elem.name === 'images')
let materialComposition = elements.find((elem) => elem.name === 'materialComposition')
let color = elements.find((elem) => elem.name === 'color')
let gender = elements.find((elem) => elem.name === 'gender')
let size = elements.find((elem) => elem.name === 'size')

let localizedFields = elements.find((itm)=> { return itm.name === 'localizedfields'})

let subPromises = []
Promise.all(subPromises).then(results => {
resolve({ src: pimcoreObjectData, dst: convertedObject }) // after all the mapping processes have been executed - we can just give back the controll to master process
}).catch((reason) => { console.error(reason) })
})
}
}
  1. Modify the index.js base methods to use this new strategy. For example:

CHANGE:

importListOf('product', new BasicImporter('product', new ProductImpoter(config, api, client), config, api, client), config, api, offset = cli.options.offset, count = cli.options.limit, recursive = false).then((result) =>

TO:

const MyProductImporter = require('./importers/my-product-importer.js')
importListOf('product', new BasicImporter('product', new MyProductImpoter(config, api, client), config, api, client), config, api, offset = cli.options.offset, count = cli.options.limit, recursive = false).then((result) =>

Templates

Another way to extend or customize this bridge is to change the entities and attributes templates as you can find under ./src/importers/templates. Templates base on Vue-storefront expected data formats and can be customized just by editing the files.

Each custom Pimcore element is mapped to attribute regarding it's name (for example attribute_code_color) or type (eg. attribute_type_select.json). Color and size are kind of special attributes because Vue Storefront configurable products by default use for products customization. This is the reason we've prepared templates for these particular attributes. Other ones are created just by adjusting the specific element type.

Reference materials

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade