feat(default-theme): PDP built with shopping experience (#1476)

Co-authored-by: patzick <13100280+patzick@users.noreply.github.com>
vuestorefront · May 27, 2021 · 2733715 · 2733715 · vercel · May 27, 2021
1 parent 0b71b2b
commit 2733715
Show file tree

Hide file tree

Showing 17 changed files with 462 additions and 249 deletions.
diff --git a/docs/landing/concepts/cms.md b/docs/landing/concepts/cms.md
@@ -56,7 +56,7 @@ A page serves as a wrapper and contains all content information as well as a `ty
 - Category / Listing page
 - Shop page
 - Static page
-- (at some point we will support CMS for _Product pages_ as well)
+- Product page <Badge text="from v0.9" type="info"/>
 
 ### Section
 

diff --git a/docs/landing/operations/migrations/0.8.x_to_0.9.x.md b/docs/landing/operations/migrations/0.8.x_to_0.9.x.md
@@ -20,6 +20,11 @@ export default extendNuxtConfig({
 It will not break your current project, but not using `extendNuxtConfig` method can cause troubles in the future. That's why this is marked as a breaking change
 :::
 
+## CMS for Product Detail Pages
+
+With Shopware 6.4 and Shopware PWA 0.9 you can now use CMS inside Product Detail Pages.
+It works the same way as other CMS pages, we added few new Blocks and Elements. You can read about the whole concept [here](../../concepts/cms)
+
 ## Native TypeScript support
 
 You can use TypeScript natively across the project, plugins, theme and logic.
@@ -74,9 +79,9 @@ With this release, we upgraded storefront-ui to the newest version. This require
 
 ## [default-theme] Extended checkout's payment flow
 
-Following flow from https://github.com/vuestorefront/shopware-pwa/issues/1419 the payment flow has changed in terms of how the customer is being redirected. When the selected payment method implements async payment - once the order is placed the customer is being redirected immediately to the external payment gateway. Depending on a result of the payment the customer is redirected back in both scenarios: failure and success to the corresponding routes: 
+Following flow from https://github.com/vuestorefront/shopware-pwa/issues/1419 the payment flow has changed in terms of how the customer is being redirected. When the selected payment method implements async payment - once the order is placed the customer is being redirected immediately to the external payment gateway. Depending on a result of the payment the customer is redirected back in both scenarios: failure and success to the corresponding routes:
 
 - /order-success - when the payment was done without any problems, or the payment does not require additional redirections to the external providers.
 - /payment-failure - when the payment gateway tells the API the payment isn't finished properly.
 
-In case of problems during placing an order itself - no redirection is made, just appriopriate notifications are shown on the review step.
+In case of problems during placing an order itself - no redirection is made, just appriopriate notifications are shown on the review step.
diff --git a/packages/composables/src/internalHelpers/defaultApiParams.json b/packages/composables/src/internalHelpers/defaultApiParams.json
@@ -2,7 +2,11 @@
   "useCms": {
     "limit": 10,
     "associations": {
-      "manufacturer": {},
+      "manufacturer": {
+        "associations": {
+          "media": {}
+        }
+      },
       "media": {
         "sort": [
           {
@@ -60,17 +64,12 @@
         "type",
         "sizingMode"
       ],
-      "cms_page": [
-        "id",
-        "name",
-        "sections",
-        "type",
-        "config"
-      ],
+      "cms_page": ["id", "name", "sections", "type", "config"],
       "product": [
         "media",
         "productReviews",
         "name",
+        "description",
         "ratingAverage",
         "calculatedPrice",
         "calculatedPrices",
@@ -85,37 +84,12 @@
         "seoUrls",
         "crossSellings"
       ],
-      "product_media": [
-        "media"
-      ],
-      "media": [
-        "thumbnails",
-        "width",
-        "height",
-        "url"
-      ],
-      "media_thumbnail": [
-        "url",
-        "width",
-        "height",
-        "id"
-      ],
-      "calculated_price": [
-        "unitPrice",
-        "quantity",
-        "listPrice"
-      ],
-      "product_group_option": [
-        "id",
-        "group",
-        "translated",
-        "name"
-      ],
-      "product_group": [
-        "id",
-        "translated",
-        "name"
-      ],
+      "product_media": ["media"],
+      "media": ["thumbnails", "width", "height", "url"],
+      "media_thumbnail": ["url", "width", "height", "id"],
+      "calculated_price": ["unitPrice", "quantity", "listPrice"],
+      "product_group_option": ["id", "group", "translated", "name"],
+      "product_group": ["id", "translated", "name"],
       "product_listing": [
         "sorting",
         "currentFilters",
@@ -127,12 +101,7 @@
         "total",
         "aggregations"
       ],
-      "property_group": [
-        "id",
-        "translated",
-        "options",
-        "name"
-      ],
+      "property_group": ["id", "translated", "options", "name"],
       "property_group_option": [
         "translated",
         "name",
@@ -141,11 +110,7 @@
         "media",
         "group"
       ],
-      "product_manufacturer": [
-        "translated",
-        "link",
-        "name"
-      ]
+      "product_manufacturer": ["translated", "link", "name"]
     }
   },
   "useProductListing": {
@@ -163,37 +128,12 @@
         "options",
         "seoUrls"
       ],
-      "product_media": [
-        "media"
-      ],
-      "media": [
-        "thumbnails",
-        "width",
-        "height",
-        "url"
-      ],
-      "calculated_price": [
-        "unitPrice",
-        "quantity",
-        "listPrice"
-      ],
-      "product_group_option": [
-        "name",
-        "id",
-        "group",
-        "translated"
-      ],
-      "product_group": [
-        "id",
-        "name",
-        "options",
-        "translated"
-      ],
-      "property_group": [
-        "id",
-        "translated",
-        "options"
-      ],
+      "product_media": ["media"],
+      "media": ["thumbnails", "width", "height", "url"],
+      "calculated_price": ["unitPrice", "quantity", "listPrice"],
+      "product_group_option": ["name", "id", "group", "translated"],
+      "product_group": ["id", "name", "options", "translated"],
+      "property_group": ["id", "translated", "options"],
       "property_group_option": [
         "translated",
         "name",
@@ -207,11 +147,7 @@
   "useProductQuickSearch": {
     "limit": 10,
     "includes": {
-      "calculated_price": [
-        "unitPrice",
-        "quantity",
-        "listPrice"
-      ]
+      "calculated_price": ["unitPrice", "quantity", "listPrice"]
     }
   },
   "useListing": {
@@ -229,37 +165,12 @@
         "options",
         "seoUrls"
       ],
-      "product_media": [
-        "media"
-      ],
-      "media": [
-        "thumbnails",
-        "width",
-        "height",
-        "url"
-      ],
-      "calculated_price": [
-        "unitPrice",
-        "quantity",
-        "listPrice"
-      ],
-      "product_group_option": [
-        "name",
-        "id",
-        "group",
-        "translated"
-      ],
-      "product_group": [
-        "id",
-        "name",
-        "options",
-        "translated"
-      ],
-      "property_group": [
-        "id",
-        "translated",
-        "options"
-      ],
+      "product_media": ["media"],
+      "media": ["thumbnails", "width", "height", "url"],
+      "calculated_price": ["unitPrice", "quantity", "listPrice"],
+      "product_group_option": ["name", "id", "group", "translated"],
+      "product_group": ["id", "name", "options", "translated"],
+      "property_group": ["id", "translated", "options"],
       "property_group_option": [
         "name",
         "translated",
@@ -312,34 +223,12 @@
         "seoUrls",
         "crossSellings"
       ],
-      "product_media": [
-        "media"
-      ],
-      "media": [
-        "url"
-      ],
-      "media_thumbnail": [
-        "url",
-        "width",
-        "height",
-        "id"
-      ],
-      "calculated_price": [
-        "unitPrice",
-        "quantity",
-        "listPrice"
-      ],
-      "product_group_option": [
-        "name",
-        "id",
-        "group",
-        "translated"
-      ],
-      "product_group": [
-        "id",
-        "name",
-        "translated"
-      ]
+      "product_media": ["media"],
+      "media": ["url"],
+      "media_thumbnail": ["url", "width", "height", "id"],
+      "calculated_price": ["unitPrice", "quantity", "listPrice"],
+      "product_group_option": ["name", "id", "group", "translated"],
+      "product_group": ["id", "name", "translated"]
     }
   },
   "useNavigation": {
@@ -356,10 +245,7 @@
         "translated",
         "type"
       ],
-      "seo_url": [
-        "pathInfo",
-        "seoPathInfo"
-      ]
+      "seo_url": ["pathInfo", "seoPathInfo"]
     }
   }
 }
diff --git a/packages/default-theme/src/cms/blocks/CmsBlockDefault.vue b/packages/default-theme/src/cms/blocks/CmsBlockDefault.vue
@@ -1,9 +1,12 @@
 <template>
-  <CmsGenericElement
-    v-if="getContent"
-    :content="getContent"
-    class="cms-block-default"
-  />
+  <div>
+    <CmsGenericElement
+      v-for="slot in getSlots"
+      :key="slot.id"
+      :content="slot"
+      class="cms-block-default"
+    />
+  </div>
 </template>
 
 <script>
@@ -27,9 +30,6 @@ export default {
     getSlots() {
       return this.content.slots || []
     },
-    getContent() {
-      return this.getSlots.length && this.getSlots[0]
-    },
   },
 }
 </script>

diff --git a/packages/default-theme/src/cms/blocks/CmsBlockSplitView.vue b/packages/default-theme/src/cms/blocks/CmsBlockSplitView.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="cms-block-split-view">
+    <CmsGenericElement
+      :content="getLeftContent"
+      class="cms-block-split-view__element"
+    />
+    <CmsGenericElement
+      :content="getRightContent"
+      class="cms-block-split-view__element right-view"
+    />
+  </div>
+</template>
+
+<script>
+import CmsGenericElement from "sw-cms/CmsGenericElement"
+
+export default {
+  name: "CmsBlockSplitView",
+
+  components: {
+    CmsGenericElement,
+  },
+
+  props: {
+    content: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({ slot }) => slot === "left")
+    },
+    getRightContent() {
+      return this.getSlots.find(({ slot }) => slot === "right")
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/cms/settings.scss";
+
+.cms-block-split-view {
+  @include for-desktop {
+    display: flex;
+  }
+  &__element {
+    flex: 1;
+  }
+}
+.right-view {
+  @include for-desktop {
+    margin-left: calc(var(--spacer-base) * 3);
+  }
+}
+</style>