Remove product images duplication (#18380)

Rafikooo · web-flow · commit f43a51e664fd · 2025-10-02T09:45:48.000+02:00
| Q | A |-----------------|----- | Branch? | 1.14 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Related tickets | fixes #16771 | License | MIT
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/private/js/sylius-variant-images.js b/src/Sylius/Bundle/ShopBundle/Resources/private/js/sylius-variant-images.js
@@ -83,3 +83,18 @@ $.fn.extend({
     }
   },
 });
+
+const mainImage = $('a.ui.fluid.image > img');
+mainImage.click((e) => {
+  e.preventDefault();
+
+  const mainImageSrcExploded = e.target.src.split('/');
+
+  const thumbnails = $('[data-lightbox="sylius-product-image"]');
+  thumbnails.each((index, element) => {
+    const imageSrcExploded = $(element).find('img').attr('src').split('/');
+    if (mainImageSrcExploded[mainImageSrcExploded.length - 1] === imageSrcExploded[imageSrcExploded.length - 1]) {
+      element.click();
+    }
+  });
+});
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Show/_images.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Show/_images.html.twig
@@ -16,7 +16,7 @@
 {% endif %}
 
 <div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div>
-<a href="{{ original_path }}" class="ui fluid image" data-lightbox="sylius-product-image">
+<a href="{{ original_path }}" class="ui fluid image"{% if product.images|length < 2%} data-lightbox="sylius-product-image"{% endif %}>
     <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} />
 </a>
 {% if product.images|length > 1 %}
