[Shop] Add image lightbox (#17159)

This one added lightbox script to the main image, but thumbs/variants
need rework

src/Sylius/Bundle/ShopBundle/Resources/assets/entrypoint.js

@@ -12,6 +12,7 @@ import './styles/main.scss';
 import './app';
 
 import './scripts/bootstrap';
+import './scripts/spotlight';
 
 const imagesContext = require.context('./images', true, /\.(jpg|jpeg|png|svg|gif)$/);
 imagesContext.keys().forEach(imagesContext);

src/Sylius/Bundle/ShopBundle/Resources/assets/scripts/spotlight.js

@@ -0,0 +1,10 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import 'spotlight.js';

src/Sylius/Bundle/ShopBundle/package.json

@@ -9,7 +9,8 @@
     "@symfony/stimulus-bridge": "^3.2.2",
     "@symfony/webpack-encore": "^3.1.0",
     "bootstrap": "^5.3.0",
-    "flag-icons": "^7.2.3"
+    "flag-icons": "^7.2.3",
+    "spotlight.js": "^0.7.8"
   },
   "devDependencies": {
     "sass": "^1.54.8",

src/Sylius/Bundle/ShopBundle/templates/product/show/page/info/overview/images.html.twig

@@ -9,7 +9,7 @@
     {% set path = original_path %}
 {% endif %}
 
-<div class="mb-5">
+<div class="spotlight-group mb-5">
     <div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div>
     {% hook 'images' with { original_path, path } %}
 </div>

src/Sylius/Bundle/ShopBundle/templates/product/show/page/info/overview/images/main_image.html.twig

@@ -1,6 +1,6 @@
 {% set product = hookable_metadata.context.product %}
 
-<a href="{{ hookable_metadata.context.original_path }}">
+<a href="{{ hookable_metadata.context.original_path }}" class="spotlight">
     <img src="{{ hookable_metadata.context.path }}" alt="{{ product.name }}"
         {% if product.images.first %}
             {{ sylius_test_html_attribute('main-image', product.images.first.type) }}