Using RequireJS in Magento 2 (Implementing OWL slider)

By default, Magento 2 themes have a lot of built-in storefront features. We can further customize them via various JS libraries. Let me give you some info about adding custom JS library to new Magento 2 theme. Magneto 2 brings new feature called RequireJS. New Magetno 2 has better perceived page loading time through the RequireJS because it allows JavaScript to load in the background (asynchronous or “lazy” JS loading). Additional information you can find here.

Let’s look at OWL Slider and Cookicode/starter theme as an example. Cookicode/starter theme uses Luma parent theme.

First step is to download OWL slider and all the required libraries for it.

/app/design/frontend/Cookiecode/starter/web/js/

OWL

I’ve added some Style for OWL slider:

/app/design/frontend/Cookiecode/starter/web/css/source

OWL css

File “_owl.less” contains official css for OWL slider used in our example. Next step is to import “_owl.less” file in to “_theme.less”  file. We use file “_theme.less” due to Magneto 2 fallback mechanism. File will be merged and compiled with the same file name from the Luma theme.

Next step is to load sliders custom library. As you can see Magento 2 has a new approach to loading additional JS library called RequireJS.We need to create file “requirejs-config.js” and place it to theme’s root folder:

/app/design/frontend/Cookiecode/starter/requirejs-config.js

We need to define path for our custom component (custom JS library).

/app/design/frontend/Cookiecode/starter/web/js/jquery-1.11.js

jquery-1.11.js

Replace this code:

With this one:

Then, the similar changes we need to add in this file:

/app/design/frontend/Cookiecode/starter/web/js/owl-carousel/owlcarousel.js

owlcarousel.js

Do the replacement with this code:

 

With this step we have finished configuration of JS library.

Next step is creating custom container through the XML and call the slider into that container.

We need to create page layout file “1column.xml” and place it in this folder: /app/design/frontend/Cookiecode/starter/Magento_Theme/page_layout/1column.xml
In this file we’re going to add container named “top.slider”, the container will be shown after the container “page.top”.

 

Now we need to create slider block:

/app/design/frontend/Cookiecode/starter/Magento_Theme/templates/slider.phtml

Please pay attention to the “require([” part of this block. This way we define which libraries are required for our block/plugin.

 

Last step is to call the block inside the template. In this example I will call the block globally on complete theme:

/app/design/frontend/Cookiecode/starter/Magento_Theme/layout/default.xml

 

Finally, we need to remove “\pub\static” and “\var\” folders and execute commend through the console:

Magento static-content

Result: We’ve implemented OWL slider on all pages that use “1 column” page template. You can see here the layout:

OWL slider implmented on Magento 2 OWL slider implmented on Magento 2

Enjoy!

18 thoughts on “Using RequireJS in Magento 2 (Implementing OWL slider)”

    1. Hi David,

      there’s no reason. I just wanted to show how we can load external library through RequireJS. You can use there “jquery” default library. But thanks for question. :)

      1. You shouldn’t recommend using custom version of jQuery, b/c M2 might looks like M1 now – every 3rd party extension loads tons of libs without checking if they are currently available – which sucks 😉

  1. Hi Marko,
    This is a nice article. But i want to use jQuery in Magento lib. How can i do this? I am a newbie in Magento 2.
    Thank you.

  2. Hi,

    Great post! I also would like to know how I can use the default jQuery from Magento library instead of loading an external library.

  3. Using

    var config = {
    map: {
    ‘*’: {
    ‘cookiecode/jquery’: ‘js/jquery-1.11’,
    ‘owlcarousel’: ‘js/owl-carousel/owlcarousel’
    }
    }
    };

    didn’t work for me. Later I found that
    ‘cookiecode/jquery’: ‘js/jquery-1.11’,
    should be
    cookiecode/jquery: ‘js/jquery-1.11’,

  4. Changes to the code owlcarousel.js are required. Only create requirejs.
    var config = {
    paths: {
    owlcarousel: ‘js/owlcarousel.min’
    },
    shim: {
    owlcarousel: {
    deps: [‘jquery’]
    }
    }
    };
    This use original magento jquery.js
    “shim” – it indicates addiction.
    And this code in phtml or content home page call owlcarousel.js and jquery.js

    require([
    ‘jquery’,
    ‘owlcarousel’
    ], function ($) {
    jQuery(document).ready(function () {
    jQuery(“#owl-demo”).owlCarousel({
    navigation: true
    });
    });
    });

  5. I have noticed you don’t monetize your site, don’t waste your traffic, you can earn additional bucks every month because you’ve got hi quality content.
    If you want to know how to make extra money, search for: Mertiso’s tips best adsense alternative

  6. I have noticed you don’t monetize your blog, don’t waste your traffic, you can earn extra cash every month.
    You can use the best adsense alternative for any type of website
    (they approve all websites), for more details simply search in gooogle: boorfe’s tips monetize
    your website

Leave a Reply

Your email address will not be published. Required fields are marked *