Feature/correct color configurable

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.9.0]
 ### Changed / Improved
+- Fixed an issue where the correct image for a product configuration wasn't set on the product page image carousel. Also added the fix on the productcarousel in the zoom component - @DaanKouters (#2419)
 - Added clear filters button on desktop also and only show if filters are applied - @DaanKouters (#2342)
 - Improved docs at contributing.md and configuration.md (spelling etc.) - @ruthgeridema (#2421, #2422, #2423, #2425, #2426)
 - Fixed design issue of Country label on Edge 17 & Firefox - @ananth-iyer (#2390,#2399)

core/modules/catalog/components/ProductGallery.ts

@@ -1,11 +1,8 @@
 import VueOffline from 'vue-offline'
-import store from '@vue-storefront/store'
 
 export const ProductGallery = {
   name: 'ProductGallery',
   components: {
-    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
-    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide),
     VueOffline
   },
   props: {
@@ -26,68 +23,9 @@ export const ProductGallery = {
       required: true
     }
   },
-  data () {
-    return {
-      isZoomOpen: false
-    }
-  },
-  beforeMount () {
-    this.$bus.$on('filter-changed-product', this.selectVariant)
-    this.$bus.$on('product-after-load', this.selectVariant)
-  },
-  mounted () {
-    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)
-  },
-  beforeDestroy () {
-    this.$bus.$off('filter-changed-product', this.selectVariant)
-    this.$bus.$off('product-after-load', this.selectVariant)
-    document.removeEventListener('keydown', this.handleEscKey)
-  },
   computed: {
     defaultImage () {
       return this.gallery.length ? this.gallery[0] : false
     }
-  },
-  methods: {
-    navigate (index) {
-      if (this.$refs.carousel) {
-        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]
-        if (typeof option !== 'undefined' && option !== null) {
-          let index = this.gallery.findIndex(obj => obj.id && Number(obj.id) === Number(option.id))
-          this.navigate(index)
-        }
-        this.$forceUpdate()
-      }
-    },
-    toggleZoom () {
-      this.isZoomOpen = !this.isZoomOpen
-    },
-    handleEscKey (event) {
-      if (this.isZoomOpen && event.keyCode === 27) {
-        this.toggleZoom()
-      }
-    }
   }
 }

src/themes/default/components/core/ProductGallery.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="media-gallery">
-    <product-gallery-zoom
-      v-if="isZoomOpen"
-      :current="$refs.carousel.currentPage"
-      :title="product.name"
-      :gallery="gallery"
-      @close="toggleZoom"/>
     <div v-show="OfflineOnly">
       <img class="offline-image" v-lazy="offline" :src="offline.src" ref="offline" alt="">
     </div>
@@ -22,39 +16,20 @@
           >
         </div>
         <div v-else>
+          <product-gallery-overlay
+            v-if="isZoomOpen"
+            :current-slide="currentSlide"
+            :product-name="product.name"
+            :gallery="gallery"
+            @close="toggleZoom"/>
           <no-ssr>
-            <carousel
-              :per-page="1"
-              :mouse-drag="false"
-              :navigation-enabled="true"
-              pagination-active-color="#828282"
-              pagination-color="transparent"
-              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"
-                :key="images.src">
-                <div class="bg-cl-secondary">
-                  <img
-                    class="product-image inline-flex pointer mw-100"
-                    v-lazy="images"
-                    ref="images"
-                    @dblclick="toggleZoom"
-                    :alt="product.name | htmlDecode"
-                    data-testid="productGalleryImage"
-                    itemprop="image"
-                  >
-                </div>
-              </slide>
-            </carousel>
+            <product-gallery-carousel
+              v-if="showProductGalleryCarousel"
+              :gallery="gallery"
+              :configuration="configuration"
+              :product-name="product.name"
+              @toggle="openOverlay"/>
           </no-ssr>
