Feature/1426

config/default.json

@@ -26,7 +26,7 @@
           "index": "vue_storefront_catalog_de"
         },
         "tax": {
-          "sourcePriceIncludesTax": false,          
+          "sourcePriceIncludesTax": false,
           "defaultCountry": "DE",
           "defaultRegion": "",
           "calculateServerSide": true
@@ -53,7 +53,7 @@
           "index": "vue_storefront_catalog_it"
         },
         "tax": {
-          "sourcePriceIncludesTax": false,          
+          "sourcePriceIncludesTax": false,
           "defaultCountry": "IT",
           "defaultRegion": "",
           "calculateServerSide": true
@@ -156,9 +156,9 @@
         "attributes": "INDEXEDDB",
         "products": "INDEXEDDB",
         "elasticCache": "INDEXEDDB",
-        "claims": "LOCALSTORAGE",        
-        "compare": "INDEXEDDB",        
-        "syncTasks": "INDEXEDDB",        
+        "claims": "LOCALSTORAGE",
+        "compare": "INDEXEDDB",
+        "syncTasks": "INDEXEDDB",
         "newsletterPreferences": "INDEXEDDB",
         "ordersHistory": "INDEXEDDB",
         "checkoutFieldValues": "LOCALSTORAGE"
@@ -217,6 +217,7 @@
       "api_key": "my_example_api_key"
     },
     "cms": {
-      "endpoint": "http://localhost:8080/api/ext/cms-data/cms{{type}}/{{cmsId}}"
+      "endpoint": "http://localhost:8080/api/ext/cms-data/cms{{type}}/{{cmsId}}",
+      "endpointIdentifier": "http://localhost:8080/api/ext/cms-data/cms{{type}}Identifier/{{cmsIdentifier}}/storeId/{{storeId}}"
     }
 }

core/api/user/signIn.js

@@ -1,6 +1,6 @@
 export const signIn = {
   methods: {
-    signIn(username, password, onSuccess, onError) {
+    signIn (username, password, onSuccess, onError) {
       this.$store.dispatch('user/login', { username: this.username, password: this.password })
         .then((result) => {
           result.code !== 200 ? this.onError() : this.onSuccess()
@@ -11,4 +11,4 @@ export const signIn = {
         })
     }
   }
-}
+}

core/api/user/signOut.js

@@ -1,3 +1,3 @@
 export const signOut = {
   signOut () {}
-}
+}

core/scripts/installer.js

