Bugfix/offline images

core/modules/catalog/helpers/index.ts

@@ -474,12 +474,6 @@ export function configureProductAsync (context, { product, configuration, select
       desiredProductFound = true
     }
 
-    if (typeof navigator !== 'undefined') {
-      if (selectedVariant && !navigator.onLine && context.state.offlineImage) { // this is fix for not preloaded images for offline
-        selectedVariant.image = context.state.offlineImage
-        Logger.debug('Image offline fallback to ', context.state.offlineImage)()
-      }
-    }
     if (selectedVariant) {
       if (!desiredProductFound) { // update the configuration
         populateProductConfigurationAsync(context, { product: product, selectedVariant: selectedVariant })
@@ -537,6 +531,7 @@ export function getMediaGallery (product) {
               mediaGallery.push({
                 'src': getThumbnailPath(mediaItem.image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
                 'loading': getThumbnailPath(mediaItem.image, 310, 300),
+                'error': getThumbnailPath(mediaItem.image, 310, 300),
                 'video': mediaItem.vid
               })
           }
@@ -562,6 +557,7 @@ export function configurableChildrenImages(product) {
                 configurableChildrenImages.push({
                     'src': getThumbnailPath(groupedByAttribute[confChild][0].image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
                     'loading': getThumbnailPath(groupedByAttribute[confChild][0].image, 310, 300),
+                    'error': getThumbnailPath(groupedByAttribute[confChild][0].image, 310, 300),
                     'id': confChild
                 })
             }
@@ -583,7 +579,8 @@ export function attributeImages(product) {
             if(product[attribute]) {
                 attributeImages.push({
                     'src': getThumbnailPath(product[attribute], rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
-                    'loading': getThumbnailPath(product[attribute], 310, 300)
+                    'loading': getThumbnailPath(product[attribute], 310, 300),
+                    'error': getThumbnailPath(product[attribute], 310, 300)
                 })
             }
         }

core/modules/catalog/store/product/actions.ts

@@ -578,10 +578,6 @@ const actions: ActionTree<ProductState, RootState> = {
       // get original product
       const productOriginal = context.getters.productOriginal
 
-      if (!context.state.offlineImage) {
-        context.state.offlineImage = productThumbnailPath(productOriginal ? productOriginal /** in case if it's not yet set */ : productVariant, true)
-        Logger.debug('Image offline fallback set to ' + context.state.offlineImage, 'product')()
-      }
       // check if passed variant is the same as original
       const productUpdated = Object.assign({}, productOriginal, productVariant)
       populateProductConfigurationAsync(context, { product: productUpdated, selectedVariant: productVariant })

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

@@ -1,6 +1,6 @@
 <template>
   <div class="media-gallery" :class="{'media-gallery--loaded': carouselLoaded}">
-    <div class="relative">
+    <div class="relative w-100">
       <product-gallery-overlay
         v-if="isZoomOpen"
         :current-slide="currentSlide"
@@ -78,6 +78,8 @@ export default {
   text-align: center;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
   min-height: calc(90vw * 1.1);
   background-image: url('/assets/placeholder.svg');
   background-repeat: no-repeat;

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

@@ -15,11 +15,32 @@
       <slide
         v-for="(images, index) in gallery"
         :key="images.src">
-        <div class="bg-cl-secondary" :class="{'video-container h-100 flex relative': images.video}">
+        <div class="product-image-container bg-cl-secondary" :class="{'video-container w-100 h-100 flex relative': images.video}">
           <img
-            v-show="hideImageAtIndex !== index"
+            v-show="placeholderImagesMap[index]"
+            key="placeholderImage"
+            class="inline-flex mw-100"
+            src="/assets/placeholder.svg"
+            ref="images"
+            :alt="productName | htmlDecode"
+          >
+          <img
+            v-show="lowerQualityImagesMap[index]"
+            key="lowQualityImage"
+            class="product-image inline-flex mw-100"
+            :src="images.loading"
+            @load="lowerQualityImageLoaded(index)"
+            ref="images"
+            :alt="productName | htmlDecode"
+            data-testid="productGalleryImage"
+            itemprop="image"
+          >
+          <img
+            v-show="highQualityImagesLoadedMap[index]"
+            key="highQualityImage"
+            :src="images.src"
+            @load="highQualityImageLoaded(index)"
             class="product-image inline-flex pointer mw-100"
-            v-lazy="images"
             ref="images"
             @dblclick="openOverlay"
             :alt="productName | htmlDecode"
@@ -48,6 +69,11 @@ import ProductVideo from './ProductVideo'
 
 export default {
   name: 'ProductGalleryCarousel',
+  components: {
+    Carousel,
+    Slide,
+    ProductVideo
+  },
   props: {
     gallery: {
       type: Array,
@@ -66,13 +92,33 @@ export default {
     return {
       carouselTransitionSpeed: 0,
       currentPage: 0,
-      hideImageAtIndex: null
+      hideImageAtIndex: null,
+      lowerQualityImagesLoadedMap: {},
+      highQualityImagesLoadedMap: {}
     }
   },
-  components: {
-    Carousel,
-    Slide,
-    ProductVideo
+  computed: {
+    placeholderImagesMap () {
+      let visibilityMap = {}
+      this.gallery.forEach((image, index) => {
+        visibilityMap[index] = !this.lowerQualityImagesLoadedMap[index] && !this.highQualityImagesLoadedMap[index]
+      })
+      return visibilityMap
+    },
+    lowerQualityImagesMap () {
+      let visibilityMap = {}
+      this.gallery.forEach((image, index) => {
+        visibilityMap[index] = !!this.lowerQualityImagesLoadedMap[index] && !this.highQualityImagesLoadedMap[index] && this.hideImageAtIndex !== index
+      })
+      return visibilityMap
+    },
+    highQualityImagesMap () {
+      let visibilityMap = {}
+      this.gallery.forEach((image, index) => {
+        visibilityMap[index] = !!this.highQualityImagesLoadedMap[index] && this.hideImageAtIndex !== index
+      })
+      return visibilityMap
+    }
   },
   beforeMount () {
     this.$bus.$on('filter-changed-product', this.selectVariant)
@@ -124,6 +170,12 @@ export default {
     },
     onVideoStarted (index) {
       this.hideImageAtIndex = index
+    },
+    lowerQualityImageLoaded (index) {
+      this.$set(this.lowerQualityImagesLoadedMap, index, true)
+    },
+    highQualityImageLoaded (index) {
+      this.$set(this.highQualityImagesLoadedMap, index, true)
     }
   }
 }
@@ -140,6 +192,19 @@ export default {
   bottom: 0;
   right: 0;
 }
+.product-image-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.product-image {
+  width: 100%;
+  height: auto;
+}
 img {
   opacity: 1;
   mix-blend-mode: multiply;