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/
I’ve added some Style for OWL slider:
/app/design/frontend/Cookiecode/starter/web/css/source
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
|
1 2 3 4 5 6 7 8 |
var config = { map: { '*': { 'cookiecode/jquery': 'js/jquery-1.11', 'owlcarousel': 'js/owl-carousel/owlcarousel' } } }; |
We need to define path for our custom component (custom JS library).
/app/design/frontend/Cookiecode/starter/web/js/jquery-1.11.js
Replace this code:
|
1 2 3 4 5 6 7 8 9 10 |
(function( global, factory ) { if ( typeof module === "object" && typeof module.exports === "object" ) { .... /* other content */ .... return jQuery; })); |
With this one:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
define([], function() { (function(global, factory) { if (typeof module === "object" && typeof module.exports === "object") { .... /* other content */ .... return jQuery; })); return jQuery.noConflict(true); }); |
Then, the similar changes we need to add in this file:
/app/design/frontend/Cookiecode/starter/web/js/owl-carousel/owlcarousel.js
|
1 2 3 4 5 6 7 8 9 10 |
.... (function ($, window, document) { var Carousel = { .... /* other content */ .... }; }(jQuery, window, document)); |
Do the replacement with this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.... define([ 'cookiecode/jquery', ], function ($, window, document) { var Carousel = { .... /* other content */ .... }; }(jQuery, window, document)); |
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”.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0"?> <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_layout.xsd"> <update handle="empty"/> <referenceContainer name="page.wrapper"> <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/> <container name="page.top" as="page_top" label="After Page Header" after="header.container"/> <container name="top.slider" as="slider_box" label="Slider box container" after="page.top" htmlTag="div" htmlClass="slider-box"/> <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" /> </referenceContainer> </layout> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div id="demo"> <div id="owl-demo" class="owl-carousel"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> <div class="item"><h1>9</h1></div> <div class="item"><h1>10</h1></div> <div class="item"><h1>11</h1></div> <div class="item"><h1>12</h1></div> </div> </div> <script> require([ 'cookiecode/jquery', 'owlcarousel', ], function ($) { jQuery(document).ready(function () { jQuery("#owl-demo").owlCarousel({ navigation: true }); }); }); </script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="top.slider"> <block class="Magento\Framework\View\Element\Template" name="slider_test" template="Magento_Theme::slider.phtml" /> </referenceContainer> <referenceBlock name="logo"> <arguments> <argument name="logo_img_width" xsi:type="number">148</argument> <argument name="logo_img_height" xsi:type="number">43</argument> </arguments> </referenceBlock> </body> </page> |
Finally, we need to remove “\pub\static” and “\var\” folders and execute commend through the console:
|
1 |
php bin/magento setup:static-content:deploy |
Result: We’ve implemented OWL slider on all pages that use “1 column” page template. You can see here the layout:
Enjoy!
What a good explanation! Thank you so much
Hi,
Thanks for this – very useful and detailed.
Is there a reason you could not use jQuery from the Magento library rather than uploading your own version in your theme?
Cheers
David
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.
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 😉
Nice article, i am not step to code yet, but i see your explain is really good, i hope i can complete this by follow your.
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.
Hi,
I am using parallaxslider in my website and i want the default magento 2 jquery to be used. Can you tell me how to add them.
I had followed this link but I am getting jQuery not defined.
http://www.boolfly.com/magento-2-slider-with-owl-carousel/
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.
Such a complicated use of custom js library, comparing to Magento 1.
Some time i got error in browser console like:
“Uncaught TypeError: jQuery(…).owlCarousel is not a function”
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’,
Hello! Link files not work. Please write where can I get the source files. Thank you!
Hello
It is not working.
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
});
});
});
Can you post a article on how to use owl in custom module.
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
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
I used to be recommended this blog by means of my cousin. I’m not sure whether
this publish is written through him as nobody else
understand such distinctive about my problem. You’re wonderful!
Thanks!