4

Slick slider function is not working after ajax response, This is the order of my code. Firstly I got a product collection response, Then I wrote a slick slider function. but slider function is not working.

This is dom element in phtml file in which ajax response appear

<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>

This is my js code

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
    });
});
  • any console errors? – jafar pinjar May 8 at 10:00
  • There is no any error in my console. – Muhammad Anas May 8 at 10:01
  • where you are writing js code? in phtml or separate js file? – jafar pinjar May 8 at 10:03
5

Actually one of possible reason why it may not properly working because you don't add the slick after ajax success response. You just need to replace this, with your js code

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();
        }

    });
});

I hope this will help

  • let me try this, come back to you – Muhammad Anas May 8 at 10:08
  • Don't think it is as easy :) – Muhammad Anas May 8 at 10:14
  • @MuhammadAnas Adding to the answer, Might be take as future reference, In javascript code is execute sequentially, or line by line so in after Ajax call, request sent to the server but it not guarantee that result will come before next line of code execute, so better to wait for dependent code (in your case slick), so need to add code in success callback function which will execute after response came from server. – Kanhaiya lal May 10 at 6:31
4

It's likely your AJAX request is completing AFTER the slider is initialised, see if adding your Slick JS to your success callback helps:

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
    });
        }
    });
});

If so I recommend you split your JS up into Require JS modules rather than inlining it inside a template then you can keep them separate and still call it in your success callback. I see JS inside PHTML as a bad practice, it makes maintenance much harder and I think it prevents your JS from being cached.

  • your answer is also correct but I can mark anyone answer correct. Still +1 for your effort. Thanks :) – Muhammad Anas May 8 at 10:13
  • You're welcome :D – Ben Crook May 8 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.