Как реализовать слайдер карусель товаров в 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
3 533
0

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

Павел Романов
19 марта 2016, 16:24
0
<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
    0
    Подключил но отображается пустой блог… тоесть один заголовок…
    Надо ли менять тут верстку tpl.msProducts.row2?
    Т.к использую стандартный код который шел изначально
      Павел Романов
      20 марта 2016, 12:15
      0
      Скопировал не глядя — pdoPage Вам тут совсем не нужен ).

      у Вас просто вызов:
      [[msProducts?
              &tpl=`tpl.msProducts.row2`
              &limit=`10`
              &parents=`8`
              &resources=`277,543,332,333`
      ]]

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

      Шаблон не просто можно, а нужно поменять. Скопировать tpl.msProducts.row2, переделать под свою верстку/дизайн/функционал, назвать его как-нибудь, например, product-item и прописать в вызове.
        Владислав
        20 марта 2016, 19:36
        0
        Да выводит товары,
        Но без карусели
          Павел Романов
          20 марта 2016, 20:44
          0
          Подставьте его вместо 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
            0
            да подключены, может я в чанке вертку не прописал хотя я добавлял как написано в документации…
              Здоров Александр
              25 апреля 2016, 20:12
              0
              у вас получилось реализовать? столкнулся с той же проблемой — но несколько иного рода: шаблон товара дополнительно оборачивает в
              div class="owl-item"
              и карусель перестает работать.
              просто ручками вставляю товар, отлично работает, едва заменяю на вызов msproduct как тут же доп оборачивание происходит…
                Здоров Александр
                25 апреля 2016, 20:40
                0
                А все получилось) оказался я дурак не хватило товаров для слайдера)
                понадоблюсь пишите, пришлю вам мой код
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      11