# 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](https://github.com/DivanteLtd/vue-storefront/tree/master/src/modules/magento-2-cms)

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:

```js
{ 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

2. 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")
}
```

