Создание слайдера с товарами на платформе InSales
Слайдер является удачным решением для размещения на ограниченной площади большого объема информации. В Инсейлс для его реализации удобно использовать скрытые категории в каталоге товаров или блоки. Все зависит от того, что вы хотите размещать в слайдере. Для примера мы разберем слайдер на основе скрытой категории.
Будем считать, что в слайдере мы хотим показать новинки магазина. Для его реализации нужно провести некоторую подготовительную работу. Для начала создадим скрытую категорию, назовем ее Новинки, отметим чекбокс Скрыть и в поле Путь напишем new.
Теперь нам надо добавить необходимые товары в эту категорию. Важно, что для слайдера, помимо основных картинок товара, нужно подготовить 2 дополнительные картинки определенного размера. Для примера возьмем такие размеры: основная картинка (размер 470×350 px) и превью (размер 40×80 px). Превью у нас состоит из 2х частей: верхняя — это часть для активной картинки, нижняя половина — для неактивной. На картинке выше можно увидеть как это выглядит. После того как загрузите картинки к товару для них в описании нужно прописать: для большой *, для маленькой ** (* и ** используются для того, чтобы в шаблоне можно было вывести нужные нам картинки).
Для вывода слайдера в шаблоне index.liquid используем следующий код:
<div class="slider">
<div class="img_preloader">{% for product in collections.new.products | limit: 10 %}<span style="background-image: url({% for image in product.images %}{% if image.title == '*' %}{{ image.original_url }}{% endif %}{% endfor %})"></span>{% endfor %}</div>
<ul class="images">
{% for product in collections.new.products | limit: 10 %}
<li id="v{{ forloop.index }}"{% if forloop.first %} class="img_active"{% else %} style="display: none;"{% endif %}><a href="{{ product.url }}" style="background-image: url({% for image in product.images %}{% if image.title == '*' %}{{ image.original_url }}{% endif %}{% endfor %})"></a></li>
{% endfor %}
</ul>
<div class="pre">
{% for product in collections.new.products | limit: 10 %}
<a href="{{ product.url }}" id="p{{ forloop.index }}"{% if forloop.first %} class="pre_active"{% endif %} rel="{{ forloop.index }}" style="background-image: url({% for image in product.images %}{% if image.title == '**' %}{{ image.original_url }}{% endif %}{% endfor %})"></a>
{% endfor %}
</div>
<div>В шаблоне используем 3 основных блока: <div class="img_preloader">, <ul class="images"> и <div class="pre">. В первый мы загружаем все большие картинки, т.к. в основном блоке с картинками для них прописано display: none; и они будут загружаться только тогда, когда поменяется на disply: block;, следовательно при переключении на новый слайд он отобразится не сразу. Используя блок img_preloader мы от этого избавимся, потому что все картинки уже будут загружены в кэш браузера.
Блок images — основной блок с картинками. В него мы отбираем все изображения помеченные *. В третий блок у нас загружаются превью для которого отбираются картинки помеченные **.
В css стилях пишем:
.slider {position: relative; width: 470px; height: 350px; overflow: hidden;}
.img_preloader {width: 0px; height: 0px; overflow: hidden;}
.images {position: relative; z-index: 9; width: 470px; height: 350px; overflow: hidden;}
.images LI {position: absolute; z-index: 1; top: 0px; right: 0px; width: 470px; height: 350px;}
.images LI.img_active {z-index: 2;}
.images A {display: block; width: 470px; height: 350px; background: #f4f4f4 0px 0px no-repeat;}
.pre {position: absolute; z-index: 10; left: 0px; bottom: 0px; width: 470px; height: 42px; padding: 7px 0px 7px 7px; background: rgba(0,0,0,0.7);}
.pre A {display: block; float: left; margin-right: 4px; width: 40px; height: 40px; background: #fff 0px -40px no-repeat; border: 1px solid #fff;}
.pre A:hover {background-position: 0px 0px;}
.pre A.pre_active {background-position: 0px 0px;}JavaScript код для вставки в шаблон index.liquid:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function() {
var slideSpeed = 10000; // задержка смены слайдов (10 секунд)
var slideAuto = window.setInterval(slideShowAuto, slideSpeed);
var count = 1;
var max = $('.images LI').size();
$('.pre A').click(function() {
slideShow($(this));
return false;
});
function slideShow(obj) {
if(max > 1){
if(obj.hasClass('pre_active') == false){
clearInterval(slideAuto);
count = obj.attr('rel');
var elHide = '#v'+$('.pre_active').attr('rel');
var elShow = '#v'+obj.attr('rel');
$(elHide).fadeOut(function(){
$(elHide).removeClass('img_active');
});
$(elShow).fadeIn(function(){
$(elShow).addClass('img_active');
});
$('.pre_active').removeClass('pre_active');
obj.addClass('pre_active');
slideAuto = window.setInterval(slideShowAuto, slideSpeed);
}
}else{
clearInterval(slideAuto);
}
}
function slideShowAuto(){
count++;
if(count > max){
count = 1;
}
slideShow($("#p"+count));
}
});
/*]]>*/
</script>По css и js коду пояснений ни каких не даю. Единственное, что в js можно поменять интервал смены слайдов slideSpeed. Остальное трогать не стоит. В качестве доработки текущего варианта можно вывести на слайд краткое описание, цену или любые другие данные конкретного товара. Все эти данные нужно выводить в блоке images между тегами <a...>ваш код здесь</a>.