Turbo framework

Need Help
#1

Hi,

I have a question about turbo framework.

I init a carousel like below:

function initHomepageCarousel() {
    $(".yuppiCarousel").slick({
        lazyLoad: "ondemand",
        autoplay: true,
        dots: false,
        arrows: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
        prevArrow: ".yuppiCarouselLeftArrow",
        nextArrow: ".yuppiCarouselRightArrow",
    });
}

$(document).on("render", function () {
    initHomepageCarousel();
});

But when I naviage to the specific page where carousel is, a I got the following error in browser’s console. So does not init the carousel. After five times navigation I have this error 23 times.

image

I followed the code like in the Demo theme’s theme-leader.js

image
image778×209 8.29 KB

I really aprecciate if anyone could help me

Thanks,
Zs

#2

Try using hot controls

Here is an example:

oc.registerControl('yuppi-carousel', class extends oc.ControlBase {
    connect() {
        this.$el = $(this.element);
        this.connectSlick();
    }

    disconnect() {
        this.$el.slick('unslick');
        this.$el = null;
    }

    connectSlick() {
        this.$el.slick({
            lazyLoad: "ondemand",
            autoplay: true,
            dots: false,
            arrows: true,
            infinite: true,
            speed: 1000,
            slidesToShow: 1,
            slidesToScroll: 1,
            prevArrow: ".yuppiCarouselLeftArrow",
            nextArrow: ".yuppiCarouselRightArrow",
        });
    }
});

Then render it with:

<div data-control="yuppi-carousel"> ...  </div>

I hope this helps!

#3

@daft what could be the probleme?

Why runs a lot of time the js codes?

image
image991×451 35.8 KB 

oc.registerControl(
    "yuppi-carousel",
    class extends oc.ControlBase {
        connect() {
            this.$el = $(this.element);
            this.connectSlick();
            console.log("slick yuppi-carousel");
        }

        disconnect() {
            this.$el.slick("unslick");
            this.$el = null;
            console.log("unslick yuppi-carousel");
        }

        connectSlick() {
            this.$el.slick({
                lazyLoad: "ondemand",
                autoplay: true,
                dots: false,
                arrows: true,
                infinite: true,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
                prevArrow: ".yuppiCarouselLeftArrow",
                nextArrow: ".yuppiCarouselRightArrow",
            });
        }
    }
);
#4

This happens because of the turbo snapshot. You can disable it if you like, but in most cases its not really a problem.

When you click a link that has been visited before:

  1. A cached snapshot is rendered
  2. Hot controls will initialize (1)
  3. The page is requested
  4. The latest page is rendered
  5. Hot controls will initialize (2)