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

2026-05-29 12:07:12 +02:00
parent d2d1dc4302
commit 1dc5ceb241
4 changed files with 336 additions and 122 deletions
@@ -1,101 +1,148 @@
 class ProductGallery {
-  constructor({
-    thumbsSliderSelector = '.js-product-thumbs',
-    mainSliderSelector = '.js-product-main-images',
-    modalSliderSelector = '.js-modal-gallery',
-    galleryModalSelector = '.js-product-images-modal',
-  } = {}) {
-    this.thumbsSliderSelector = thumbsSliderSelector;
-    this.mainSliderSelector = mainSliderSelector;
-    this.modalSliderSelector = modalSliderSelector;
-    this.galleryModalSelector = galleryModalSelector;
-    this.mainSliderSwiperInstance = null;
-    this.modalSliderSwiperInstance = null;
-  }
-
-  init() {
-    this.mainSliderSwiperInstance = null;
-    this.modalSliderSwiperInstance = null;
-    this.initProductImageSlider();
-    this.initModalGallerySlider();
-  }
-
-  async initProductImageSlider() {
-    const thumbsElem = document.querySelector(this.thumbsSliderSelector);
-    const galleryTopElem = document.querySelector(this.mainSliderSelector);
-
-    if (!thumbsElem && !galleryTopElem) {
-      return;
+    constructor({
+        thumbsSliderSelector = ".js-product-thumbs",
+        mainSliderSelector = ".js-product-main-images",
+        modalSliderSelector = ".js-modal-gallery",
+        galleryModalSelector = ".js-product-images-modal",
+    } = {}) {
+        this.thumbsSliderSelector = thumbsSliderSelector;
+        this.mainSliderSelector = mainSliderSelector;
+        this.modalSliderSelector = modalSliderSelector;
+        this.galleryModalSelector = galleryModalSelector;
+        this.mainSliderSwiperInstance = null;
+        this.modalSliderSwiperInstance = null;
    }

-    const galleryThumbs = new prestashop.SwiperSlider(thumbsElem, {
-      breakpoints: {
-        320: {
-          slidesPerView: 3,
-        },
-        576: {
-          slidesPerView: 4,
-        },
-      },
-      watchSlidesVisibility: true,
-      watchSlidesProgress: true,
-    });
-
-    const galleryThumbsInstance = await galleryThumbs.initSlider();
-
-    const mainSlider = new prestashop.SwiperSlider(galleryTopElem, {
-      spaceBetween: 10,
-      navigation: {
-        nextEl: galleryTopElem.querySelector('.swiper-button-next'),
-        prevEl: galleryTopElem.querySelector('.swiper-button-prev'),
-      },
-      thumbs: {
-        swiper: galleryThumbsInstance,
-      },
-    });
-
-    const mainSliderInstance = await mainSlider.initSlider();
-
-    this.mainSliderSwiperInstance = mainSliderInstance;
-  }
-
-  initModalGallerySlider() {
-    const gallerySliderElem = document.querySelector(this.modalSliderSelector);
-
-    if (!gallerySliderElem) {
-      return;
+    init() {
+        this.mainSliderSwiperInstance = null;
+        this.modalSliderSwiperInstance = null;
+        this.initProductImageSlider();
+        this.initModalGallerySlider();
    }

-    const handleModalOpen = async () => {
-      if (this.modalSliderSwiperInstance) {
-        gallerySliderElem.style.opacity = 0;
+    syncThumbsHeight() {
+        const mainImages = document.querySelector(".product-main-images");
+        const thumbs = document.querySelector(this.thumbsSliderSelector);
+        if (!mainImages || !thumbs) return;

-        // DIRTY HACK
-        setTimeout(() => {
-          this.modalSliderSwiperInstance.update();
-          this.modalSliderSwiperInstance.slideTo(this.mainSliderSwiperInstance ? this.mainSliderSwiperInstance.activeIndex : 0, 0);
-          gallerySliderElem.style.opacity = 1;
-        }, 200);
-      } else {
-        const modalSlider = new prestashop.SwiperSlider(gallerySliderElem, {
-          slidesPerView: 1,
-          spaceBetween: 10,
-          initialSlide: this.mainSliderSwiperInstance ? this.mainSliderSwiperInstance.activeIndex : 0,
-          navigation: {
-            nextEl: gallerySliderElem.querySelector('.swiper-button-next'),
-            prevEl: gallerySliderElem.querySelector('.swiper-button-prev'),
-          },
+        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);
+
+        if (!thumbsElem && !galleryTopElem) {
+            return;
+        }
+
+        const galleryThumbs = new prestashop.SwiperSlider(thumbsElem, {
+            direction: "horizontal", // default
+            breakpoints: {
+                0: {
+                    direction: "horizontal",
+                    slidesPerView: 3,
+                },
+                768: {
+                    direction: "vertical",
+                    slidesPerView: 5,
+                },
+                992: {
+                    direction: "horizontal",
+                    slidesPerView: 3,
+                },
+                1200: {
+                    direction: "vertical",
+                    slidesPerView: 5,
+                },
+            },
+            watchSlidesVisibility: true,
+            watchSlidesProgress: true,
+            spaceBetween: 10,
        });

-        const modalSliderInstance = await modalSlider.initSlider();
+        const galleryThumbsInstance = await galleryThumbs.initSlider();

-        this.modalSliderSwiperInstance = modalSliderInstance;
-      }
-    };
+        galleryThumbsInstance.on("resize", () => this.syncThumbsHeight());
+        galleryThumbsInstance.on("breakpoint", () => this.syncThumbsHeight());

-    // TO REFACTO LATER WITH BS5 REMOVE JQUERY!
-    $(this.galleryModalSelector).on('show.bs.modal', handleModalOpen);
-  }
+        const mainSlider = new prestashop.SwiperSlider(galleryTopElem, {
+            spaceBetween: 10,
+            navigation: {
+                nextEl: galleryTopElem.querySelector(".swiper-button-next"),
+                prevEl: galleryTopElem.querySelector(".swiper-button-prev"),
+            },
+            thumbs: {
+                swiper: galleryThumbsInstance,
+            },
+        });
+
+        const mainSliderInstance = await mainSlider.initSlider();
+
+        this.mainSliderSwiperInstance = mainSliderInstance;
+        this.syncThumbsHeight();
+    }
+
+    initModalGallerySlider() {
+        const gallerySliderElem = document.querySelector(
+            this.modalSliderSelector,
+        );
+
+        if (!gallerySliderElem) {
+            return;
+        }
+
+        const handleModalOpen = async () => {
+            if (this.modalSliderSwiperInstance) {
+                gallerySliderElem.style.opacity = 0;
+
+                // DIRTY HACK
+                setTimeout(() => {
+                    this.modalSliderSwiperInstance.update();
+                    this.modalSliderSwiperInstance.slideTo(
+                        this.mainSliderSwiperInstance
+                            ? this.mainSliderSwiperInstance.activeIndex
+                            : 0,
+                        0,
+                    );
+                    gallerySliderElem.style.opacity = 1;
+                }, 200);
+            } else {
+                const modalSlider = new prestashop.SwiperSlider(
+                    gallerySliderElem,
+                    {
+                        slidesPerView: 1,
+                        spaceBetween: 10,
+                        initialSlide: this.mainSliderSwiperInstance
+                            ? this.mainSliderSwiperInstance.activeIndex
+                            : 0,
+                        navigation: {
+                            nextEl: gallerySliderElem.querySelector(
+                                ".swiper-button-next",
+                            ),
+                            prevEl: gallerySliderElem.querySelector(
+                                ".swiper-button-prev",
+                            ),
+                        },
+                    },
+                );
+
+                const modalSliderInstance = await modalSlider.initSlider();
+
+                this.modalSliderSwiperInstance = modalSliderInstance;
+            }
+        };
+
+        // TO REFACTO LATER WITH BS5 REMOVE JQUERY!
+        $(this.galleryModalSelector).on("show.bs.modal", handleModalOpen);
+    }
 }

 export default ProductGallery;