🚀 Fix Image Product

GautheyValentin · May 11, 2021 · b069151 · b069151
1 parent 97a35b2
commit b069151
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 230 deletions.
diff --git a/src/templates/catalog/_partials/product-cover-thumbnails.tpl b/src/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -4,6 +4,7 @@
       {if $product.default_image}
         <img
           class="rounded-lg border border-gray-300"
+          :src="src"
           src="{$product.default_image.bySize.medium_default.url}"
           width="{$product.default_image.bySize.medium_default.width}"
           {if !empty($product.default_image.legend)}
@@ -32,10 +33,12 @@
         {foreach from=$product.images item=image}
           <li class="">
             <img
-              class="rounded-lg border-2 {if $image.id_image == $product.default_image.id_image}border-gray-300{/if}"
+              class="cursor-pointer rounded-lg border-2"
+              :class="{literal}{'border-red-550': src === '{/literal}{$image.bySize.medium_default.url}{literal}'}{/literal}"
               data-image-medium-src="{$image.bySize.medium_default.url}"
               data-image-large-src="{$image.bySize.large_default.url}"
               src="{$image.bySize.home_default.url}"
+              @click="src = '{$image.bySize.medium_default.url}'"
               {if !empty($image.legend)}
                 alt="{$image.legend}"
                 title="{$image.legend}"

diff --git a/src/templates/catalog/_partials/product-images-modal.tpl b/src/templates/catalog/_partials/product-images-modal.tpl
@@ -1,63 +1,57 @@
-<div class="fixed z-10 inset-0 overflow-y-auto bg-black bg-opacity-50" id="product-modal" x-show="showImage === true" x-cloak>
+<div class="fixed z-10 inset-0 overflow-y-auto bg-black bg-opacity-50" id="product-modal" x-show="showImage === true"
+  x-cloak>
   <div class="max-w-screen-xl px-5 w-full mx-auto mt-5" role="document">
     <div class="flex justify-center">
-      <div class="flex space-x-4" @click.away="showImage = false">
-        {assign var=imagesCount value=$product.images|count}
+      <div @click.away="showImage = false">
+        <div class="flex space-x-4" x-data="{literal}{modalSrc: '{/literal}{$product.default_image.bySize.large_default.url}{literal}'}{/literal}">
         <figure>
           {if $product.default_image}
-            <img
-              class="rounded w-full max-w-700"
-              width="{$product.default_image.bySize.large_default.width}"
-              src="{$product.default_image.bySize.large_default.url}"
+            <img class="rounded w-full max-w-700" width="{$product.default_image.bySize.large_default.width}"
+              src="{$product.default_image.bySize.large_default.url}" 
+              :src="modalSrc"
               {if !empty($product.default_image.legend)}
-                alt="{$product.default_image.legend}"
-                title="{$product.default_image.legend}"
-              {else}
+                alt="{$product.default_image.legend}" 
+                title="{$product.default_image.legend}" 
+              {else} 
                 alt="{$product.name}"
-              {/if}
-              itemprop="image"
-            >
+              {/if} itemprop="image">
           {else}
-            <img class="rounded w-full max-w-700" src="{$urls.no_picture_image.bySize.large_default.url}" loading="lazy" />
+            <img class="rounded w-full max-w-700" src="{$urls.no_picture_image.bySize.large_default.url}"
+              loading="lazy" />
           {/if}
-          <figcaption class="image-caption">
+          <figcaption class="mt-5 text-center w-full text-white">
             {block name='product_description_short'}
               <div id="product-description-short" itemprop="description">{$product.description_short nofilter}</div>
             {/block}
           </figcaption>
         </figure>
         <aside id="thumbnails" class="">
           {block name='product_images'}
-            <div class="{if $imagesCount <= 5}{/if}">
-              <ul class="flex flex-col">
+            <div class="">
+              <ul class="flex flex-col space-y-2">
                 {foreach from=$product.images item=image}
                   <li class="w-full max-w-90">
-                    <img
-                      data-image-large-src="{$image.large.url}"
-                      class="rounded"
-                      src="{$image.medium.url}"
-                      {if !empty($image.legend)}
-                        alt="{$image.legend}"
-                        title="{$image.legend}"
-                      {else}
-                        alt="{$product.name}"
-                      {/if}
-                      width="{$image.medium.width}"
-                      itemprop="image"
-                    >
+                    <img 
+                      data-image-large-src="{$image.large.url}" 
+                      @click="{literal}modalSrc = '{/literal}{$image.large.url}{literal}'{/literal}" 
+                      :class="{literal}{'border-red-550': modalSrc === '{/literal}{$image.large.url}{literal}'}{/literal}"
+                      class="cursor-pointer rounded-lg border-2"
+                      src="{$image.medium.url}" 
+                      {if !empty($image.legend)} alt="{$image.legend}" title="{$image.legend}"
+                      {else} alt="{$product.name}" 
+                      {/if} width="{$image.medium.width}" itemprop="image">
                   </li>
                 {/foreach}
               </ul>
             </div>
           {/block}
-          {if $imagesCount > 5}
-            <div class="">
+          {* <div class="">
               <i class="fas fa-angle-up text-black"></i>
               <i class="fas fa-angle-down text-black"></i>
-            </div>
-          {/if}
+            </div> *}
         </aside>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/templates/catalog/product.tpl b/src/templates/catalog/product.tpl
@@ -30,7 +30,7 @@
     <div class="flex w-full justify-center flex-wrap">
       <div class="flex flex-col w-full sm:w-5/12 p-5 sm:items-end">
         {block name='page_content_container'}
-          <section class="" id="content" x-data="{literal}{showImage: false}{/literal}">
+          <section class="" id="content" x-data="{literal}{showImage: false, src: {/literal}'{$product.default_image.bySize.medium_default.url}'{literal}}{/literal}">
             {block name='page_content'}
               {include file='catalog/_partials/product-flags.tpl'}