@@ -373,6 +373,7 @@ class Storefront extends Abstract {
         config.mailchimp.endpoint = `${backendPath}/api/ext/mailchimp-subscribe/subscribe`
         config.images.baseUrl = this.answers.images_endpoint
         config.cms.endpoint = `${backendPath}/api/ext/cms-data/cms{{type}}/{{cmsId}}`
+        config.cms.endpointIdentifier = `${backendPath}/api/ext/cms-data/cms{{type}}Identifier/{{cmsIdentifier}}/storeId/{{storeId}}`
 
         config.install = {
           is_local_backend: Abstract.wasLocalBackendInstalled,

src/extensions/cms/README.md

@@ -1,6 +1,6 @@
 # CMS Magento 2 data extension
 
-To display cms data:
+To display Cms data:
  - install `snowdog/module-cms-api` composer module in your Magento 2 instance, [snowdog/module-cms-api on github](https://github.com/SnowdogApps/magento2-cms-api)
  - make sure that in `vue-storefront-api` repo the `cms-data` extension is installed
 
@@ -9,29 +9,45 @@ To display Cms Block import CmsData component and use it in template:
 
 `import CmsData from 'src/extensions/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`)
+
+2. by Magento id
 `<cms-data :id="5" :type="'Block'" />`
-where `5` is a cms block identifier from Magento 2 instance
+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:
+* in custom theme create new page with custom route
+* import CmsData component and use it in template:
 `import CmsData from 'src/extensions/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/
+
 2. 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: `{id: :pageId, type: 'Page'}`, example:
+- 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 'src/extensions/cms/components/CmsData'
 
 const routes = [
   // ... theme routes
-  { name: 'custom-cms-page', path: '/custom-cms-page', component: CmsData, props: {id: 4, type: 'Page'} }
+  { name: 'cms-page-sync', path: '/cms-page-sync', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} }
 ]
 ```
-- create custom page and call the `CmsData` component there:
-`<cms-data />`
+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`

src/extensions/cms/components/CmsData.vue

@@ -1,32 +1,81 @@
 <template>
-  <div class="cms-content" v-if="data" v-html="data.content" />
+  <div
+    :class="['cms-content', { 'container': sync }]"
+    v-if="data"
+    v-html="data.content"
+  />
 </template>
 
 <script>
+import config from 'config'
+import { currentStoreView } from '@vue-storefront/store/lib/multistore'
+
 export default {
   name: 'CmsData',
   props: {
     id: {
       type: Number,
-      required: true
+      default: null,
+      required: false
+    },
+    identifier: {
+      type: String,
+      default: null,
+      required: false
     },
     type: {
       type: String,
       required: true
+    },
+    sync: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   created () {
     this.$store.dispatch(
       'cms/loadCms',
       {
-        id: this.id,
+        url: this.getEndpointPath(),
         type: this.type
       }
     )
   },
   computed: {
     data () {
-      return this.$store.getters[`cms/get${this.type}`](this.id)
+      if (this.id) {
+        return this.$store.getters[`cms/get${this.type}`](this.id)
+      } else {
+        return this.$store.getters[`cms/get${this.type}Identifier`](this.identifier)
+      }
+    },
+    currentStore () {
+      return currentStoreView()
+    },
+    storeView () {
+      return (this.isMultistoreEnable && this.currentStore) ? this.currentStore.storeId : 0
+    }
+  },
+  data () {
+    return {
+      isMultistoreEnable: config.storeViews.multistore
+    }
+  },
+  methods: {
+    getEndpointPath () {
+      let url
+      if (this.id) {
+        url = (config.cms.endpoint)
+          .replace('{{type}}', this.type)
+          .replace('{{cmsId}}', this.id)
+      } else if (this.identifier) {
+        url = (config.cms.endpointIdentifier)
+          .replace('{{type}}', this.type)
+          .replace('{{cmsIdentifier}}', this.identifier)
+          .replace('{{storeId}}', this.storeView)
+      }
+      return url
     }
   }
 }

src/extensions/cms/store.js

@@ -1,4 +1,3 @@
-import config from 'config'
 import fetch from 'isomorphic-fetch'
 
 const state = {
@@ -10,18 +9,20 @@ const getters = {
   getBlock: (state) => (id) => {
     return state.cmsBlocks.find(item => item.id === id)
   },
+  getBlockIdentifier: (state) => (identifier) => {
+    return state.cmsBlocks.find(item => item.identifier === identifier)
+  },
   getPage: (state) => (id) => {
     return state.cmsPages.find(item => item.id === id)
+  },
+  getPageIdentifier: (state) => (identifier) => {
+    return state.cmsPages.find(item => item.identifier === identifier)
   }
 }
 
 // actions
 const actions = {
-  loadCms (context, {id, type}) {
-    let url = (config.cms.endpoint)
-      .replace('{{type}}', type)
-      .replace('{{cmsId}}', id)
-
+  loadCms (context, {url, type}) {
     fetch(url, {
       method: 'GET',
       headers: { 'Content-Type': 'application/json' },
@@ -33,7 +34,8 @@ const actions = {
           context.commit(`setCms${type}`, data.result)
         }
       })
-      .catch(function () {
+      .catch(function (err) {
+        console.log(err)
         console.error('You need to install a custom Magento module from Snow.dog to make the CMS magick happen. Please go to https://github.com/SnowdogApps/magento2-cms-api and follow the instructions')
       })
   }

src/themes/default/components/core/blocks/Footer/Footer.vue

@@ -100,6 +100,12 @@
                   {{ $t('Custom Cms Page') }}
                 </router-link>
               </div>
+              <div class="mt15">
+                <!-- Link to synced Magento Cms Page -->
+                <router-link class="cl-secondary" :to="localizedRoute('/cms-page-sync')" exact>
+                  {{ $t('Cms Page Sync') }}
+                </router-link>
+              </div>
             </div>
           </div>
           <div class="row social mt30">

src/themes/default/pages/CustomCmsPage.vue

@@ -2,11 +2,36 @@
   <div class="container">
     <h1>Cms content</h1>
 
-    <h2>Cms page content</h2>
-    <cms-data :id="5" :type="'Page'"/>
+    <h2>
+      Cms page content
+    </h2>
+    <p>
+      (by identifier, it handles current store view if multistore is enable)
+    </p>
+    <cms-data :identifier="'about-us'" :type="'Page'"/>
 
-    <h2>Cms block content</h2>
-    <cms-data :id="2" :type="'Block'"/>
+    <h2>Cms block content
+    </h2>
+    <p>
+      (by identifier, it handles current store view if multistore is enable)
+    </p>
+    <cms-data :identifier="'contact-us-info'" :type="'Block'"/>
+
+    <h2>
+      Cms page content
+    </h2>
+    <p>
+      (by id only default store view (0))
+    </p>
+    <cms-data :id="5" :type="'Page'" />
+
+    <h2>
+      Cms block content
+    </h2>
+    <p>
+      (by id only default store view (0))
+    </p>
+    <cms-data :id="2" :type="'Block'" />
   </div>
 </template>