From 3ab5e1762f8a4ff17fa1c578b777e7cad9afb3e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C5=81ach?= <jacob.lach98@gmail.com>
Date: Fri, 20 Jan 2023 16:13:59 +0100
Subject: [PATCH 1/2] product page - gallery zoom photoswipe

---
 src/scss/custom/components/_slider.scss       |   6 +-
 src/scss/custom/pages/product/_product.scss   |  17 +++
 .../_partials/product-cover-thumbnails.tpl    |  15 ++-
 .../_partials/product-images-modal.tpl        | 112 ++++++++++--------
 4 files changed, 96 insertions(+), 54 deletions(-)

diff --git a/src/scss/custom/components/_slider.scss b/src/scss/custom/components/_slider.scss
index 3b2524d73..725d25c02 100644
--- a/src/scss/custom/components/_slider.scss
+++ b/src/scss/custom/components/_slider.scss
@@ -10,9 +10,9 @@ $component-name: carousel;
     justify-content: center;
     height: 100%;
 
-    &.active {
-      display: flex;
-    }
+    // &.active {
+    //   display: flex;
+    // }
 
     img {
       width: 100%;
diff --git a/src/scss/custom/pages/product/_product.scss b/src/scss/custom/pages/product/_product.scss
index c3c8ee3af..1b0bc9e47 100644
--- a/src/scss/custom/pages/product/_product.scss
+++ b/src/scss/custom/pages/product/_product.scss
@@ -23,6 +23,23 @@
         overflow: hidden;
         border-radius: 8px;
       }
+
+      &__modal-opener {
+        position: absolute;
+        right: 0.635rem;
+        bottom: 0.635rem;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        min-width: 2.5rem;
+        height: 2.5rem;
+        background-color: #fff;
+        border: none;
+        border-radius: 50%;
+        box-shadow: 0.125rem -0.125rem 0.25rem 0 rgb(0 0 0 / 20%);
+      }
     }
 
     &__description-short {
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 48339a9a3..32ca0faf6 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -5,8 +5,11 @@
 
 <div class="product__images js-images-container">
   {if $product.images|@count > 0}
-    <div id="product-images" class="carousel slide js-product-carousel"
-      data-bs-ride="carousel">
+    <div
+      id="product-images"
+      class="carousel slide js-product-carousel"
+      data-bs-ride="carousel"
+      >
 
       <div class="carousel-inner">
         {include file='catalog/_partials/product-flags.tpl'}
@@ -24,7 +27,10 @@
 
         {block name='product_cover'}
           {foreach from=$product.images item=image key=key name=productImages}
-            <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
+            <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}"
+              data-bs-target="#product-images-modal"
+              data-bs-slide-to="{$key}"
+              >
               <picture>
                 {if isset($image.bySize.default_md.sources.avif)}
                   <source 
@@ -64,6 +70,9 @@
                   data-full-size-image-url="{$image.bySize.home_default.url}"
                 >
               </picture>
+              <div class="product__images__modal-opener" data-bs-toggle="modal" data-bs-target="#product-modal">
+                <i class="material-icons zoom-in">search</i>
+              </div>
             </div>
           {/foreach}
         {/block}
diff --git a/templates/catalog/_partials/product-images-modal.tpl b/templates/catalog/_partials/product-images-modal.tpl
index 530ee167b..8c37a4eb6 100644
--- a/templates/catalog/_partials/product-images-modal.tpl
+++ b/templates/catalog/_partials/product-images-modal.tpl
@@ -3,56 +3,72 @@
  * file that was distributed with this source code.
  *}
 <div class="modal fade js-product-images-modal" id="product-modal">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-body">
