@vue-storefront/extension-magento2-cms

1.5.0 • Public • Published

CMS Magento 2 data extension

To display Cms data:

  • install snowdog/module-cms-api composer module in your Magento 2 instance, snowdog/module-cms-api on github
  • make sure that in vue-storefront-api repo the cms-data extension is installed

Cms Block

To display Cms Block import CmsData component and use it in template:

import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'

we have to options to get Cms Block data:

  1. by Magento identifier: <cms-data :identifier="'contact-us-info'" :type="'Block'" /> where contact-us-info is a Cms Block identifier from Magento 2 instance

this option handles different Store Views - if multistore is enabled, it takes Cms Block by current Store View, if it's disabled, it set default Store View (0)

  1. by Magento id <cms-data :id="5" :type="'Block'" /> where 5 is a Magento id of Cms Block. It doesn't handle differents Store Views so please use it only when multistore it's enabled/

Cms Page

To display Cms Page:

  1. Cms page content like a block
  • in custom theme create new page with custom route
  • import CmsData component and use it in template: import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'

call Cms Page like a Block using either Magento identifier: <cms-data :identifier="'about-us'" :type="'Page'" />

or Magento id <cms-data :id="5" :type="'Page'" /> where 5 is a cms page identifier from Magento 2 instance

Like Cms Block, the Cms Page by identifier handles different Store Views, Cms Page by id handles only Default Store View/

  1. Cms page content as a page component:
  • in custom theme themes/<theme-name>/router/index.js import CmsData component, add custom route and define props: {identifier: :pageIdentifier, type: 'Page', sync: true}, example:
import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'

const routes = [
  // ... theme routes
  { name: 'cms-page-sync', path: '/cms-page-sync', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} }
]

Complete examples of usage and implementation you can find in Default theme:

  1. /cms-page-sync, src/themes/default/router/index.js
  2. /custom-cms-page, src/themes/default/router/index.js, src/themes/default/pages/CustomCmsPage.vue

Readme

Keywords

none

Package Sidebar

Install

npm i @vue-storefront/extension-magento2-cms

Weekly Downloads

3

Version

1.5.0

License

MIT

Unpacked Size

6.58 kB

Total Files

8

Last publish

Collaborators

  • mtokarskivsf
  • dzalewski
  • rickrohrig
  • macryb
  • skirianov
  • wojciechsikora
  • filrak
  • fifciuu
  • lukasborawski