feat(cms): add dynamic sites to resolve routing

packages/default-theme/components/views/CategoryView.vue

@@ -0,0 +1,34 @@
+<template>
+ <div>
+ <h2> Dumb category component, as a param takes cms page </h2>
+ <pre> {{ cmsPageDescription }} </pre>
+ </div>
+</template>
+<script>
+
+export default {
+ name: 'CategoryView',
+ components: {
+ },
+ props: {
+ cmsPage: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ data() {
+ return {
+ }
+ },
+ computed: {
+ cmsPageDescription () {
+ return `${this.cmsPage.name} ${this.cmsPage.type}`
+ }
+ },
+ methods: {
+ }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

packages/default-theme/components/views/ProductView.vue

@@ -0,0 +1,34 @@
+<template>
+ <div>
+ <h2> Dumb product view component, as a param takes cms page </h2>
+ <pre> {{ cmsPageDescription }} </pre>
+ </div>
+</template>
+<script>
+
+export default {
+ name: 'ProductView',
+ components: {
+ },
+ props: {
+ cmsPage: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ data() {
+ return {
+ }
+ },
+ computed: {
+ cmsPageDescription () {
+ return `${this.cmsPage.name} ${this.cmsPage.type}`
+ }
+ },
+ methods: {
+ }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

packages/default-theme/pages/_.vue

@@ -1,7 +1,7 @@
 <template>
  <div>
  <h2> Shopware dynamic page </h2>
- <pre> {{ cmsPageName }} </pre>
+ <component :is="getComponent" :cms-page="cmsPage"/>
  </div>
 </template>
 <script>
@@ -17,6 +17,18 @@
 // } from '@storefront-ui/vue'
 import { getPage } from "@shopware-pwa/shopware-6-client";
 
+const pagesMap = {
+ "frontend.navigation.page": "CategoryView",
+ "frontend.details.page": "ProductView"
+};
+
+export function getComponentBy(resourceType) {
+ if (!resourceType) return;
+ let componentName = pagesMap[resourceType];
+ if (!componentName) componentName = "SwNoComponent";
+ return () => import(`@/components/views/${componentName}`);
+}
+
 export default {
  name: 'DynamicRoute',
  components: {
@@ -36,13 +48,19 @@ export default {
  return {
  cmsPageName: name,
  page,
- breadcrumbs: page.breadcrumb
+ breadcrumbs: page.breadcrumb,
+ cmsPage: page.cmsPage
  }
  },
  data() {
  return {
  }
  },
+ computed: {
+ getComponent() {
+ return getComponentBy(this.page.resourceType);
+ }
+ },
  methods: {
  }
 }