Magento2 adding 3rd party jQuery files to module

Question

I am trying to add in some 3rd party jQuery code to my Magento2 module. I want to have my own custom js file that will use the 3rd party code. Before I was adding the code into the header instead of using Magneto2's requireJS structure. I am not sure of the proper way to add in the files. The third party js file= slick.js and my custom js file= configurator.js.

I was under the impression that you are supposed to add a script type="text/x-magento-init" in the template in which you add your custom js file in (I am note sure what to put here). Followed by adding a shim and path config for the 3rd part js in the require-config.js.

My file structure:

some of my code:

my custom js file:

require(['jquery','slick'], function($){
    $(function(){
        $('.main-gallery').slick();
    });
});

my requirejs-config.js

var config = {
    map: {
        "*": {
            slick: 'Briteskies_ProductConfigurator/js/slick-1.5.7/slick'
        }
    },
    paths: {
        "slick": 'js/slick-1.5.7/slick'
    },
    "shim": {
        "slick" : ["jquery"]
    }
};

Any input would be great, thanks!

Answer 1

1. Create Your Component

Assuming the path to your component is Briteskies_ProductConfigurator/js/configurator.js, use the contents below. Notice the return function gets a config and element parameter.

The config parameter will contain options that you define when initializing the component from your template.

The element parameter will be a reference to the DOM object you target when initializing the component from your template:

define([
    'jquery',
    'slick'
], function ($) {
    return function(config, element) {
        var speed = config.autoplaySpeed;

        // When document is ready
        $(function () {
            $(element).slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                dots: false,
                autoplay: true,
                autoplaySpeed: speed
            })
        });
    };
});

2. Map Your Component (Make it available to requirejs)

In your module's requirejs-config.js file, define a configurator component and point to its path. I've omitted your other code to see only the changes to be added:

var config = {
    map: {
        "*": {
            configurator: 'Briteskies_ProductConfigurator/js/configurator'
        }
    }
};

3. Initialize Component From Your Template

In the template that will hold the content needing the slick slider, you can target an element and specify which component to use.

The DOM object(s) that the ".main-gallery" key below matches gets passed as the element parameter mentioned in Step 1.

The json object defined after the "configurator" key below gets passed as the config parameter mentioned in Step 1.

Bonus: If you are using your own Block for the template, you could fetch system configuration values and make them available to your component (say for toggling autoplay speed, whether to use arrows, slides to show, etc...):

<script type="text/x-magento-init">
{
     ".main-gallery" : {
        "configurator" : {
            "autoplaySpeed": 5000
        }
     }
}
</script>

Answer 2

For my custom theme I included Slick too, it does work and my code is not very different than yours. For my theme I did the following:

Placed requirejs-config.js in the root of my theme folder. Requirejs-config.js looks like:

var config = {
    paths: {
        slick: 'js/vendor/jquery/slick.min'
    }
};

Then in my main.js I added:

require(['jquery', 'slick'], function($){
    $(function(){
        // Custom code here
    });
});

Maybe my approach helps you.

Answer 3

It is shown in the documentation how to use slick:

To include a 3rd party library and use it within the entire website (using the Slick JS Library as an example):

Download the library and copy slick.min.js to the <theme_path>/web/js folder

Copy slick.less and slick-theme.less to the <theme_path>/web/css/source folder. Also add both files to

<theme_path>/web/css/source/_extend.less

@import "slick.less";
@import "slick-theme.less";

Create or update the theme’s requirejs-config.js file.

<theme_path>/requirejs-config.js

var config = {
 paths: {
     slick: 'js/slick.min'
 },
 shim: {
     slick: {
         deps: ['jquery']
     }
   }
};

After these steps, clear the cache and perform a static content deployment.

Result

We should now be able to use the Slick library, for example, on any list that we want to convert into a slider.

<ul class="my-list">
    <li>1st Element</li>
    <li>2nd Element</li>
    <li>3rd Element</li>
    <li>4th Element</li>
    <li>5th Element</li>
    <li>6th Element</li>
    <li>7th Element</li>
    <li>8th Element</li>
</ul>

<script>
   require([
      'jquery',
      'slick',
      'domReady!'
   ], function ($) {
      $(".my-list").slick({
         dots: true,
         infinite: true,
         speed: 300,
         slidesToShow: 4,
         slidesToScroll: 1
      });
   });
</script>