storefront-renderer

Render E-Com Plus store templates with Vue.js 2.

Storefront themes documentation

Renderer API reference

Browser

Recommended

Include minified bundle via CDN:

<script src="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-renderer@1/dist/storefront.min.js"></script>

By default, it declares Vue, Ecom, EcomIo and EcomInit objects globally (on browser window).

Standalone

You can include the render standalone, it requires global EcomIo object from storefront JS SDK and Vue:

<script src="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-renderer@1/dist/render.min.js"></script>

With bundlers

If using webpack or browserify (or relateds), you can also install the npm package:

npm install --save @ecomplus/storefront-renderer

And import the bundle file:

import '@ecomplus/storefront-renderer/dist/storefront.min.js'

You may also declare imported objects instead of using globals:

import { Vue, Ecom, EcomIo, EcomInit } from '@ecomplus/storefront-renderer/dist/storefront.min.js'

Server side rendering

The package is also compatible with NodeJS backend, handling SSR with jsdom and Vue SSR.

Even rendered pages must include the render to run on browser, HTML will be updated (hydrate) client-side to keep critical data always up to date.

Command line

npm i -g @ecomplus/storefront-renderer
storefront-renderer https://mystore.com/product > product.html

Node

require('@ecomplus/storefront-renderer')(html).then(({ dom, Ecom }) => {
  Ecom.init().then(() => {
    // jsdom object
    console.log(dom.serialize())
  })
})

Developing

Setup the package with GitHub and NPM:

git clone https://github.com/ecomclub/storefront-renderer
cd storefront-renderer
npm i

Watch tests server:

npm run serve

Update JSDoc files on docs folder:

npm run doc

Compile to production:

npm run build