Проблема отображения фото в карточке товара

Здравствуйте. Столкнулся с проблемой при адаптации страницы товара под мобильные устройства. Есть несколько фото товара, при нажатии на которые они открываются на месте основного фото (всё стандартно). Но, при создании мобильной версии я дублирую html код с нужными мне изменениями, который display: none в десктопной версии и наоборот. А проблема в том, что функция открытия второстепенных фото вместо основной, работает только для того участка кода, который идёт первым в файле. Если сначала идёт код для мобильных, то там всё норм, а на компе при нажатии на второстепенные фото ничего не происходит. А если поменять код местами, то становится наоборот.

Подскажите, как это можно исправить?

Вот этот участок кода из файла page.html

<figure class="product-gallery product-mobile-gallery">
{if $product.images}
<!-- main image -->
<div class="image" id="product-core-image" {if $video}style="display:none"{/if}>
<div class="corner top right">
{$wa->shop->badgeHtml($product.badge)}
</div>
<a href="{$wa->shop->productImgUrl($product, '970')}">
{$wa->shop->productImgHtml($product, '750', [ 'itemprop' => 'image', 'id' => 'product-image', 'alt' => $product.name|escape ])}
</a>
<div id="switching-image" style="display: none;"></div>
</div>
{/if}
<!-- thumbs -->
{if count($product.images) > 1 || (count($product.images) === 1 && $video)}
<div class="more-images" id="product-gallery">
{if $video}
<div class="image video selected">
<a id="product-image-video" href="{$video.url}" class="swipebox">
<img src="{$video.images[0]}">
</a>
</div>
{/if}
{foreach $product.images as $image}
<div class="image{if $image.id == $product.image_id && empty($video)} selected{/if}">
<a id="product-image-{$image.id}" href="{$wa->shop->imgUrl($image, '970')}" class="swipebox">
{$wa->shop->imgHtml($image, '96x96')}
</a>
</div>
{/foreach}
</div>
{/if}
</figure>

1 ответ

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите