feat(default-theme): new slots on checkout and slot name normalization (

#1268)
vuestorefront · Dec 2, 2020 · da925f9 · da925f9 · vercel · Dec 2, 2020
1 parent 920a8f1
commit da925f9
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/packages/default-theme/src/components/checkout/steps/PaymentStep.vue b/packages/default-theme/src/components/checkout/steps/PaymentStep.vue
@@ -34,7 +34,9 @@
                   class="shipping__info"
                 >
                   <SwPluginSlot
-                    :name="`checkout-payment-method-${paymentMethod.name}`"
+                    :name="`checkout-payment-method-${simplifyString(
+                      paymentMethod.name
+                    )}`"
                     :slot-context="paymentMethod"
                   />
                 </div>
@@ -75,6 +77,7 @@ import { useCheckout, useSessionContext } from "@shopware-pwa/composables"
 import { onMounted, computed } from "@vue/composition-api"
 import SwButton from "@/components/atoms/SwButton"
 import SwPluginSlot from "sw-plugins/SwPluginSlot"
+import { simplifyString } from "@/helpers"
 
 export default {
   name: "PaymentStep",
@@ -101,7 +104,7 @@ export default {
       await getPaymentMethods()
     })
 
-    return { isGuestOrder, paymentMethods, activePaymentMethod }
+    return { isGuestOrder, paymentMethods, activePaymentMethod, simplifyString }
   },
 }
 </script>

diff --git a/packages/default-theme/src/components/checkout/steps/ShippingStep.vue b/packages/default-theme/src/components/checkout/steps/ShippingStep.vue
@@ -43,7 +43,9 @@
                   class="shipping__info"
                 >
                   <SwPluginSlot
-                    :name="`checkout-shiping-method-${shippingMethod.name}`"
+                    :name="`checkout-shiping-method-${simplifyString(
+                      shippingMethod.name
+                    )}`"
                     :slot-context="shippingMethod"
                   />
                 </div>
@@ -87,6 +89,7 @@ import {
   useCart,
 } from "@shopware-pwa/composables"
 import SwButton from "@/components/atoms/SwButton"
+import { simplifyString } from "@/helpers"
 import SwPluginSlot from "sw-plugins/SwPluginSlot"
 
 export default {
@@ -105,7 +108,6 @@ export default {
     )
     const { shippingMethod, setShippingMethod } = useSessionContext(root)
     const { refreshCart } = useCart(root)
-
     const activeShippingMethod = computed({
       get: () => shippingMethod.value && shippingMethod.value.id,
       set: async (id) => {
@@ -118,7 +120,12 @@ export default {
       await getShippingMethods()
     })
 
-    return { isGuestOrder, shippingMethods, activeShippingMethod }
+    return {
+      isGuestOrder,
+      shippingMethods,
+      activeShippingMethod,
+      simplifyString,
+    }
   },
 }
 </script>

diff --git a/packages/default-theme/src/components/checkout/summary/OrderItem.vue b/packages/default-theme/src/components/checkout/summary/OrderItem.vue
@@ -2,9 +2,9 @@
   <SfTableRow :key="product.id" class="table__row">
     <SfTableData class="table__image">
       <SfImage
-        :src="product.cover.url"
+        :src="product.cover && product.cover.url"
         data-cy="product-image"
-        v-if="product.type === 'product'"
+        v-if="product.cover && product.type === 'product'"
       />
     </SfTableData>
     <SfTableData class="table__description">

diff --git a/packages/default-theme/src/components/checkout/summary/ShippingAddressSummary.vue b/packages/default-theme/src/components/checkout/summary/ShippingAddressSummary.vue
@@ -3,6 +3,10 @@
     <template #before-content>
       <span class="content__label">{{ shippingMethod.name }}</span>
       <span class="content__label">{{ shippingMethod.deliveryTime.name }}</span>
+      <SwPluginSlot
+        :name="`summary-shiping-method-${simplifyString(shippingMethod.name)}`"
+        :slot-context="shippingMethod"
+      />
     </template>
     <template #after-content>
       <SwButton
@@ -18,12 +22,15 @@
 import SwButton from "@/components/atoms/SwButton"
 import { useSessionContext, useCheckout } from "@shopware-pwa/composables"
 import SwAddress from "@/components/SwAddress"
+import SwPluginSlot from "sw-plugins/SwPluginSlot"
+import { simplifyString } from "@/helpers"
 
 export default {
   name: "ShippingAddressSummary",
   components: {
     SwAddress,
     SwButton,
+    SwPluginSlot,
   },
   setup(props, { root }) {
     const { shippingMethod, sessionContext } = useSessionContext(root)
@@ -32,6 +39,7 @@ export default {
       shippingMethod,
       sessionContext,
       shippingAddress,
+      simplifyString,
     }
   },
 }

diff --git a/packages/default-theme/src/helpers/index.js b/packages/default-theme/src/helpers/index.js
@@ -24,6 +24,15 @@ export const getSortingLabel = (sorting) => {
   return label ? `${sorting.field} ${label}` : sorting.field
 }
 
+/**
+ * converts non-alphanumerical characters into dashes
+ * used for parsing slot codes from names
+ * @param {string} phrase
+ */
+export const simplifyString = (phrase) =>
+  (typeof phrase === "string" && phrase.replace(/[^a-zA-Z0-9]+/g, "-")) ||
+  phrase
+
 export const formatDate = (date, format = `DD-MM-YYYY HH:mm:ss`) =>
   dayjs(date).format(format)