Как реализовать слайдер карусель товаров в MS2

Сам исходник, но не пойму как подключить карусель товаров.

<div class="liders">
<h3><b>Лидеры продаж <hr style="height:2px;"></b></h3>
[[!pdoPage?
  &element=`msProducts`
  &tpl=`tpl.msProducts.row2`
  &limit=`10`
  &parents=`8`
  &resources=`277,543,332,333`
  &sortby=``
]] 
</div>

Хочу подключить
smashingboxes.github.io/OwlCarousel2/demos/basic.html
Но никак не получается

Владислав

19 марта 2016, 09:41

3 524

Комментарии: 11

Павел Романов

19 марта 2016, 16:24

<link href="assets/css/owl.carousel.css" rel="stylesheet" />
<script src="assets/js/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        //тут нужные опции
    });
});
</script>

<div class="liders">
    <h3>Лидеры продаж</h3>
    <hr style="height:2px;">
    <div class="owl-carousel">
        [[!pdoPage?
        &element=`msProducts`
        &tpl=`tpl.msProducts.row2`
        &limit=`10`
        &parents=`8`
        &resources=`277,543,332,333`
        &sortby=``
        ]] 
    </div>
</div>

Естественно, должен подключаться jQuery + пути к скрипту и стилям укажите свои.

Владислав

20 марта 2016, 12:03

Подключил но отображается пустой блог… тоесть один заголовок…
Надо ли менять тут верстку tpl.msProducts.row2?
Т.к использую стандартный код который шел изначально

Павел Романов

20 марта 2016, 12:15

Скопировал не глядя — pdoPage Вам тут совсем не нужен ).

у Вас просто вызов:

[[msProducts?
        &tpl=`tpl.msProducts.row2`
        &limit=`10`
        &parents=`8`
        &resources=`277,543,332,333`
]]

что-нибудь выводит?

Шаблон не просто можно, а нужно поменять. Скопировать tpl.msProducts.row2, переделать под свою верстку/дизайн/функционал, назвать его как-нибудь, например, product-item и прописать в вызове.

Владислав

20 марта 2016, 19:36

Да выводит товары,
Но без карусели

Павел Романов

20 марта 2016, 20:44

Подставьте его вместо pdoPage.

<link href="assets/css/owl.carousel.css" rel="stylesheet" />
<script src="assets/js/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        //тут нужные опции
    });
});
</script>

<div class="liders">
    <h3>Лидеры продаж</h3>
    <hr style="height:2px;">
    <div class="owl-carousel">
[[msProducts?
   &tpl=`tpl.msProducts.row2`
   &limit=`10`
   &parents=`8`
   &resources=`277,543,332,333`
]]
    </div>
</div>

Все опции прописаны, jQuery подключен, в консоли ошибок нет?

Владислав

20 марта 2016, 21:35

да подключены, может я в чанке вертку не прописал хотя я добавлял как написано в документации…

Здоров Александр

25 апреля 2016, 20:12

у вас получилось реализовать? столкнулся с той же проблемой — но несколько иного рода: шаблон товара дополнительно оборачивает в

div class="owl-item"

и карусель перестает работать.
просто ручками вставляю товар, отлично работает, едва заменяю на вызов msproduct как тут же доп оборачивание происходит…

Здоров Александр

25 апреля 2016, 20:40