Hello @apkbarkgma96dd
Follow the below link to how to add a custom js.
https://www.thecoachsmb.com/how-to-add-custom-javascript-in-magento-2/
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, do not forget to wrap your JS into the require.js -conform way:
require(['jquery'], function($){ /* Code... */ })Or: by utilizing requirejs-config.js in your themes root folder.
Simply add Deps to it, for 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 the above example, I register main.js by calling it in the Deps. The path is without the .js extension, requirejs is handling 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;
});------------------------------------------------
If you've found one of my answers helpful, please give "Kudos" or "Accept as Solution"
