2

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 ?

  • you want to include js only on cms page, right? – Rakesh Jesadiya May 5 '16 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 May 5 '16 at 11:48
1

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.

| improve this answer | |
  • 1
    is that the most correct way to do it ? – alexcr May 5 '16 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.also – Shrikant May 5 '16 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 May 6 '16 at 10:00
  • try this stackoverflow.com/questions/36860083/… – Shrikant May 6 '16 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 work – alexcr May 6 '16 at 11:27
1
<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.

| improve this answer | |
0

This is magento2 way use the jquery library.

<script>
require(['jquery', 'jquery/ui'], function($){ 
     $("#yourid").click(function(){
         alert("It worked.");
     });
 });
</script>
| improve this answer | |
  • And what If I need to include a properly library to use on that page ? – alexcr May 5 '16 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/jquery – Qaisar Satti May 5 '16 at 12:20
0

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.