1
Расмотрим пример с категорией "Товары на главной". (У каждой категории свои переменные...)
В файле "html".
После кода:
<div class="btn-toolbar">
<!-- Если товара нет в наличие и в настройках отключена возможность класть -->
{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE==0 %}
<div class="tovar-available fnt11 fntupcase aunder">
<a href="#" rel="false" class="catalog-available-false" >
<div class="stikno">Товара нет в наличии</div>
</a>
</div>
{%ELSE%}
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
<div class="btnToCart">
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
<a class="btn btn-success toCart" onclick="addItem('.index_page_goods #goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}');
return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить «{index_page_goods.NAME}» в корзину">
<span class="basket_add"></span>
</a>
</div>
<div class="numeric input-prepend input-append btn-group">
<a class="js-minus btn minus">
<i class="icon-minus">
-
</i>
</a>
<input type="number" name="form[goods_mod_quantity]" class="quantity" min="1" max="999" step="1" value="1" title="Количество" />
<a class="js-plus btn plus">
<i class="icon-plus">
+
</i>
</a>
</div>
</form>
{% ENDIF %}
</div>
</div>
</div>
</div>
{% ENDFOR index_page_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>
Добавить код:
<div class="customNavigation my">
<a class="btn prev" title="Назад"></a>
<a class="btn next" title="Вперед"></a>
</div>
<script>
$(document).ready(function() {
var owl = $(".index_page_goods .blockTableTovarIndexPage");
owl.owlCarousel({
items : 4, //количество плиток
autoPlay: 4000 // скорость прокрутки
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
});
$(".prev").click(function(){
owl.trigger('owl.prev');
});
});
</script>
Добавить в конец файла "main.css" код:
.blockIndexPage .owl-wrapper-outer {
max-width: none;
}
.customNavigation.my {
position: relative;
margin-bottom: -40px;
height: 40px;
bottom: 0;
width: 100%;
overflow: visible;
opacity: 0.5;
}
.index_page_goods .menu-item {
width: 90%;
}
.my .next, .my .prev {
position:relative;
bottom:235px;
background: url('{ASSETS_IMAGES_PATH}sprites.png') no-repeat -305px -0.5%;
height: 30px;
width: 5px;
background-color: #4E6D8D;
}
.my .prev {
float: left;
background-position-x: -277px;
left: 1px;
}
.my .next {
float: right;
background-position-x: -315px;
}
.customNavigation.my:hover {
opacity: 0.5;
}
.my .next:hover, .my .prev:hover {
opacity: 1;
background-color: #0E4277;
}
.index_page_goods .menu-item-icon {
right: 8%;
}
