Переинициализация скрипта при срабатывании lazyloading Есть решение

Кто подскажет как инициализировать Slick Slider на странице категории после срабатывания lazyloading в теме Default?

Вот так в js инициализируется слайдер:

$('.products-list .item .salesku-feature-select').slick({
      infinite:false,
      slidesToShow: 4,
      arrows: true,
      prevArrow: "<i class="fa fa-angle-left"></i>",
      nextArrow: "<i class="fa fa-angle-right"></i>",
      slidesToScroll: 3
    });

но после срабатывания фильтров или lazyloading на странице категории, слайдер перестает работать...

4 ответа

  • 1
    Максим 13 октября 2018 02:56 # Решение

    Для тех, у кого такая же проблема будет с инициализацией, вот решение:

    1. Для реинициализации slick slider после срабатывания фильтров, необходимо слайдер заново инициализировать после строки:

    $('#product-list').html(tmp.find('#product-list').html());

    2. Для повторной инициализации Slick slider, после срабатывания lazyloading, нужно в функции if ($.fn.lazyLoad) перед 

    loading.show();

    вставить строку

    $('.slider').slick('unslick');

    а затем инициализировать слайдер повторно, вставив вызов слайдера после: 

    loading.hide();

    Спасибо всем за помощь!!!

  • 1
    Максим 11 октября 2018 07:01 #

    Вот сам код отвечающий за вывод фильтра и lazyloading, нашел вроде бы даже как переинициализировать слайдер: 

    перед фильтрацией и срабатывания lazyloading прописать:

    $('.slider-products').slick('unslick'); 

    и после

    $('.slider-products').slick(); 

     Но куда вписать я не понимаю, может кто разберется?

    //PRODUCT FILTERING
        var f = function () {
    
            var ajax_form_callback = function (f) {
                var fields = f.serializeArray();
                var params = [];
                for (var i = 0; i < fields.length; i++) {
                    if (fields[i].value !== '') {
                        params.push(fields[i].name + '=' + fields[i].value);
                    }
                }
                var url = '?' + params.join('&');
                $(window).lazyLoad && $(window).lazyLoad('sleep');
                $('#product-list').html('<img src="' + f.data('loading') + '">');
                $.get(url+'&_=_', function(html) {
                    var tmp = $('<div></div>').html(html);
                    $('#product-list').html(tmp.find('#product-list').html());
                    if (!!(history.pushState && history.state !== undefined)) {
                        window.history.pushState({}, '', url);
                    }
                    $(window).lazyLoad && $(window).lazyLoad('reload');
                });
            };
            
            $('.filters.ajax form input').change(function () {
                ajax_form_callback($(this).closest('form'));
            });
            $('.filters.ajax form').submit(function () {
                ajax_form_callback($(this));
                return false;
            });
    
            $('.filters .slider').each(function () {
                if (!$(this).find('.filter-slider').length) {
                    $(this).append('<div class="filter-slider"></div>');
                } else {
                    return;
                }
                var min = $(this).find('.min');
                var max = $(this).find('.max');
                var min_value = parseFloat(min.attr('placeholder'));
                var max_value = parseFloat(max.attr('placeholder'));
                var step = 1;
                var slider = $(this).find('.filter-slider');
                if (slider.data('step')) {
                    step = parseFloat(slider.data('step'));
                } else {
                    var diff = max_value - min_value;
                    if (Math.round(min_value) != min_value || Math.round(max_value) != max_value) {
                        step = diff / 10;
                        var tmp = 0;
                        while (step < 1) {
                            step *= 10;
                            tmp += 1;
                        }
                        step = Math.pow(10, -tmp);
                        tmp = Math.round(100000 * Math.abs(Math.round(min_value) - min_value)) / 100000;
                        if (tmp && tmp < step) {
                            step = tmp;
                        }
                        tmp = Math.round(100000 * Math.abs(Math.round(max_value) - max_value)) / 100000;
                        if (tmp && tmp < step) {
                            step = tmp;
                        }
                    }
                }
                slider.slider({
                    range: true,
                    min: parseFloat(min.attr('placeholder')),
                    max: parseFloat(max.attr('placeholder')),
                    step: step,
                    values: [parseFloat(min.val().length ? min.val() : min.attr('placeholder')),
                        parseFloat(max.val().length ? max.val() : max.attr('placeholder'))],
                    slide: function( event, ui ) {
                        var v = ui.values[0] == $(this).slider('option', 'min') ? '' : ui.values[0];
                        min.val(v);
                        v = ui.values[1] == $(this).slider('option', 'max') ? '' : ui.values[1];
                        max.val(v);
                    },
                    stop: function (event, ui) {
                        min.change();
                    }
                });
                min.add(max).change(function () {
                    var v_min =  min.val() === '' ? slider.slider('option', 'min') : parseFloat(min.val());
                    var v_max = max.val() === '' ? slider.slider('option', 'max') : parseFloat(max.val());
                    if (v_max >= v_min) {
                        slider.slider('option', 'values', [v_min, v_max]);
                    }
                });
            });
        };
        f();
    
        //LAZYLOADING
        if ($.fn.lazyLoad) {
            
            var paging = $('.lazyloading-paging');
            if (!paging.length) {
                return;
            }
    
            var times = parseInt(paging.data('times'), 10);
            var link_text = paging.data('linkText') || 'Load more';
            var loading_str = paging.data('loading-str') || 'Loading...';
    
            // check need to initialize lazy-loading
            var current = paging.find('li.selected');
            if (current.children('a').text() != '1') {
                return;
            }
            paging.hide();
            var win = $(window);
            
    
            // prevent previous launched lazy-loading
            win.lazyLoad('stop');
            
            
    
            // check need to initialize lazy-loading
            var next = current.next();
            if (next.length) {
                
                win.lazyLoad({
                    container: '#product-list',
                    load: function () {
                        
                        win.lazyLoad('sleep');
    
                        var paging = $('.lazyloading-paging').hide();
    
                        // determine actual current and next item for getting actual url
                        var current = paging.find('li.selected');
                        var next = current.next();
                        var url = next.find('a').attr('href');
                        if (!url) {
                            win.lazyLoad('stop');
                            return;
                        }
    
                        var product_list = $('#product-list');
                        var loading = paging.parent().find('.loading').parent();
                        if (!loading.length) {
                            loading = $('<div><i class="icon16 loading"></i>'+loading_str+'</div>').insertBefore(paging);
                        }
    
                        loading.show();
                        $.get(url, function (html) {
                            var tmp = $('<div></div>').html(html);
                            if ($.Retina) {
                                tmp.find('#product-list img').retina();
                            }
                            product_list.append(tmp.find('#product-list').children());
                            var tmp_paging = tmp.find('.lazyloading-paging').hide();
                            paging.replaceWith(tmp_paging);
                            paging = tmp_paging;
    
                            times -= 1;
    
                            // check need to stop lazy-loading
                            var current = paging.find('li.selected');
                            var next = current.next();
                            if (next.length) {
                                if (!isNaN(times) && times <= 0) {
                                    win.lazyLoad('sleep');
                                    if (!$('.lazyloading-load-more').length) {
                                        $('<a href="#" class="lazyloading-load-more">' + link_text + '</a>').insertAfter(paging)
                                            .click(function () {
                                                loading.show();
                                                times = 1;      // one more time
                                                win.lazyLoad('wake');
                                                win.lazyLoad('force');
                                                return false;
                                            });
                                    }
                                } else {
                                    win.lazyLoad('wake');
                                }
                            } else {
                                win.lazyLoad('stop');
                                $('.lazyloading-load-more').hide();
                            }
    
                            loading.hide();
                            tmp.remove();
                        });
                        
                    }
                });
            }
            
        }

  • 1
    $('#product-list').html(tmp.find('#product-list').html());

    • +1
      Максим Максим 11 октября 2018 08:51 #

      Пробовал оборачивать эту строку, но что-то не получается...

      • +1

        попробуйте так

                    $(window).lazyLoad && $(window).lazyLoad('sleep');
                    $('.slider-products').slick('unslick');
                    $('#product-list').html('<img src="' + f.data('loading') + '">');
                    $.get(url+'&_=_', function(html) {
                        var tmp = $('<div></div>').html(html);
                        $('#product-list').html(tmp.find('#product-list').html());
                        $('.slider-products').slick();
                        if (!!(history.pushState && history.state !== undefined)) {
                            window.history.pushState({}, '', url);
                        }
                        $(window).lazyLoad && $(window).lazyLoad('reload');
                    });

        как вариант, $('.slider-products').slick(); оберните в setTimeout, с небольшой задержкой 100-300, чтобы сначала tmp успело встроиться в страницу и потом уже запустился slick()

        • +1
          Максим Максим 11 октября 2018 09:06 #

          Нет, к сожалению и так тоже не выходит...

          • +1

            это я протупил, речь же о lazyloading, а не о фильтрации была...

            • +1
              Максим Максим 12 октября 2018 12:45 #

              Да, речь была и о Lazyloading и о фильтрах. После срабатывания фильтра удалось запустить slick slider инициализировав его после:

              $('#product-list').html(tmp.find('#product-list').html());

              А вот инициализировать его после срабатывания lazyloading, не получается...

              • +1

                По идее, вам правильно подсказали что перед/после loading.hide(); его инициализировать.
                Только сначала перед/после loading.show(); делайте $('.slider-products').slick('unslick');
                Возможно это поможет. Это будет убирать и снова накладывать этом слайдер на все элементы. И старые и вновь загруженные.
                Если у вас к концу пролистывания будет много товаров, то могут начаться проблемы.
                Возможно стоит всё таки перейти на пагинацию?

                Точнее уже подсказать не смогу - надо самому ковырять, а делать этого не хочется -)

                • +1
                  Максим Максим 13 октября 2018 02:45 #

                  Спасибо, помогло добавить

                  $('.slider-products').slick('unslick');

                  перед

                  loading.show()

      • +1

        что значит оборачивать? Вы должны инициализировать слайдер, вставлять вызов слайдера после этой строки 

  • 1

    А не проще вынести этот слайдер из этого класса выше, и тогда lazyload не будет никак влиять на работу скрипта, вне своего контейнера

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите