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

Fixed bug in the product images component

bug-update
mohitj 2024-12-23 11:14:17 +05:30
parent 4df9a781d4
commit 1b5068e9aa
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_dev/js/product.js
View File

@ -26,6 +26,7 @@ import $ from 'jquery';
import prestashop from 'prestashop'; import prestashop from 'prestashop';
import ProductSelect from './components/product-select'; import ProductSelect from './components/product-select';
import updateSources from './components/update-sources'; import updateSources from './components/update-sources';
import EasyZoom from './easyzoom';
$(document).ready(() => { $(document).ready(() => {
function coverImage() { function coverImage() {
@ -51,9 +52,9 @@ $(document).ready(() => {
productCover.attr('alt', newSelectedThumb.attr('alt')); productCover.attr('alt', newSelectedThumb.attr('alt'));
modalProductCover.attr('alt', newSelectedThumb.attr('alt')); modalProductCover.attr('alt', newSelectedThumb.attr('alt'));
// Get data from thumbnail and update cover sources // Update EasyZoom instance
updateSources(productCover, newSelectedThumb.data('image-medium-sources')); const easyZoomApi = $('.easyzoom').data('easyZoom');
updateSources(modalProductCover, newSelectedThumb.data('image-large-sources')); easyZoomApi.swap(newSelectedThumb.data('image-medium-src'), newSelectedThumb.data('image-large-src'));
}; };
$(prestashop.themeSelectors.product.thumb).on('click', (event) => { $(prestashop.themeSelectors.product.thumb).on('click', (event) => {
@ -169,6 +170,9 @@ $(document).ready(() => {
imageScrollBox(); imageScrollBox();
addJsProductTabActiveSelector(); addJsProductTabActiveSelector();
// Initialize EasyZoom
const $easyzoom = $('.easyzoom').easyZoom();
prestashop.on('updatedProduct', (event) => { prestashop.on('updatedProduct', (event) => {
createInputFile(); createInputFile();
coverImage(); coverImage();

7
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

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

@ -36,7 +36,7 @@
{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 flex flex-row lg:flex-col gap-6"> <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6 w-full h-auto">
{foreach from=$product.images item=image} {foreach from=$product.images item=image}
<li class="thumb-container w-14 md:w-24"> <li class="thumb-container w-14 md:w-24">
<img <img
@ -47,6 +47,7 @@
alt="{$image.legend}" alt="{$image.legend}"
title="{$image.legend}" title="{$image.legend}"
itemprop="image" itemprop="image"
> >
</li> </li>
{/foreach} {/foreach}