Как выводить разные изображения в карточке товара?

Добрый день, имеется старенький интернет-магазин на версии 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 ответ

  • 1
    CherryPie1000 19 ноября 2017 10:21 #

    Немного пошаманил и получил необходимый функционал (практически), теперь фото вновь меняется, поставил выводимому изображению 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}

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

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