Не корректно выводится слайдер через AjaxSnippet

Добрый день!

Не корректно выводится слайдер при загрузке через AjaxSnippet. Без AjaxSnippet все работает и отображается как положено. Подскажите пожалуйста решение.

Вывожу так:
[[!AjaxSnippet?
    &snippet=`pdoResources`
    &resources=`getTickets`
    &parents=`1893` 
    &limit=`10` 
    &includeTVs=`image`
    &tpl=`tpl.gallery.big`

]]
На выходе получаю это:
Денис
10 декабря 2020, 11:43
modx.pro
418
0

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

Alexey
10 декабря 2020, 12:38
0
Полагаю, что инициализация слайдера происходит в основном DOM -дереве, при событии document.ready. А тело слайдера грузится позже. Соответственно, скрипт инициализации не видит подгруженную разметку слайдера, ее просто нет в основном DOM-е.
    Alexey
    10 декабря 2020, 12:58
    0
    bezumkin.ru/sections/components/2557/

    Тут указано, что есть событие as_complete, которое происходит при загрузке ajaxSnippet. Попробуйте на это событие повесить инициализацию слайдера.

    $(document).on('as_complete', document, function(e,d) {
    	//код инициализации
    });
      Денис
      10 декабря 2020, 18:08
      0
      К сожалению не помогло

      $(document).on('as_complete', document, function(e,d) {
          slider_demo2.slick({
      	slidesToShow: 1,
      	slidesToScroll: 1,
      	arrows: false,
      	fade: true,
              asNavFor: '.slider_demo1'
          });
      });
        Alexey
        10 декабря 2020, 18:25
        0
        Ошибки есть в консоли браузера?
          Денис
          10 декабря 2020, 18:38
          0
          Ошибок нет
          Константин Ильин
          10 декабря 2020, 19:01
          0
          переменная slider_demo2 должна объявляется внутри этого кода, иначе slider_demo2 наверняка пустая.
            Денис
            10 декабря 2020, 21:49
            0
            Так выглядит вся инициализация главного слайдера и зависимого:

            if ($('.slider_demo2').length > 0) {
                        var slider_demo2 = $('.slider_demo2');
                        var slider_demo1 = $('.slider_demo1');
            			
            			$(document).on('as_complete', document, function(e,d) {
            				slider_demo2.slick({
            					slidesToShow: 1,
            					slidesToScroll: 1,
            					arrows: false,
            					fade: true,
            					asNavFor: '.slider_demo1'
            				});
            
            			});
            			
                        slider_demo1.slick({
                            slidesToShow: 7,
                            slidesToScroll: 1,
                            asNavFor: '.slider_demo2',
                            dots: false,
                            prevArrow: "<div class='slider_arrow arrow_left'><i class='fal fa-angle-left'></i></div>",
                            nextArrow: "<div class='slider_arrow arrow_right'><i class='fal fa-angle-right'></i></div>",
                            centerMode: true,
                            focusOnSelect: true,
                            responsive: [{
                                breakpoint: 10000,
                                settings: {
                                    slidesToShow: 7,
                                    slidesToScroll: 1,
                                    infinite: true,
                                }
                            }, {
                                breakpoint: 1300,
                                settings: {
                                    slidesToShow: 6,
                                    slidesToScroll: 1,
                                    infinite: true,
                                }
                            }, {
                                breakpoint: 1024,
                                settings: {
                                    slidesToShow: 7,
                                    slidesToScroll: 1,
                                    infinite: true,
                                }
                            }, {
                                breakpoint: 600,
                                settings: {
                                    slidesToShow: 3,
                                    slidesToScroll: 1
                                }
                            }, {
                                breakpoint: 480,
                                settings: {
                                    slidesToShow: 2,
                                    slidesToScroll: 1
                                }
                            }]
                        });
                    }
              Константин Ильин
              10 декабря 2020, 22:50
              0
              Поясняю

              var slider_demo2 = $('.slider_demo2');
              var slider_demo1 = $('.slider_demo1');

              эти две строчки как бы принимают объекты, но т.к. у вас из-за ajaxsnippet нет объектов $('.slider_demo2'); и $('.slider_demo1'); их физечески не существует при загрузке страницы, то переменные пусты или не объявлены. Соответственно, присвоение эти переменных должно происходить в as_complete, т.е. когда ajaxsnippet загрузит данные и в странице появится slider_demo2.

              Более того ваше первое условие
              if ($('.slider_demo2').length > 0) {

              Говорит о том что если такого объекта slider_demo2 не существует, то не выполнять этот код.

              Надеюсь тут все ясно станет.
        Alexey
        11 декабря 2020, 00:06
        0
        Накидал на тестовом сайте

        вызов сниппета:
        [[AjaxSnippet?
              &snippet=`my_slider`
              &as_mode=`onload`
        ]]

        Чанк, который отдает сниппет my_slider:
        <div class="slider single-item">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>

        Код в футере:
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="vendor/js/slick-theme.css"/>
        <link rel="stylesheet" type="text/css" href="vendor/js/slick.css"/>
        <script src="vendor/js/slick.js"></script>
        
        <script>
            $(document).on('as_complete', document, function(e,d) {
            	$('.single-item').slick();
            });
        </script>

        Всё прекрасно отрабатывает на тестовом варианте. Значит, осталось разобраться, что именно нужно инициализировать на событие as_complete, как выше написал Константин.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          9