Can anyone help me, I am new to Magento 2. I want to call custom jquery slider on home page on my local site. I have tried myself but not getting how to use it with requirejs-config.js. It will be very helpful if you explain from basic step by step.
Magento – How to call custom jQuery slider in magento 2
jquerymagento2
Related Solutions
requirejs-config.js :
var config = {
"map": {
"*": {
"OwlCarousel": "<vodeorname>_<modulename>/js/owl-carousel"
}
}
};
phtml Template :
<?php $items = $this->getItemCollection()->getData(); ?>
<div id="owl-demo" data-mage-init='{
"OwlCarousel":{
"autoPlay": 3000,
"items" : 2,
"itemsDesktop" : [1199,3],
"itemsDesktopSmall" : [979,3]
}
}'>
<?php foreach ($items as $item) { ?>
<div class="item"><img src="<?php echo $this->imageurl . $item['item_image']; ?>" alt="Owl Image"></div>
<?php } ?>
</div>
Let me know if you have an issue.
jQuery is already pre-packaged with Magento2, there is no need to implement it on your own, however, you have to utilize it.
To add JS to your theme you have several possibilities.
By utilizing default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/:
Example Content:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<!-- The following two ways to add local JavaScript files are equal -->
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<!-- Add external resources -->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
If you inject JS this way, dont forget to wrap your JS into the requirejs-conform way:
require(['jquery'], function($){ /* Code... */ })
Or: by utilizing requirejs-config.js in your themes root folder.
Simply add Deps to it, example:
var config = {
deps: [
"js/main",
],
map: {
'*': {
'owlcarousel': 'js/owl.carousel.min',
'sticky' : 'js/jquery.sticky',
'tether' : 'js/tether.min',
'bootstrap': 'js/bootstrap.min'
}
},
"shim": {
"owlcarousel": ["jquery"],
"tether": ["jquery"],
"bootstrap": ["jquery"]
}
};
In aboves example I register main.js by calling it in the Deps. The path is without the .js extention, requirejs is handeling this on its own.
Your main.js should be located at web/js/ in your theme.
The content of main.js should be like this:
define([
"jquery",
"whatever lib you wanna use..."
],
function($) {
"use strict";
$(document).ready(function($){
console.log("DID IT! jQuery log complete.");
});
return;
});
Best Answer
For example to call custom jQuery slider in home page of Magento you need to follow this steps
Step 1: Call you custom slider's CSS and JS in home page layout
Override cms_index_index.xml to your custom theme
Step 2: Define your custom JS in requirejs-config.js
Step 3: create phtml file which we called in layout for your slider html and js
I have created popup manager module with custom jQuery popup you can take reference from here:
https://github.com/mageprince/Magento2-PopupManager