Merge pull request #2123 from vue-kacper/bugfix/2120

bugfix/2120-picture-switching-when-entering-product
vuestorefront · Jan 3, 2019 · 6f187a6 · 6f187a6
2 parents 733c641 + fab00b9
commit 6f187a6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/core/modules/catalog/components/ProductGallery.ts b/core/modules/catalog/components/ProductGallery.ts
@@ -40,6 +40,16 @@ export const ProductGallery = {
     setTimeout(() => {
       this.selectVariant()
       this.$forceUpdate()
+      if (this.$refs.carousel) {
+        let navigation = this.$refs.carousel.$children.find(c => c.$el.className === 'VueCarousel-navigation')
+        let pagination = this.$refs.carousel.$children.find(c => c.$el.className === 'VueCarousel-pagination')
+        if (navigation !== undefined) {
+          navigation.$on('navigationclick', this.increaseCarouselTransitionSpeed)
+        }
+        if (pagination !== undefined) {
+          pagination.$on('paginationclick', this.increaseCarouselTransitionSpeed)
+        }
+      }
     }, 0)
     document.addEventListener('keydown', this.handleEscKey)
   },
@@ -59,6 +69,9 @@ export const ProductGallery = {
         this.$refs.carousel.goToPage(index)
       }
     },
+    increaseCarouselTransitionSpeed () {
+      this.carouselTransitionSpeed = 500
+    },
     selectVariant () {
       if (store.state.config.products.gallery.mergeConfigurableChildren) {
         let option = this.configuration[store.state.config.products.gallery.variantsGroupAttribute]

diff --git a/src/themes/default/components/core/ProductGallery.vue b/src/themes/default/components/core/ProductGallery.vue
@@ -32,6 +32,7 @@
               navigation-next-label="<i class='material-icons p15 cl-bg-tertiary pointer'>keyboard_arrow_right</i>"
               navigation-prev-label="<i class='material-icons p15 cl-bg-tertiary pointer'>keyboard_arrow_left</i>"
               ref="carousel"
+              :speed="carouselTransitionSpeed"
             >
               <slide
                 v-for="images in gallery"
@@ -77,7 +78,8 @@ export default {
   },
   data () {
     return {
-      loaded: true
+      loaded: true,
+      carouselTransitionSpeed: 0
     }
   },
   methods: {