How to use third-party Javascript Plugins in Magento 2

var config = { paths: { 'owlcarousel' }, shim: { 'owlcarousel': { 'deps': ['jquery'] } } };

The “paths” configuration let you use a alias name “owlcarousel” for the JS file, and the “shim” configuration let you define the dependencies, jQeury in this case.

The file structure will be:

Now you can use it in a template. There’re two methods to call and initialize the carousel plugin:

Method 1 Imperative notation:

In your template where you want to use the carousel, you can call the library by

< div class="owl-carousel" > < div > Your content < / div > < div > Your content < / div > < div > Your content < / div > < / div >   < script type="text/javascript" > requirejs(['jquery','owlcarousel'], function($, owl){ $('.selector-of-your-element').owlCarousel({ 'option1': 'value1', 'option2': 'value2' }); });

Please note here, the order of the dependencies’ names listed inside of requirejs([…] does not guarantee the files’ loading order, because RequireJS loads JS files asynchronously. That’s why it’s necessary to do the “shim” configuration in the requirejs-config.js in the previous step to make sure jQuery loads before the plugin.

Method 2 Declarative notation:

This method looks a little more complicated, but it helps to avoid generating Javascript directly with PHP so that we get cleaner code and better maintainability.

First you need to create a Javascript component app/design/frontend/Your_Vendor /Your_Theme/web/js/slider.js, with the follwoing code in it:

define([ 'jquery', 'owlcarousel' ], function ($, owl) { return function(config, node) { $(function () { $(node).owlCarousel({ // choose the options you need items: config.items, slideBy: config.slideBy, loop: config.loop, dots: config.dots, nav: config.nav, autoplay: config.autoplay, autoplayTimeout: config.autoplayTimeout, autoplayHoverPause: true, rewind: config.rewind, responsive: config.responsive }) }); }; });

Then in your template, you can initiate this component by 2 ways:

1.Using the data-mage-init attribute:

< div class="owl-carousel" > "js/slider": { "option1": "value1", "option2": "value2" }'> < div > Your content < / div > < div > Your content < / div > < div > Your content < / div > < / div >

2. Using the <script type=”text/x-magento-init” /> tag:

< div class="owl-carousel" > < div > Your content < / div > < div > Your content < / div > < div > Your content < / div > < / div >   < script type="text/x-magento-init" > { ".selector-of-your-element": { "js/slider": { "option1": "value1", "option2": "value2" } } } < / script >

In both ways, you pass to the server the target DOM node and a JSON object with the JS component you want to use as the key and the options/values you want to configure as the value. Magento 2 will retrieve the information and pass them as arguments (config, node) to the JS component …/js/slider.js, and excute the code accordingly.

Now we know how to use the Owl Carousel in Magento 2, let’s try to use it for magento’s category product list widget:
Copy the file vendor/magento/module-catalog-widget/view/frontend/templates/product /widget/content/grid.phtml under app/design/frontend/Shero/pp-base/Magento_CatalogWidget/templates /product/widget/content . Let’s rename the template as

grid-slider.phtml so that we still have the option to use the original grid.phtml template.

Find this code ( line42) <ol class=”product-items <?php /* @escapeNotVerified */ echo $type; ?>”>. Edit it as:

< ol class="owl-carousel product-items < ?php /* @escapeNotVerified */ echo $type; ?> data-mage-init='{"js/slider":{ "slideBy": "page", "nav": "true", "rewind": "true", "dots": "false", "responsive" : {"0" : { "items": 1 }, "480" : { "items": 2 }, "768" : { "items": 4 } }}' >

 

Now we go to admin > Content > Blocks to create a new block, in this new block we insert category product list widget

After configuring the options and inserting the widget, the block content looks something like this

Change the template to our new one:

If you have a question about using third-party Javascript plugins on your Magento 2 project, feel free to comment here and we will respond right away.