sayalip
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

refactor: update product images preview styles

staging
abhisheks 2023-11-03 17:44:55 +05:30
parent 03d5f057ec
commit b5f236857c
1 changed files with 5 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
templates/catalog/_partials/product-cover-thumbnails.tpl
View File

@ -22,25 +22,18 @@
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<div class="images-container"> <div class="images-container flex flex-row-reverse justify-center gap-6 flex-wrap lg:flex-nowrap">
{block name='product_cover'} {block name='product_cover'}
<div class="product-cover"> <div class="product-cover">
{if $product.cover} <img class="js-qv-product-cover max-w-2xl bg-gray-100" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
<img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
<div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
<i class="material-icons zoom-in">&#xE8FF;</i>
</div>
{else}
<img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
{/if}
</div> </div>
{/block} {/block}
{block name='product_images'} {block name='product_images'}
<div class="js-qv-mask mask"> <div class="js-qv-mask mask"" >
<ul class="product-images js-qv-product-images"> <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6">
{foreach from=$product.images item=image} {foreach from=$product.images item=image}
<li class="thumb-container"> <li class="thumb-container w-14 md:w-24">
<img <img
class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}" class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
data-image-medium-src="{$image.bySize.medium_default.url}" data-image-medium-src="{$image.bySize.medium_default.url}"
@ -48,7 +41,6 @@
src="{$image.bySize.home_default.url}" src="{$image.bySize.home_default.url}"
alt="{$image.legend}" alt="{$image.legend}"
title="{$image.legend}" title="{$image.legend}"
width="100"
itemprop="image" itemprop="image"
> >
</li> </li>