-        {assign var=imagesCount value=$product.images|count}
-        <figure>
-          {if $product.default_image}
-            <img
-              class="js-modal-product-cover product-cover-modal"
-              width="{$product.default_image.bySize.large_default.width}"
-              src="{$product.default_image.bySize.large_default.url}"
-              alt="{$product.default_image.legend}"
-              title="{$product.default_image.legend}"
-              height="{$product.default_image.bySize.large_default.height}"
-           >
-          {else}
-            <img src="{$urls.no_picture_image.bySize.large_default.url}" loading="lazy" width="{$urls.no_picture_image.bySize.large_default.width}" height="{$urls.no_picture_image.bySize.large_default.height}" />
-          {/if}
-          <figcaption class="image-caption">
-          {block name='product_description_short'}
-            <div id="product-description-short">{$product.description_short nofilter}</div>
-          {/block}
-        </figcaption>
-        </figure>
-        <aside id="thumbnails" class="thumbnails js-thumbnails text-sm-center">
-          {block name='product_images'}
-            <div class="js-modal-mask mask {if $imagesCount <= 5} nomargin {/if}">
-              <ul class="product-images js-modal-product-images">
-                {foreach from=$product.images item=image}
-                  <li class="thumb-container js-thumb-container">
-                    <img
-                      data-image-large-src="{$image.large.url}"
-                      class="thumb js-modal-thumb"
-                      src="{$image.medium.url}"
-                      alt="{$image.legend}"
-                      title="{$image.legend}"
-                      width="{$image.medium.width}"
-                      height="148"
-                   >
-                  </li>
-                {/foreach}
-              </ul>
-            </div>
-          {/block}
-          {if $imagesCount> 5}
-            <div class="arrows js-modal-arrows">
-              <i class="material-icons arrow-up js-modal-arrow-up">&#xE5C7;</i>
-              <i class="material-icons arrow-down js-modal-arrow-down">&#xE5C5;</i>
-            </div>
-          {/if}
-        </aside>
+        <div
+          id="product-images-modal"
+          class="carousel slide js-product-images-modal-carousel"
+          data-bs-ride="carousel"
+        >
+          <div class="carousel-inner">
+
+            {if $product.images|@count > 1}
+              <button class="carousel-control-prev" type="button" data-bs-target="#product-images-modal" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+              </button>
+              <button class="carousel-control-next" type="button" data-bs-target="#product-images-modal" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+              </button>
+            {/if}
+
+            {foreach from=$product.images item=image key=key name=productImages}
+              <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
+                <picture>
+                  {if isset($image.bySize.default_md.sources.avif)}
+                    <source 
+                      srcset="
+                        {$image.bySize.default_md.sources.avif} 320w,
+                        {$image.bySize.product_main.sources.avif} 720w,
+                        {$image.bySize.product_main_2x.sources.avif} 1440w"
+                      sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                      type="image/avif"
+                    >
+                  {/if}
+
+                  {if isset($image.bySize.default_md.sources.webp)}
+                    <source 
+                      srcset="
+                        {$image.bySize.default_md.sources.webp} 320w,
+                        {$image.bySize.product_main.sources.webp} 720w,
+                        {$image.bySize.product_main_2x.sources.webp} 1440w"
+                      sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                      type="image/webp"
+                    >
+                  {/if}
+
+                  <img
+                    class="img-fluid"
+                    srcset="
+                      {$image.bySize.default_md.url} 320w,
+                      {$image.bySize.product_main.url} 720w,
+                      {$image.bySize.product_main_2x.url} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    src="{$image.bySize.product_main.url}" 
+                    width="{$image.bySize.product_main.width}"
+                    height="{$image.bySize.product_main.height}"
+                    loading="{if $smarty.foreach.productImages.first}eager{else}lazy{/if}"
+                    alt="{$image.legend}"
+                    title="{$image.legend}"
+                    data-full-size-image-url="{$image.bySize.home_default.url}"
+                  >
+                </picture>
+              </div>
+            {/foreach}
+          </div>
+        </div>
       </div>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->

From f081c99682740b12c9c8c98b999eb91de1873118 Mon Sep 17 00:00:00 2001
From: Krystian Podemski <kpodemski@users.noreply.github.com>
Date: Sun, 25 Jun 2023 13:24:52 +0200
Subject: [PATCH 2/2] remove display: flex for active class

---
 src/scss/custom/components/_slider.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/scss/custom/components/_slider.scss b/src/scss/custom/components/_slider.scss
index 725d25c02..830477148 100644
--- a/src/scss/custom/components/_slider.scss
+++ b/src/scss/custom/components/_slider.scss
@@ -10,9 +10,6 @@ $component-name: carousel;
     justify-content: center;
     height: 100%;
 
-    // &.active {
-    //   display: flex;
-    // }
 
     img {
       width: 100%;