I'm using magento 2 and I would like to include a javascript file , '' just into a page , for example about us page.. which file should I edit to do that, so I can add that code ?
2
-
you want to include js only on cms page, right?Rakesh Jesadiya– Rakesh Jesadiya2016-05-05 11:46:20 +00:00Commented May 5, 2016 at 11:46
-
yes , for example I need it only on about us page , so I want to find a way to include it that I don't have to add it on a xml that includes it on all pages..alexcr– alexcr2016-05-05 11:48:24 +00:00Commented May 5, 2016 at 11:48
Add a comment
|
4 Answers
You can go to cms -> pages and in the content of the page you want, add the javascript directly like i did in about us page
<script type="text/javascript">
$j=jQuery.noConflict();
$j(".logo").click(function(){
alert("The logo was clicked.");
});
</script>
Then when i click on logo on about us page only it will alert
Or there is another preferred way to do this by adding this code in js file and load that js file in cms -> page -> design tab in layout update xml.
-
1is that the most correct way to do it ?alexcr– alexcr2016-05-05 12:02:47 +00:00Commented May 5, 2016 at 12:02
-
I think probably no, because js code should be placed in seperate file , but if we want to have js for particular page this is the way i found, and in magento sample data in home page content they applied some css styles there.alsoShrikant– Shrikant2016-05-05 12:10:09 +00:00Commented May 5, 2016 at 12:10
-
I have tryed to add the library like this , but doesn't seems to work.. , I mean with <reference name="head"> <action method="addJs"> <script>js/yourjs.js</script> </action></reference>alexcr– alexcr2016-05-06 10:00:31 +00:00Commented May 6, 2016 at 10:00
-
try this stackoverflow.com/questions/36860083/…Shrikant– Shrikant2016-05-06 11:09:04 +00:00Commented May 6, 2016 at 11:09
-
I've just added this in my design tab <reference name="head"> <block type="core/text" name="contentslider"> <action method="setText"> <text> <![CDATA[ <link rel="stylesheet" href="aspiredeveloper.co.uk/bjqs.css" type="text/css" media="screen" /> <script src="code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="aspiredeveloper.co.uk/bjqs.min.js"></script> ]]> </text> </action> </block> </reference> but it still doesn't workalexcr– alexcr2016-05-06 11:27:49 +00:00Commented May 6, 2016 at 11:27
<script>
require([
'jquery'
], function(jQuery){
jQuery(".logo").click(function(){
alert("The logo was clicked.");
});
});
</script>
The require function would not only work for jQuery, but also for prototype, tinymce, Knockout, and other libraries.
This is magento2 way use the jquery library.
<script>
require(['jquery', 'jquery/ui'], function($){
$("#yourid").click(function(){
alert("It worked.");
});
});
</script>
-
And what If I need to include a properly library to use on that page ?alexcr– alexcr2016-05-05 12:17:26 +00:00Commented May 5, 2016 at 12:17
-
require(['jquery', 'jquery/ui']this code will load the jquery library that are built in magento 2.your main folder/lib/web/jqueryQaisar Satti– Qaisar Satti2016-05-05 12:20:41 +00:00Commented May 5, 2016 at 12:20
You should target the layout (page) using the correct handle then add the script via the head section of the page layout.
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-overview.html