На сегодняшний день функционал системы, к сожалению, не позволяет вывести только одно превью-изображение в шаблоне “вид товаров” модуля интернет-магазин. Безусловно, эту проблему можно решить при помощи нестандартного способа на языке JavaScript – GET-запросом на страницу товара. Однако это очень непродуманный способ, при котором возникает проблема, – если посетитель продолжительное время находится в вашем магазине и просматривает ассортимент, возникает огромный риск потерять этого клиента.
Поскольку посетитель "ходит" по страницам магазина, он фактически устраивает DDoS-атаку на ваш сайт, затем срабатывает система защиты и IP-адрес вашего потенциального клиента «блокируется» на определенный срок, тем самым закрывая доступ к вашему магазину. Это, своего рода, антинагрузочная система, которая вшита в систему и не отключается.
Дополнительные изображения можно использовать, например, интегрировав их в слайдер, либо сделав некое украшение, например – плавная смена изображения, что и используется в данном решении (см. видео).
Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Вид товаров в каталоге, в том месте где вы желаете видеть плавную смену с основного изображения на первое дополнительное, разместите код:
<div class="wrapper-hover">
<a<?if($OTHERN$>=1)?> class="product-image"<?endif?> href="$ENTRY_URL$">
<img alt="" src="$THUMB$" class="gphoto" id="$BLOCK_PREF$-gphoto-$ID$">
<?if($OTHERN$>=1)?>
<div class="img__2">
<img src="<?if(strpos($THUMB$,"/img/sh/nf.png")= -1)?>/_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$m_1.jpg<?else?>/.s/img/sh/nf.png<?endif?>" class="gphoto" id="$BLOCK_PREF$-gphoto-$ID$">
</div>
<?endif?>
</a>
</div>
Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS) и разместите код:
.wrapper-hover:after {
content: "";
display: table;
clear: both;
}
.wrapper-hover:hover {
box-shadow:0 0 16px rgba(0,0,0,0.11);
-moz-box-shadow:0 0 16px rgba(0,0,0,0.11);
-webkit-box-shadow:0 0 16px rgba(0,0,0,0.11);
}
.goods-list .product-image {
display: block;
text-align: center;
position: relative;
overflow: hidden;
}
.goods-list .product-image a {
display: block;
overflow: hidden;
position: relative;
}
.goods-list .product-image img {
background-color: #fff;
position: relative;
z-index: 1;
width: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.goods-list .product-image img:before {
content: '';
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.goods-list .product-image .img__2 {
width:100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.goods-list .product-image:hover>img{
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
opacity: 0;
}
.goods-list .product-image:hover .img__2{
opacity: 1;
top: 0;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.gphoto {
margin-bottom: 0 !important;
}
Итак, чтобы сделать определение, сколько изображений в том или ином товаре, мы воспользуемся дополнительным полем. Чтобы его выделить специально под это решение, перейдите в Панель управления » Интернет-магазин » настройки модуля. Напротив названия опции "Активировать следующее количество дополнительных полей у товаров" выберите на одно поле больше, запомните цифру которую выбрали.
Далее, в коде который указан на втором шаге, вместо N ($OTHERN$) – укажите номер дополнительного поля, который мы собираемся использовать. Затем, у каждого товара где изображений более 1, укажите цифру (сколько в товаре находится ДОПОЛНИТЕЛЬНЫХ изображений). То есть, если вы используете только одно фото (основное, которые выделено синей рамкой http://screencast.com/t/XDN1lCk0), то ничего в поле не указывайте. Однако если кроме него есть ещё изображения, начинайте отчет только дополнительных изображений, основную не учитывайте.
То есть, если у вас в товаре загружено в целом 5 изображений, то указывайте в дополнительном поле цифру 4, поскольку мы вычитаем одно основное изображение. Чуть ниже мы рассмотрим варианты этого взаимодействия.
Процесс "вытаскивания ссылок" достаточно прост, рассмотрим на примере-ссылки: /_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$m_1.jpg — выделенное красным цветом, пожалуй, самая важная часть, которую вы можете не опасаясь редактировать.
/_sh/ – стандартный путь к системной папке с изображениями. Скрытый, но можно "покопать" только в резервной копии сайта.
<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?> – определение ID-папки, в которой хранятся изображения конкретного товара. Переменную $THUMB$ не рекомендуется подменять на что-то иное.
$ID$ – ID-товара.
Цифра 1 – это второе изображение, а буква m — превью-изображение. Пример:
С буквой m перед номером – это превью-изображение маленького размера. Размеры превью обычно указываются в настройках модуля магазина, опция "Размеры (ширина/высота в пикселях) для превью изображения товара". Примеры:
<?if($OTHERN$>=1)?>/_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$_1.jpg<?endif?> <?if($OTHERN$>=2)?>/_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$_2.jpg<?endif?> <?if($OTHERN$>=3)?>/_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$_3.jpg<?endif?> <?if($OTHERN$>=4)?>/_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$_4.jpg<?endif?> <?if($OTHERN$>=5)?>/_sh/<?substr(substr($THUMB$,strpos($THUMB$,'/')+5,200),0,strpos(substr($THUMB$,strpos($THUMB$,'/')+5,200),'/'))?>/$ID$_5.jpg<?endif?>
В этом коде — если вы укажите в дополнительном поле цифру 4 (что может означать, что у вас четыре дополнительных изображения), то выведутся все ссылки на с 1 по 4 доп. изображения. Эти ссылки вы можете использовать в каком-нибудь слайдере, либо отобразить через тег img