Как реализовать слайдер карусель товаров в 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
modx.pro
4 037

Комментарии: 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
                А все получилось) оказался я дурак не хватило товаров для слайдера)
                понадоблюсь пишите, пришлю вам мой код
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      11