The best way to add a third-party JS plugins in Sage 10?

sage
1

After a simple yarn add package , how do you manage the integration of the file ?
Till now i’ve been enqueing scripts in setup.php file but i’m looking for a cleaner way to do it.

3

I found a way if it can helps others.

In app.js add import "slick-carousel/slick/slick.min"; for example

image
image890×292 26.8 KB

In app.css if the script has Css dependencies like Slick.js :

image
image1064×150 21 KB

3 Likes
4

Hello,

After the import, how do you use slick ?

I try your way but slick is missing :frowning:

5

Hey,

Slick slider is actually pretty old library and you need jQuery to work with it.
After import you have to initialize slider

for example:

function someSlider() {

  $('.slider__banner').slick({
    dots: true,
    infinite: true,
    slidesToShow: 1,
    fade: true,
    cssEase: 'linear',
    arrows: false,
    autoplay: true,
  });

}

someSlider()
6

:wave:t2: @Emilie

1/ You do your Html content as described in slick documentation :

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

You can use a class or an Id, whatever you want.

2/ Then you “activate” slick on that element with Javascript:

$('.your-class').slick({
  slidesToShow: 4,
  slidesToScroll: 4
});

… You can add Javascript in app.js file for example.

1 Like
7

If you’re going to use Slick, please consider using this fork that improves accessibility and automatically adds play/pause controls for any autoplaying slider.

1 Like
8

Thanks for the answer. But I know how to use slick.

The problem is that slick is always undefined even after import like in your screenshot :frowning:

image

image
image852×156 10 KB

9

Do you see slick package in node_modules/ ? in package.json ?

10

Yes I added slick in my depedencies : yarn add slick-carousel

And yes the package is in node_modules/ and package.json

11

This has happened to me before: did the script compile?

12

Yes the script compile

14

Just found the solution… I replaced $ by jQuery and it works :slight_smile:

15

I Thought about it, I tested it but I was not able to reproduce, great then :sunglasses:

Other solution :
Add to bud.config.js

    .provide({
      jquery: ["jQuery", "$"],
    });

You will be able to use $ without calling jQuery.

1 Like