Static Data support in Vue Storefront

In Vue Storefront, we can use CMS Static Blocks and CMS Static Pages from Magento 2.

Old solution

Until version 1.6, the magento2-cms-extention (we can find it in: src/modules/magento-2-cms/). It's deprecated.

How it works?

To display CMS data, we need a SnowdogApps/magento2-cms-api module installed in the Magento 2 instance. The extension fetches data using the API and displays compiled content on the storefront. You can display blocks and pages by ID or identifiers—it supports different store IDs in a multi-languages store. Find more details here

This solution will be deprecated soon.

New solution

From version 1.6, thanks to @yuriboyko,we have a better solution for static data—it's added to the Elasticsearch database and is using qraphQL query, displayed on the storefront.

How it works?

The data are synchronized with ElasticSearch from Magento 2 on the adapter level in mage2vuestorefront

After synchronized basic Magento 2 data, run node --harmony cli.js blocks and node --harmony cli.js pages. Make sure you have SnowdogApps/magento2-cms-api, it’s required to compile Magento WYSIWYG data and variable into HTML code. Unfortunately, the widgets are not fully supported, so try to avoid them.

Static data are pumped to ElasticSearch db with entityTypes:

  • cms_block for blocks
  • cms_page for pages

Using a new CMS Core Module and two components (for CMS Block and for CMS Page) we easily display on storefront. Check out the example CMS Page Component.

The route for the CMS Page is set in the default theme:

{ name: 'cms-page', path: '/i/:slug', component: CmsPage }])

So your cms page with about_us identifier (in Magento 2 admin URL key) will be found at: <project_base_url>/i/about_us

Provide your own static data for Vue Storefront

You don’t have to use Magento 2 to provide the static data. You can pump the ElasticSearch database with your own data.

  1. Add you data with appropriate types:
  • cms_block for blocks
  • cms_page for pages
  1. Keep data schema:
  • Blocks:
type CmsBlock @doc(description: "CMS block defines all CMS block information") {
    identifier: String @doc(description: "CMS block identifier")
    title: String @doc(description: "CMS block title")
    content: String @doc(description: "CMS block content")
    creation_time: String @doc(description: "Timestamp indicating when the CMS block was created")
    store_id: Int @doc(description: "Store Id of CMS block")
}
  • Pages:
type CmsPages @doc(description: "CMS page defines all CMS page information") {
    page_id: Int @doc(description: "Id of CMS page")
    title: String @doc(description: "CMS page title")
    identifier: String @doc(description: "URL key of CMS page")
    content: String @doc(description: "CMS page content")
    content_heading: String @doc(description: "CMS page content heading")
    meta_description: String @doc(description: "CMS page meta description")
    meta_keywords: String @doc(description: "CMS page meta keywords")
    store_id: Int @doc(description: "Store Id of CMS page")
}