fix(extra-features): Fixed the sync product image/gallery

falcon/_dev/css/product/components/product-gallery/_product-thumbs.scss

@@ -4,11 +4,18 @@
     margin-right: -#{map.get($spacers, 1)};
     margin-left: -#{map.get($spacers, 1)};
 
+    &.swiper-vertical {
+        max-height: 600px;
+    }
+    &.swiper-horizontal {
+        max-height: 200px;
+    }
+
     &__elem {
         padding: 0 map.get($spacers, 1);
         cursor: pointer;
-    opacity: .3;
+        opacity: 0.3;
-    transition: .3s ease opacity;
+        transition: 0.3s ease opacity;
         @include make-col(4);
 
         &:focus,

falcon/_dev/js/product/components/ProductGallery.js

@@ -1,9 +1,9 @@
 class ProductGallery {
     constructor({
-    thumbsSliderSelector = '.js-product-thumbs',
+        thumbsSliderSelector = ".js-product-thumbs",
-    mainSliderSelector = '.js-product-main-images',
+        mainSliderSelector = ".js-product-main-images",
-    modalSliderSelector = '.js-modal-gallery',
+        modalSliderSelector = ".js-modal-gallery",
-    galleryModalSelector = '.js-product-images-modal',
+        galleryModalSelector = ".js-product-images-modal",
     } = {}) {
         this.thumbsSliderSelector = thumbsSliderSelector;
         this.mainSliderSelector = mainSliderSelector;
@@ -20,6 +20,21 @@ class ProductGallery {
         this.initModalGallerySlider();
     }
 
+    syncThumbsHeight() {
+        const mainImages = document.querySelector(".product-main-images");
+        const thumbs = document.querySelector(this.thumbsSliderSelector);
+        if (!mainImages || !thumbs) return;
+
+        if (thumbs.classList.contains("swiper-vertical")) {
+            const h = mainImages.offsetHeight;
+            if (h > 0) {
+                thumbs.style.height = h + "px";
+            }
+        } else {
+            thumbs.style.height = "";
+        }
+    }
+
     async initProductImageSlider() {
         const thumbsElem = document.querySelector(this.thumbsSliderSelector);
         const galleryTopElem = document.querySelector(this.mainSliderSelector);
@@ -29,25 +44,40 @@ class ProductGallery {
         }
 
         const galleryThumbs = new prestashop.SwiperSlider(thumbsElem, {
+            direction: "horizontal", // default
             breakpoints: {
-        320: {
+                0: {
+                    direction: "horizontal",
                     slidesPerView: 3,
                 },
-        576: {
+                768: {
-          slidesPerView: 4,
+                    direction: "vertical",
+                    slidesPerView: 5,
+                },
+                992: {
+                    direction: "horizontal",
+                    slidesPerView: 3,
+                },
+                1200: {
+                    direction: "vertical",
+                    slidesPerView: 5,
                 },
             },
             watchSlidesVisibility: true,
             watchSlidesProgress: true,
+            spaceBetween: 10,
         });
 
         const galleryThumbsInstance = await galleryThumbs.initSlider();
 
+        galleryThumbsInstance.on("resize", () => this.syncThumbsHeight());
+        galleryThumbsInstance.on("breakpoint", () => this.syncThumbsHeight());
+
         const mainSlider = new prestashop.SwiperSlider(galleryTopElem, {
             spaceBetween: 10,
             navigation: {
-        nextEl: galleryTopElem.querySelector('.swiper-button-next'),
+                nextEl: galleryTopElem.querySelector(".swiper-button-next"),
-        prevEl: galleryTopElem.querySelector('.swiper-button-prev'),
+                prevEl: galleryTopElem.querySelector(".swiper-button-prev"),
             },
             thumbs: {
                 swiper: galleryThumbsInstance,
@@ -57,10 +87,13 @@ class ProductGallery {
         const mainSliderInstance = await mainSlider.initSlider();
 
         this.mainSliderSwiperInstance = mainSliderInstance;
+        this.syncThumbsHeight();
     }
 
     initModalGallerySlider() {
-    const gallerySliderElem = document.querySelector(this.modalSliderSelector);
+        const gallerySliderElem = document.querySelector(
+            this.modalSliderSelector,
+        );
 
         if (!gallerySliderElem) {
             return;
@@ -73,19 +106,33 @@ class ProductGallery {
                 // DIRTY HACK
                 setTimeout(() => {
                     this.modalSliderSwiperInstance.update();
-          this.modalSliderSwiperInstance.slideTo(this.mainSliderSwiperInstance ? this.mainSliderSwiperInstance.activeIndex : 0, 0);
+                    this.modalSliderSwiperInstance.slideTo(
+                        this.mainSliderSwiperInstance
+                            ? this.mainSliderSwiperInstance.activeIndex
+                            : 0,
+                        0,
+                    );
                     gallerySliderElem.style.opacity = 1;
                 }, 200);
             } else {
-        const modalSlider = new prestashop.SwiperSlider(gallerySliderElem, {
+                const modalSlider = new prestashop.SwiperSlider(
+                    gallerySliderElem,
+                    {
                         slidesPerView: 1,
                         spaceBetween: 10,
-          initialSlide: this.mainSliderSwiperInstance ? this.mainSliderSwiperInstance.activeIndex : 0,
+                        initialSlide: this.mainSliderSwiperInstance
+                            ? this.mainSliderSwiperInstance.activeIndex
+                            : 0,
                         navigation: {
-            nextEl: gallerySliderElem.querySelector('.swiper-button-next'),
+                            nextEl: gallerySliderElem.querySelector(
-            prevEl: gallerySliderElem.querySelector('.swiper-button-prev'),
+                                ".swiper-button-next",
+                            ),
+                            prevEl: gallerySliderElem.querySelector(
+                                ".swiper-button-prev",
+                            ),
                         },
-        });
+                    },
+                );
 
                 const modalSliderInstance = await modalSlider.initSlider();
 
@@ -94,7 +141,7 @@ class ProductGallery {
         };
 
         // TO REFACTO LATER WITH BS5 REMOVE JQUERY!
-    $(this.galleryModalSelector).on('show.bs.modal', handleModalOpen);
+        $(this.galleryModalSelector).on("show.bs.modal", handleModalOpen);
     }
 }
 

falcon/_dev/js/theme/index.js

@@ -13,6 +13,7 @@ import "@js/theme/components/quickview";
 import "@js/theme/components/product";
 import "@js/theme/components/cart/cart";
 import "@js/theme/components/cart/block-cart";
+import "@js/theme/components/product-miniature-form.js";
 
 import usePasswordPolicy from "@js/theme/components/usePasswordPolicy";
 import prestashop from "prestashop";
@@ -66,22 +67,6 @@ function initStickyHeader() {
     }
 }
 
-// Sync product thumbs height with main images height
-function syncThumbsHeight() {
-    const mainImages = document.querySelector(".product-main-images");
-    const thumbs = document.querySelector(".product-thumbs.swiper");
-    // Only apply if Swiper is vertical
-    if (mainImages && thumbs && thumbs.classList.contains("swiper-vertical")) {
-        thumbs.style.maxHeight = mainImages.offsetHeight + "px";
-        thumbs.style.height = mainImages.offsetHeight + "px";
-    } else {
-        return;
-    }
-}
-
-window.addEventListener("load", syncThumbsHeight);
-window.addEventListener("resize", syncThumbsHeight);
-
 $(() => {
     initStickyHeader();
     accLinksTriggerActive();