Custom javascript not working
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
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
Mar 8 at 4:34
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 Mar 8 at 5:40
ABHISHEK TRIPATHI
2,1641828
2,1641828
asked Mar 8 at 4:21
JohnJohn
1497
1497
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
Mar 8 at 4:34
add a comment |
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
Mar 8 at 4:34
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
Mar 8 at 4:34
Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597
– HelgeB
Mar 8 at 4:34
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
Mar 8 at 5:08
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
Mar 8 at 5:10
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
Mar 8 at 4:36
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
|
show 3 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
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
Mar 8 at 5:08
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
Mar 8 at 5:10
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
Mar 8 at 5:08
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
Mar 8 at 5:10
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 Mar 8 at 4:35
Shoaib MunirShoaib Munir
2,4372929
2,4372929
2
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
Mar 8 at 5:08
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
Mar 8 at 5:10
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
Mar 8 at 5:08
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
Mar 8 at 5:10
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
Mar 8 at 5:08
Don't know if it's the best way, but it worked and I didn't have to touch the header file.
– John
Mar 8 at 5:08
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
Mar 8 at 5:10
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
Mar 8 at 5:10
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
Mar 8 at 4:36
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
|
show 3 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
Mar 8 at 4:36
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
|
show 3 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 Mar 8 at 4:46
answered Mar 8 at 4:25
Prathap GunasekaranPrathap Gunasekaran
1,7831618
1,7831618
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
Mar 8 at 4:36
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
|
show 3 more comments
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
Mar 8 at 4:36
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
Mar 8 at 4:36
Nice one Prathap, you elaborate well, how to add js. +1
– Shoaib Munir
Mar 8 at 4:36
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
Do the above things and it will add js when the script loaded
– Prathap Gunasekaran
Mar 8 at 4:39
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…
– Prathap Gunasekaran
Mar 8 at 4:40
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
I have to override the header.phtml template? Where in that file does the code go?
– John
Mar 8 at 4:45
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml
– Prathap Gunasekaran
Mar 8 at 4:47
|
show 3 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
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
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 Mar 8 at 5:35
answered Mar 8 at 4:56
ABHISHEK TRIPATHIABHISHEK TRIPATHI
2,1641828
2,1641828
add a comment |
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
Mar 8 at 4:34