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/).

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 API and lets display compiled content on the storefront. You can display block and pages by id or identifiers, it supports also different store id in multi-languages store. More details you can find here

This solution will be deprecated soon.

New solution

From version 1.6, thanks to @yuriboyko, we have better solution for static data – it's added to ElasticSearch database and using qraphgl 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 new Cms Core Module and two components (for CMS Block and for CMS Page) we easily displayed on storefront. Check out the example CMS Page Component.

The route for the CMS Page is set in 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")
}