Custom javascript not working
I'm trying to inject a scroll to anchor javascript globally in Magento 2.
More specifically this script:
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
I have taken the reference from this blog post.
I converted it to include defines and stuff:
define([
"jquery",
"jquery/ui"
], function ($) {
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
And injecting it in to my themes default_head_blocks.xml
with <link src="js/custom.js" />
The injection works but I am getting the following error in Chrome console:
Uncaught Error: Mismatched anonymous define() module: function ($) {
'use strict';
require.js:166
magento2 javascript requirejs
add a comment |
I'm trying to inject a scroll to anchor javascript globally in Magento 2.
More specifically this script:
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
I have taken the reference from this blog post.
I converted it to include defines and stuff:
define([
"jquery",
"jquery/ui"
], function ($) {
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
And injecting it in to my themes default_head_blocks.xml
with <link src="js/custom.js" />
The injection works but I am getting the following error in Chrome console:
Uncaught Error: Mismatched anonymous define() module: function ($) {
'use strict';
require.js:166
magento2 javascript requirejs
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
1 hour ago
add a comment |
I'm trying to inject a scroll to anchor javascript globally in Magento 2.
More specifically this script:
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
I have taken the reference from this blog post.
I converted it to include defines and stuff:
define([
"jquery",
"jquery/ui"
], function ($) {
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
And injecting it in to my themes default_head_blocks.xml
with <link src="js/custom.js" />
The injection works but I am getting the following error in Chrome console:
Uncaught Error: Mismatched anonymous define() module: function ($) {
'use strict';
require.js:166
magento2 javascript requirejs
I'm trying to inject a scroll to anchor javascript globally in Magento 2.
More specifically this script:
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
I have taken the reference from this blog post.
I converted it to include defines and stuff:
define([
"jquery",
"jquery/ui"
], function ($) {
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
And injecting it in to my themes default_head_blocks.xml
with <link src="js/custom.js" />
The injection works but I am getting the following error in Chrome console:
Uncaught Error: Mismatched anonymous define() module: function ($) {
'use strict';
require.js:166
magento2 javascript requirejs
magento2 javascript requirejs
edited 50 mins ago
ABHISHEK TRIPATHI
1,8041726
1,8041726
asked 2 hours ago
JohnJohn
1134
1134
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
1 hour ago
add a comment |
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
1 hour ago
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
1 hour ago
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
1 hour ago
add a comment |
3 Answers
3
active
oldest
votes
Instead of defined
use require
Like this:
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
add a comment |
Add an external JS in the following way :
Try this,
Add your custom js in the following path.
app/design/frontend/Vendor/theme-name/web/js/nameofjs.js
then you need to add requirejs-config.js to the following path.
app/design/frontend/Vendor/theme-name/requirejs-config.js
then add the following code in it
var config = {
paths: {
'your_js_name' : 'js/nameofjs',
},
shim: {
'your_js_name': {
deps: ['jquery']
},
}
};
and add the below code to load custom js, In your case it would be header.phtml in Magento_Theme folder in your theme
app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
<script>
require(['jquery','your_js_name'],function($) {
$(window).load(function () {
/*alert('load from external jquery');*/
});});
</script>
Hope this helps and this is correct way to load any custom js in M2 as far as I know.
Peace :)
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
|
show 4 more comments
In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location
Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js
It should contains the code as follows
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Define it into your requirejs-config.js located at below location
Magento_root/app/code/Vendor/Module/view/frontend/requirejs-config.js
It should Contains the code as follows:
var config = {
map: {
'*': {
module_js_denotation_name: 'Vendor_module/js/file',
}
}
};
Now you can call it into any phtml file you want to load it as follows
<script type="text/javascript">
require(['jquery', 'module_js_denotation_name'], function($, myscript) {
myscript();
});
</script>
For your requirement you need to call it into the header.phtml
or the footer.phtml
file.
You can also create your own phtml file at Vendor/Module/view/frontend/template/template.phtml
& call it there & with the help of layout Vendor/Module/view/frontend/layout/default.xaml
file you can inject your template file to the theme (I am supposing that you no how to inject your phtml to your theme through the layout files).
Note: Make sure after doing this you are running the below commands o
register your module & deploy the contents & make sure you are not making any changes to the default magento file always make the changes to your custome code that is inside theMagento_root/app
directory
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f264940%2fcustom-javascript-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Instead of defined
use require
Like this:
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
add a comment |
Instead of defined
use require
Like this:
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
add a comment |
Instead of defined
use require
Like this:
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Instead of defined
use require
Like this:
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
answered 1 hour ago
Shoaib MunirShoaib Munir
1,7231626
1,7231626
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
add a comment |
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
2
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
Yes, it is the way of Magento to write js anywhere in your code. using define includes the files that you add in it
– Shoaib Munir
1 hour ago
add a comment |
Add an external JS in the following way :
Try this,
Add your custom js in the following path.
app/design/frontend/Vendor/theme-name/web/js/nameofjs.js
then you need to add requirejs-config.js to the following path.
app/design/frontend/Vendor/theme-name/requirejs-config.js
then add the following code in it
var config = {
paths: {
'your_js_name' : 'js/nameofjs',
},
shim: {
'your_js_name': {
deps: ['jquery']
},
}
};
and add the below code to load custom js, In your case it would be header.phtml in Magento_Theme folder in your theme
app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
<script>
require(['jquery','your_js_name'],function($) {
$(window).load(function () {
/*alert('load from external jquery');*/
});});
</script>
Hope this helps and this is correct way to load any custom js in M2 as far as I know.
Peace :)
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
|
show 4 more comments
Add an external JS in the following way :
Try this,
Add your custom js in the following path.
app/design/frontend/Vendor/theme-name/web/js/nameofjs.js
then you need to add requirejs-config.js to the following path.
app/design/frontend/Vendor/theme-name/requirejs-config.js
then add the following code in it
var config = {
paths: {
'your_js_name' : 'js/nameofjs',
},
shim: {
'your_js_name': {
deps: ['jquery']
},
}
};
and add the below code to load custom js, In your case it would be header.phtml in Magento_Theme folder in your theme
app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
<script>
require(['jquery','your_js_name'],function($) {
$(window).load(function () {
/*alert('load from external jquery');*/
});});
</script>
Hope this helps and this is correct way to load any custom js in M2 as far as I know.
Peace :)
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
|
show 4 more comments
Add an external JS in the following way :
Try this,
Add your custom js in the following path.
app/design/frontend/Vendor/theme-name/web/js/nameofjs.js
then you need to add requirejs-config.js to the following path.
app/design/frontend/Vendor/theme-name/requirejs-config.js
then add the following code in it
var config = {
paths: {
'your_js_name' : 'js/nameofjs',
},
shim: {
'your_js_name': {
deps: ['jquery']
},
}
};
and add the below code to load custom js, In your case it would be header.phtml in Magento_Theme folder in your theme
app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
<script>
require(['jquery','your_js_name'],function($) {
$(window).load(function () {
/*alert('load from external jquery');*/
});});
</script>
Hope this helps and this is correct way to load any custom js in M2 as far as I know.
Peace :)
Add an external JS in the following way :
Try this,
Add your custom js in the following path.
app/design/frontend/Vendor/theme-name/web/js/nameofjs.js
then you need to add requirejs-config.js to the following path.
app/design/frontend/Vendor/theme-name/requirejs-config.js
then add the following code in it
var config = {
paths: {
'your_js_name' : 'js/nameofjs',
},
shim: {
'your_js_name': {
deps: ['jquery']
},
}
};
and add the below code to load custom js, In your case it would be header.phtml in Magento_Theme folder in your theme
app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
<script>
require(['jquery','your_js_name'],function($) {
$(window).load(function () {
/*alert('load from external jquery');*/
});});
</script>
Hope this helps and this is correct way to load any custom js in M2 as far as I know.
Peace :)
edited 1 hour ago
answered 2 hours ago
Prathap GunasekaranPrathap Gunasekaran
1,037314
1,037314
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
|
show 4 more comments
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
I have to override the header.phtml template? Where in that file does the code go?
– John
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
1 hour ago
|
show 4 more comments
In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location
Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js
It should contains the code as follows
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Define it into your requirejs-config.js located at below location
Magento_root/app/code/Vendor/Module/view/frontend/requirejs-config.js
It should Contains the code as follows:
var config = {
map: {
'*': {
module_js_denotation_name: 'Vendor_module/js/file',
}
}
};
Now you can call it into any phtml file you want to load it as follows
<script type="text/javascript">
require(['jquery', 'module_js_denotation_name'], function($, myscript) {
myscript();
});
</script>
For your requirement you need to call it into the header.phtml
or the footer.phtml
file.
You can also create your own phtml file at Vendor/Module/view/frontend/template/template.phtml
& call it there & with the help of layout Vendor/Module/view/frontend/layout/default.xaml
file you can inject your template file to the theme (I am supposing that you no how to inject your phtml to your theme through the layout files).
Note: Make sure after doing this you are running the below commands o
register your module & deploy the contents & make sure you are not making any changes to the default magento file always make the changes to your custome code that is inside theMagento_root/app
directory
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
add a comment |
In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location
Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js
It should contains the code as follows
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Define it into your requirejs-config.js located at below location
Magento_root/app/code/Vendor/Module/view/frontend/requirejs-config.js
It should Contains the code as follows:
var config = {
map: {
'*': {
module_js_denotation_name: 'Vendor_module/js/file',
}
}
};
Now you can call it into any phtml file you want to load it as follows
<script type="text/javascript">
require(['jquery', 'module_js_denotation_name'], function($, myscript) {
myscript();
});
</script>
For your requirement you need to call it into the header.phtml
or the footer.phtml
file.
You can also create your own phtml file at Vendor/Module/view/frontend/template/template.phtml
& call it there & with the help of layout Vendor/Module/view/frontend/layout/default.xaml
file you can inject your template file to the theme (I am supposing that you no how to inject your phtml to your theme through the layout files).
Note: Make sure after doing this you are running the below commands o
register your module & deploy the contents & make sure you are not making any changes to the default magento file always make the changes to your custome code that is inside theMagento_root/app
directory
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
add a comment |
In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location
Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js
It should contains the code as follows
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Define it into your requirejs-config.js located at below location
Magento_root/app/code/Vendor/Module/view/frontend/requirejs-config.js
It should Contains the code as follows:
var config = {
map: {
'*': {
module_js_denotation_name: 'Vendor_module/js/file',
}
}
};
Now you can call it into any phtml file you want to load it as follows
<script type="text/javascript">
require(['jquery', 'module_js_denotation_name'], function($, myscript) {
myscript();
});
</script>
For your requirement you need to call it into the header.phtml
or the footer.phtml
file.
You can also create your own phtml file at Vendor/Module/view/frontend/template/template.phtml
& call it there & with the help of layout Vendor/Module/view/frontend/layout/default.xaml
file you can inject your template file to the theme (I am supposing that you no how to inject your phtml to your theme through the layout files).
Note: Make sure after doing this you are running the below commands o
register your module & deploy the contents & make sure you are not making any changes to the default magento file always make the changes to your custome code that is inside theMagento_root/app
directory
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location
Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js
It should contains the code as follows
require([
'jquery',
"jquery/ui"
], function($){
'use strict';
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Define it into your requirejs-config.js located at below location
Magento_root/app/code/Vendor/Module/view/frontend/requirejs-config.js
It should Contains the code as follows:
var config = {
map: {
'*': {
module_js_denotation_name: 'Vendor_module/js/file',
}
}
};
Now you can call it into any phtml file you want to load it as follows
<script type="text/javascript">
require(['jquery', 'module_js_denotation_name'], function($, myscript) {
myscript();
});
</script>
For your requirement you need to call it into the header.phtml
or the footer.phtml
file.
You can also create your own phtml file at Vendor/Module/view/frontend/template/template.phtml
& call it there & with the help of layout Vendor/Module/view/frontend/layout/default.xaml
file you can inject your template file to the theme (I am supposing that you no how to inject your phtml to your theme through the layout files).
Note: Make sure after doing this you are running the below commands o
register your module & deploy the contents & make sure you are not making any changes to the default magento file always make the changes to your custome code that is inside theMagento_root/app
directory
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
edited 56 mins ago
answered 1 hour ago
ABHISHEK TRIPATHIABHISHEK TRIPATHI
1,8041726
1,8041726
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
add a comment |
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
if someone is down voting may I know the reason behind it?
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
If you don't want don't upvote it but don't down vote any answer without any reason If you are down voting any question or answer also have the courage to give the reason behind it don't be offensive it is not a competition here
– ABHISHEK TRIPATHI
1 hour ago
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f264940%2fcustom-javascript-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
1 hour ago