Как выводить разные изображения в карточке товара?
Добрый день, имеется старенький интернет-магазин на версии Shop-Script (вероятно 4 версии), суть проблемы такова. Магазин замается продажей товаров, в которых от размера товара зависит внешний вид, соответственно при выборе размера - меняется фотография в карточке товара. Ранее на "чистой" версии это происходило как надо, но был минус, что нельзя было увеличить изображение, т.к. выводилось изображение среднего размера, а оригинал загружаемый на сервер - не использовался.
Вывели оригинал изображения и сделали всплывающее окно по клику. В итоге имеем увеличение изображения как хотелось бы, но при выборе размера не обновляется фотография, по умолчанию используется фотография первого размера в списке. Хотелось бы что бы при выборе - менялась картинка.
Код этот редактировался крайне давно и не осталось оригинала, т.к. ранее в магазине отсутствовали такие товары, которые внешне отличались бы из-за его размера/характеристик.
Итого хочется понять, как вернуть возможность отображения изображений в зависимости от выбранного размера, и не потерять всплывающее окно. Так-же желательно что бы использовался оригинал изображений, а не уменьшенные копии.
Код файла product_images.html
{if !$CPT_CONSTRUCTOR_MODE}
<link rel="stylesheet" href="{$smarty.const.URL_ROOT}/3rdparty/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="{$smarty.const.URL_ROOT}/3rdparty/highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = '{$smarty.const.URL_ROOT}/3rdparty/highslide/graphics/';
{*hs.registerOverlay(
{ldelim}
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
{rdelim}
);*}
hs.outlineType = 'rounded-white';
</script>
<a name="anch_current_picture"></a>
{if $product_info.picture}
{if !$printable_version&&$product_info.big_picture&&($product_info.picture_width>$smarty.const.CONF_PRDPICT_STANDARD_SIZE ||$product_info.picture_height>$smarty.const.CONF_PRDPICT_STANDARD_SIZE) }
<a class="image-link" href="{$smarty.const.URL_PRODUCTS_PICTURES}/{if $product_info.big_picture}{$product_info.big_picture|escape:'url'}{else}{$product_info.picture|escape:'url'}{/if}" rel="alternate" title="{$product_info.name|escape:'html'}" alt="{$page_title|escape:'html'}" style="outline: none">
<img itemprop="image" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{if $product_info.big_picture}{$product_info.big_picture|escape:'url'}{else}{$product_info.picture|escape:'url'}{/if}" alt="{$page_title|escape:'html'}" style="max-width: 430px; max-height: 430px; outline: none!important">
</a>
{else}
<img itemprop="image" id='img-current_picture' border='0' src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture|escape:'url'}" title="{$page_title|escape:'html'}" alt="{$page_title|escape:'html'}" >
{/if}
{else}
<img id='img-current_picture' border='0' src="{$URL_THEME_OFFSET}/images/str_2/no_foto.png" >
{/if}
{if $product_info.specialoffer == 1}<div class="specialoffer" title="Спецпредложение!"></div> {/if}
{if $product_info.new == 1}<div class="newoffer" title="Новинка">NEW</div> {/if}
{if $product_info.list_price && $product_info.list_price > $product_info.Price}
{assign var=sto value=100}
<span class="discount" title="Скидка: {$sto-$product_info.Price/$product_info.list_price*100|string_format:"%d"}%">- {$sto-$product_info.Price/$product_info.list_price*100|string_format:"%d"}%</span>
{/if}
{if false && $PAGE_VIEW eq 'mobile' && $m_all_product_pictures}
<table cellpadding="3" id="box_product_thumbnails">
{foreach from=$m_all_product_pictures item=_picture name=frpict}
<tr>
<td align="center"><a href='{$smarty.const.URL_PRODUCTS_PICTURES}/{if $_picture.enlarged}{$_picture.enlarged|escape:'url'}{else}{$_picture.filename|escape:'url'}{/if}' img_width="{$_picture.width}" img_height="{$_picture.height}" img_enlarged="{if $_picture.enlarged}{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.enlarged|escape:'url'}{/if}" img_picture="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.filename|escape:'url'}" target="_blank"><img src='{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.thumbnail|escape:'url'}' border='0' /></a></td>
</tr>
{/foreach}
</table>
{/if}
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onclick="return hs.previous(this)"></a>
<a href="#" class="next" onclick="return hs.next(this)"></a>
<a href="#" class="close" onclick="return hs.close(this)"></a>
</div>
{else}
<div style="text-align:center">
<img border=0 src="{$smarty.const.URL_DEMOPRD_IMAGES}/picture1.jpg" alt="{'demoprd_name'|transcape}">
<br>
<table align="center"><tr><td><img src="{$smarty.const.URL_IMAGES}/enlarge.gif"></td><td>
<a class="olive" href="#">{"str_enlarge_picture"|translate}</a>
</td></tr></table>
</div>
{/if}
1 ответ
Немного пошаманил и получил необходимый функционал (практически), теперь фото вновь меняется, поставил выводимому изображению id='img-current_picture', но проблема теперь в следующем: На странице товара отображается миниатюра, которая 300х300px, при условии что блок 470px. Ранее выводился оригинал изображения и адаптировался под размер блока. Каким образом в строке заставить выходить оригинал изображения, а не medium?
<img itemprop="image" id='img-current_picture' src="{$smarty.const.URL_PRODUCTS_PICTURES}/{if $product_info.big_picture}{$product_info.big_picture|escape:'url'}{else}{$product_info.picture|escape:'url'}{/if}" alt="{$page_title|escape:'html'}" style="max-width: 470px; max-height: 470px; outline: none!important">Текущий используемый код:
<!--Файл для редактирования изображения товара--> {if !$CPT_CONSTRUCTOR_MODE} <link rel="stylesheet" href="{$smarty.const.URL_ROOT}/3rdparty/highslide/highslide.css" type="text/css" /> <script type="text/javascript" src="{$smarty.const.URL_ROOT}/3rdparty/highslide/highslide.js"></script> <script type="text/javascript"> hs.graphicsDir = '{$smarty.const.URL_ROOT}/3rdparty/highslide/graphics/'; {*hs.registerOverlay( {ldelim} thumbnailId: null, overlayId: 'controlbar', position: 'top right', hideOnMouseOut: true {rdelim} );*} hs.outlineType = 'rounded-white'; </script> <a name="anch_current_picture"></a> {if $product_info.picture} {if !$printable_version&&$product_info.big_picture&&($product_info.picture_width>$smarty.const.CONF_PRDPICT_STANDARD_SIZE ||$product_info.picture_height>$smarty.const.CONF_PRDPICT_STANDARD_SIZE) } <a class="image-link" href="{$smarty.const.URL_PRODUCTS_PICTURES}/{if $product_info.big_picture}{$product_info.big_picture|escape:'url'}{else}{$product_info.picture|escape:'url'}{/if}" rel="alternate" title="{$product_info.name|escape:'html'}" alt="{$page_title|escape:'html'}" style="outline: none"> <img itemprop="image" id='img-current_picture' src="{$smarty.const.URL_PRODUCTS_PICTURES}/{if $product_info.big_picture}{$product_info.big_picture|escape:'url'}{else}{$product_info.picture|escape:'url'}{/if}" alt="{$page_title|escape:'html'}" style="max-width: 470px; max-height: 470px; outline: none!important"> </a> {else} <img itemprop="image" id='img-current_picture' border='0' src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture|escape:'url'}" title="{$page_title|escape:'html'}" alt="{$page_title|escape:'html'}" > {/if} {else} <img id='img-current_picture' border='0' src="{$URL_THEME_OFFSET}/images/str_2/no_foto.png" > {/if} {if $product_info.specialoffer == 1}<div class="specialoffer" title="Спецпредложение!"></div> {/if} {if $product_info.new == 1}<div class="newoffer" title="Новинка">NEW</div> {/if} {if $product_info.list_price && $product_info.list_price > $product_info.Price} {assign var=sto value=100} <span class="discount" title="Скидка: {$sto-$product_info.Price/$product_info.list_price*100|string_format:"%d"}%">- {$sto-$product_info.Price/$product_info.list_price*100|string_format:"%d"}%</span> {/if} {if false && $PAGE_VIEW eq 'mobile' && $m_all_product_pictures} <table cellpadding="3" id="box_product_thumbnails"> {foreach from=$m_all_product_pictures item=_picture name=frpict} <tr> <td align="center"><a href='{$smarty.const.URL_PRODUCTS_PICTURES}/{if $_picture.enlarged}{$_picture.enlarged|escape:'url'}{else}{$_picture.filename|escape:'url'}{/if}' img_width="{$_picture.width}" img_height="{$_picture.height}" img_enlarged="{if $_picture.enlarged}{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.enlarged|escape:'url'}{/if}" img_picture="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.filename|escape:'url'}" target="_blank"><img src='{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.thumbnail|escape:'url'}' border='0' /></a></td> </tr> {/foreach} </table> {/if} <div id="controlbar" class="highslide-overlay controlbar"> <a href="#" class="previous" onclick="return hs.previous(this)"></a> <a href="#" class="next" onclick="return hs.next(this)"></a> <a href="#" class="close" onclick="return hs.close(this)"></a> </div> {else} <div style="text-align:center"> <img border=0 src="{$smarty.const.URL_DEMOPRD_IMAGES}/picture1.jpg" alt="{'demoprd_name'|transcape}"> <br> <table align="center"><tr><td><img src="{$smarty.const.URL_IMAGES}/enlarge.gif"></td><td> <a class="olive" href="#">{"str_enlarge_picture"|translate}</a> </td></tr></table> </div> {/if}