feat(plugins): context for plugin slots (#832)

vuestorefront · Jun 2, 2020 · 9d0ccd4 · 9d0ccd4 · vercel · Jun 2, 2020
1 parent baf1c9c
commit 9d0ccd4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/cli/src/templates/plugins/SwPluginSlot.vue b/packages/cli/src/templates/plugins/SwPluginSlot.vue
@@ -1,5 +1,7 @@
 <template>
-  <component :is="getComponent" :name="name"> <slot /> </component>
+  <component :is="getComponent" :name="name" :slotContext="slotContext">
+    <slot />
+  </component>
 </template>
 <script>
 import Vue from "vue"
@@ -26,6 +28,10 @@ export default {
       type: String,
       default: "",
     },
+    slotContext: {
+      type: Object,
+      default: null
+    }
   },
   setup() {
     const { showPluginSlots } = usePlugins();

diff --git a/packages/default-theme/components/SwProductDetails.vue b/packages/default-theme/components/SwProductDetails.vue
@@ -11,7 +11,7 @@
         :tier-prices="getTierPrices"
       />
     </div>
-    <SwPluginSlot name="product-page-description">
+    <SwPluginSlot name="product-page-description" :slotContext="product">
       <p
         class="product-details__description desktop-only"
         v-html="description"
@@ -50,7 +50,10 @@
         class="product-details__add-to-cart"
         @click="addToCart"
       />
-      <SwPluginSlot name="product-page-add-to-cart-button-after" />
+      <SwPluginSlot
+        name="product-page-add-to-cart-button-after"
+        :slotContext="product"
+      />
       <div class="product-details__action desktop-only">
         <SwButton class="sf-button--text product-details__action-button"
           >Save for later</SwButton

diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
@@ -1,13 +1,13 @@
 <template>
   <div v-if="product" id="product">
-    <SwPluginSlot name="product-page-details-before" />
+    <SwPluginSlot name="product-page-details-before" :slotContext="product" />
     <div class="product">
       <SwProductGallery :product="product" class="product__gallery" />
       <div class="product__description">
         <SwProductDetails :product="product" :page="page" />
       </div>
     </div>
-    <SwPluginSlot name="product-page-details-after" />
+    <SwPluginSlot name="product-page-details-after" :slotContext="product" />
     <div class="products__recomendations">
       <div class="products-recomendations__section">
         <SwProductCarousel />

diff --git a/packages/default-theme/layouts/default.vue b/packages/default-theme/layouts/default.vue
@@ -3,7 +3,7 @@
     <SwPluginSlot name="page-top" />
     <SwHeader />
     <SwPluginSlot name="top-header-after" />
-    <SwPluginSlot name="breadcrumbs">
+    <SwPluginSlot name="breadcrumbs" :slotContext="getBreadcrumbs" >
       <SfBreadcrumbs
         v-show="getBreadcrumbs.length > 0"
         :breadcrumbs="getBreadcrumbs"