Magento 2 - Функция скользкого слайдера не работает

Slick slider функция не работает после ответа ajax, это порядок моего кода. Сначала я получил ответ о коллекции продуктов, а затем написал функцию скользкого слайдера. но функция слайдера не работает.

Это элемент dom в файле phtml, в котором появляется ответ ajax

<div class="category-products clearfix products wrapper grid products-grid">
    <ol class="products list items product-items featured-collector featured-collector_<?php echo $categoryid; ?>">
    </ol>
</div>

Это мой js-код

require([
    'jquery'
    ], function($){
    jQuery.ajax({
        url: "/manufacturerpages/index/collection",
        type: "POST",
        data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
        success: function (res) {
            //console.log(res);
            var result = jQuery('.product-items', res).html();
            var undefined = false;
            if(typeof result === 'undefined'){
                result = res;
                undefined = true;
            }

            jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
            jQuery(".landing-featured .ajax_loading").hide();
            jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
        }

    });
});

require([
    'jquery',
    'magiccart/slick',
        'alothemes'
    ], function($, slick){
    jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 2,
        arrows: true,
        autoplay: false,
        draggable: true,
        speed: 300
    });
});
Author: Muhammad Hasham, 2019-05-08
Source

2 answers

На самом деле одна из возможных причин, по которой он может работать неправильно, потому что вы не добавляете slick после ответа на успех ajax. Вам просто нужно заменить это своим js-кодом

require([
    'jquery',
    'magiccart/slick',
    'alothemes'
    ], function($, slick){
    jQuery.ajax({
        url: "/manufacturerpages/index/collection",
        type: "POST",
        data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
        success: function (res) {
            //console.log(res);
            var result = jQuery('.product-items', res).html();
            var undefined = false;
            if(typeof result === 'undefined'){
                result = res;
                undefined = true;
            }

            jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
            jQuery(".landing-featured .ajax_loading").hide();

            // ******This is your slick code***********
             jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
                    dots: false,
                    infinite: true,
                    slidesToShow: 6,
                    slidesToScroll: 2,
                    arrows: true,
                    autoplay: false,
                    draggable: true,
                    speed: 300
            });
            jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
        }

    });
});

Я надеюсь, что это поможет

 6
Author: Muhammad Hasham, 2019-05-08 10:05:40

Вполне вероятно, что ваш запрос AJAX завершается ПОСЛЕ инициализации слайдера, посмотрите, поможет ли добавление вашего Slick JS в ваш успешный обратный вызов:

require([
    'jquery'
    ], function($){
    jQuery.ajax({
        url: "/manufacturerpages/index/collection",
        type: "POST",
        data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
        success: function (res) {
            //console.log(res);
            var result = jQuery('.product-items', res).html();
            var undefined = false;
            if(typeof result === 'undefined'){
                result = res;
                undefined = true;
            }

            jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
            jQuery(".landing-featured .ajax_loading").hide();
            jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();

jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 2,
        arrows: true,
        autoplay: false,
        draggable: true,
        speed: 300
    });
        }
    });
});

Если это так, я рекомендую вам разделить свой JS на модули Require JS, а не вставлять его в шаблон, тогда вы можете разделить их и все равно вызвать его в своем обратном вызове успеха. Я рассматриваю JS внутри PHTML как плохую практику, это значительно усложняет обслуживание, и я думаю, что это предотвращает кэширование вашего JS.

 4
Author: Ben Crook, 2019-05-08 10:05:53