-          <i
-            class="zoom-in material-icons p15 cl-bgs-tertiary pointer"
-            @click="toggleZoom"
-          >zoom_in</i>
         </div>
       </div>
     </div>
@@ -63,28 +38,51 @@
 
 <script>
 import { ProductGallery } from '@vue-storefront/core/modules/catalog/components/ProductGallery.ts'
-import ProductGalleryZoom from './ProductGalleryZoom'
+import ProductGalleryOverlay from './ProductGalleryOverlay'
+import onEscapePress from '@vue-storefront/core/mixins/onEscapePress'
 import NoSSR from 'vue-no-ssr'
 import VueOfflineMixin from 'vue-offline/mixin'
+const ProductGalleryCarousel = () => import(/* webpackChunkName: "vsf-product-gallery-carousel" */ './ProductGalleryCarousel.vue')
 
 export default {
   components: {
+    ProductGalleryCarousel,
     'no-ssr': NoSSR,
-    ProductGalleryZoom
+    ProductGalleryOverlay
   },
-  mixins: [ProductGallery, VueOfflineMixin],
+  mixins: [
+    ProductGallery,
+    VueOfflineMixin,
+    onEscapePress
+  ],
   watch: {
     '$route': 'validateRoute'
   },
   data () {
     return {
-      loaded: true,
-      carouselTransitionSpeed: 0
+      isZoomOpen: false,
+      showProductGalleryCarousel: false,
+      currentSlide: 0
     }
   },
+  mounted () {
+    this.showProductGalleryCarousel = true
+  },
   methods: {
+    openOverlay (currentSlide) {
+      this.currentSlide = currentSlide
+      this.toggleZoom()
+    },
     validateRoute () {
       this.$forceUpdate()
+    },
+    toggleZoom () {
+      this.isZoomOpen = !this.isZoomOpen
+    },
+    onEscapePress () {
+      if (this.isZoomOpen) {
+        this.toggleZoom()
+      }
     }
   }
 }
@@ -94,92 +92,8 @@ export default {
 .media-gallery {
   text-align: center;
   height: 100%;
-  &.open {
-    z-index: 3;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    .product-zoom {
-      @media (max-width: 767px) {
-        position: absolute;
-        top: 50%;
-        transform: translate(0,-50%);
-        -webkit-transform: translate(0,-50%);
-        -moz-transform: translate(0,-50%);
-        -ms-transform: translate(0,-50%);
-        -o-transform: translate(0,-50%);
-      }
-    }
-  }
 }
 .offline-image {
   width: 100%;
 }
-.zoom-in {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-img {
-  opacity: 0.9;
-  mix-blend-mode: multiply;
-  vertical-align: top;
-  &:hover {
-    opacity: 1;
-  }
-}
-img[lazy=error] {
-  width: 100%;
-}
-img[lazy=loading] {
-  width: 100%;
-}
-
-.thumbnails {
-  div {
-    margin: 0 20px 20px 0;
-  }
-}
-</style>
-<style lang="scss">
-.media-gallery {
-  .VueCarousel-pagination {
-    position: absolute;
-    bottom: 15px;
-    @media (max-width: 767px) {
-      display: none;
-    }
-  }
-  .VueCarousel-navigation-button {
-    margin: 0;
-    transform: translateY(-50%) !important;
-  }
-  .VueCarousel-slide {
-    backface-visibility: unset;
-  }
-  .VueCarousel-navigation {
-    opacity: 0;
-    &--disabled {
-      opacity: 0.3;
-    }
-  }
-  .VueCarousel-dot {
-    padding: 8px !important;
-    button {
-      border: 2px solid #828282;
-    }
-  }
-  &:hover {
-    .VueCarousel-navigation {
-      opacity: .9;
-    }
-    .VueCarousel-navigation-button {
-      transition: opacity 3s;
-      &:after {
-        background-color: transparent;
-      }
-    }
-  }
-}
 </style>