fix(default-theme): carousel not refresh when cross selling change tab (

#1979) * fix(default-theme): carousel not refresh when cross selling change tab * fix(default-theme): use nextTick
vuestorefront · Feb 3, 2023 · 7f9befc · 7f9befc
1 parent af7564c
commit 7f9befc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/default-theme/src/components/SwProductCarousel.vue b/packages/default-theme/src/components/SwProductCarousel.vue
@@ -43,6 +43,15 @@ export default {
       },
     }
   },
+  methods: {
+    refresh () {
+      if (this.$refs.carousel.glide) {
+        this.$nextTick(() => {
+          this.$refs.carousel.glide.update();
+        });
+      }
+    }
+  },
   beforeDestroy() {
     if (this.$refs.carousel.glide) {
       this.$refs.carousel.glide.destroy();

diff --git a/packages/default-theme/src/components/organisms/SwProductCrossSells.vue b/packages/default-theme/src/components/organisms/SwProductCrossSells.vue
@@ -2,13 +2,13 @@
   <div v-if="crossSellCollection.length" class="products__recomendations">
     <SfLoader :loading="isLoading">
       <div class="products-recomendations__section">
-        <SfTabs :open-tab="1">
+        <SfTabs :open-tab="1" @click:tab="changeTab">
           <SfTab
             v-for="crossSellItem in crossSellCollection"
             :key="crossSellItem.crossSelling.id"
             :title="getTranslatedProperty(crossSellItem.crossSelling, 'name')"
           >
-            <SwProductCarousel :products="crossSellItem.products" />
+            <SwProductCarousel ref="carousels" :products="crossSellItem.products" />
           </SfTab>
         </SfTabs>
       </div>
@@ -39,9 +39,17 @@ export default {
   },
   setup(props) {
     const isLoading = ref(false)
+    const carousels = ref(null);
+
+    const changeTab = (e) => {
+      carousels.value[e - 1]?.refresh();
+    }
+
     if (props.crossSellings) {
       const crossSellCollection = computed(() => props.crossSellings || [])
       return {
+        carousels,
+        changeTab,
         crossSellCollection,
         isLoading,
         getTranslatedProperty,
@@ -73,7 +81,10 @@ export default {
       })
       isLoading.value = false
     })
+   
     return {
+      carousels,
+      changeTab,
       crossSellCollection,
       isLoading,
       getTranslatedProperty,