Custom javascript not working












2















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









share|improve this question

























  • Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597

    – HelgeB
    2 hours ago
















2















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









share|improve this question

























  • Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597

    – HelgeB
    2 hours ago














2












2








2








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









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 1 hour ago









ABHISHEK TRIPATHI

1,8041726




1,8041726










asked 2 hours ago









JohnJohn

1184




1184













  • Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597

    – HelgeB
    2 hours ago



















  • Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597

    – HelgeB
    2 hours ago

















Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597

– HelgeB
2 hours ago





Check this answer, it might match your situation magento.stackexchange.com/a/255077/76597

– HelgeB
2 hours ago










3 Answers
3






active

oldest

votes


















2














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);
}
});
});





share|improve this answer



















  • 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



















3














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 :)






share|improve this answer


























  • Nice one Prathap, you elaborate well, how to add js. +1

    – Shoaib Munir
    2 hours ago













  • Do the above things and it will add js when the script loaded

    – Prathap Gunasekaran
    2 hours ago











  • See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

    – Prathap Gunasekaran
    2 hours ago











  • I have to override the header.phtml template? Where in that file does the code go?

    – John
    2 hours ago











  • Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

    – Prathap Gunasekaran
    2 hours ago



















1














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 the Magento_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






share|improve this answer


























  • 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











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
});


}
});














draft saved

draft discarded


















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









2














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);
}
});
});





share|improve this answer



















  • 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














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);
}
});
});





share|improve this answer



















  • 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








2







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);
}
});
});





share|improve this answer













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);
}
});
});






share|improve this answer












share|improve this answer



share|improve this answer










answered 2 hours 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














  • 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













3














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 :)






share|improve this answer


























  • Nice one Prathap, you elaborate well, how to add js. +1

    – Shoaib Munir
    2 hours ago













  • Do the above things and it will add js when the script loaded

    – Prathap Gunasekaran
    2 hours ago











  • See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

    – Prathap Gunasekaran
    2 hours ago











  • I have to override the header.phtml template? Where in that file does the code go?

    – John
    2 hours ago











  • Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

    – Prathap Gunasekaran
    2 hours ago
















3














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 :)






share|improve this answer


























  • Nice one Prathap, you elaborate well, how to add js. +1

    – Shoaib Munir
    2 hours ago













  • Do the above things and it will add js when the script loaded

    – Prathap Gunasekaran
    2 hours ago











  • See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

    – Prathap Gunasekaran
    2 hours ago











  • I have to override the header.phtml template? Where in that file does the code go?

    – John
    2 hours ago











  • Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

    – Prathap Gunasekaran
    2 hours ago














3












3








3







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 :)






share|improve this answer















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 :)







share|improve this answer














share|improve this answer



share|improve this answer








edited 2 hours ago

























answered 2 hours ago









Prathap GunasekaranPrathap Gunasekaran

1,039314




1,039314













  • Nice one Prathap, you elaborate well, how to add js. +1

    – Shoaib Munir
    2 hours ago













  • Do the above things and it will add js when the script loaded

    – Prathap Gunasekaran
    2 hours ago











  • See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

    – Prathap Gunasekaran
    2 hours ago











  • I have to override the header.phtml template? Where in that file does the code go?

    – John
    2 hours ago











  • Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

    – Prathap Gunasekaran
    2 hours ago



















  • Nice one Prathap, you elaborate well, how to add js. +1

    – Shoaib Munir
    2 hours ago













  • Do the above things and it will add js when the script loaded

    – Prathap Gunasekaran
    2 hours ago











  • See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

    – Prathap Gunasekaran
    2 hours ago











  • I have to override the header.phtml template? Where in that file does the code go?

    – John
    2 hours ago











  • Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

    – Prathap Gunasekaran
    2 hours ago

















Nice one Prathap, you elaborate well, how to add js. +1

– Shoaib Munir
2 hours ago







Nice one Prathap, you elaborate well, how to add js. +1

– Shoaib Munir
2 hours ago















Do the above things and it will add js when the script loaded

– Prathap Gunasekaran
2 hours ago





Do the above things and it will add js when the script loaded

– Prathap Gunasekaran
2 hours ago













See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

– Prathap Gunasekaran
2 hours ago





See this get more about how js is loading in magento 2 magento.stackexchange.com/questions/264679/…

– Prathap Gunasekaran
2 hours ago













I have to override the header.phtml template? Where in that file does the code go?

– John
2 hours ago





I have to override the header.phtml template? Where in that file does the code go?

– John
2 hours ago













Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

– Prathap Gunasekaran
2 hours ago





Your header.phtml must be in this path app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

– Prathap Gunasekaran
2 hours ago











1














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 the Magento_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






share|improve this answer


























  • 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
















1














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 the Magento_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






share|improve this answer


























  • 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














1












1








1







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 the Magento_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






share|improve this answer















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 the Magento_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







share|improve this answer














share|improve this answer



share|improve this answer








edited 1 hour ago

























answered 2 hours 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



















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Knooppunt Holsloot

Altaar (religie)

Gregoriusmis