2

this has been driving me insane. I can't figure out how to append some jquery script to the head section of a particular page in Magento 1.4.2. I've added the latest jquery library to all pages by editing page.xml, and i've added the no conflict thing.

I know i need to add some code to the custom layout update area for the page in question. However nothing works, i've tried many pieces of code and none appear in the head of the page when i later check the source code.

I posted the same question on official mangeto forum but eight days later and no replies. That forum is horrible for getting advice most questions are unanswered :(. Any idea how i could add to the head via custom layout update this for example?

$(document).ready(function(){
    $("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

I've tried enclosing that in script tags, in reference = head tag. Nothing works. Pulling my hair out and i've googled every word phrase i can think of but no examples of how to add scrip to a page's head in Magento. Please help.

1
  • Will the page in question be a single CMS page or a type of page like all products or all categories? Dec 20, 2010 at 23:46

3 Answers 3

8

expanding on Alan's excellent summary. If you just want to add the file to one specific page you can use the following snippet in the Layout Update XML field:

<reference name="head">
    <action method="addJs"><script>path/to/my/file.js</script></action>
</reference>

and place the file into http://example.com/js/path/to/my/file.js

or if you want it residing in your skin folder use

<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/file.js</name><params/></action>
</reference>

with the expected location http://example.com/skin/frontend/base/default/js/file.js change base and default according to the package and theme you are using

You can also use the above snippet in any other layout/?.xml file just place it within the layout handle you want to address. For example to place it in all cms pages in cms.xml you'll find

<cms_page>
 ....
</cms_page>

and change it to

<cms_page>
    ...
    <reference name="head">
        <action method="addJs"><script>path/to/my/file.js</script></action>
    </reference>
</cms_page>

and another easy one for adding a snippet of javascript to all pages go to System > Configuration > Design > Footer > Miscellaneous HTML

Further reading:

Using local.xml for theme customisations

Demystifying Magento’s Layout XML

3
  • Agreed, although I would have said "local.xml". It's not clear what system you're referring to when you say "Layout Update XML". Did you just mean any XML file that's been added beyond the defaults, or is there a specific place in the admin you're talking about? Dec 21, 2010 at 20:48
  • 1
    The OP referred to it as "custom layout update area for the page in question" which I understood to be the "Layout Update XML" field available on the Design Tab when editing a CMS page. In other areas like editing products or categories the field is called "Custom Layout Update". Thanks changed the link to say local.xml.
    – Fooman
    Dec 21, 2010 at 22:29
  • And thanks back, I was less interested in correcting, and more interested in the different places a layout update might be added. Dec 22, 2010 at 16:36
3

If you've added the jQuery library and turned on noConflict mode, then you should try accessing the jQuery object using the jQuery variable as opposed to the $ variable. Try it like this and see if it works:

jQuery(document).ready(function(){
    jQuery("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

If that doesn't work, you should double check your html output to see if the jQuery library is being included before you script is running. This is crucial as JavaScript processes sequentially on a page from top to bottom.

3
  • Hi, thx for reply but i think you misunderstood my question. The problem i am having is i cannot get the code to be inserted into the head of the page, not any problem with the code itself. I definetely have added the jquery library correctly. I will try your suggestion once i manage to actually add script to the head :)
    – baobei
    Dec 20, 2010 at 23:08
  • @baobei Ah ha! Well let's see. After a bit of looking around I found that you can do something like this: $headBlock = $this->getLayout()->getBlock('head'); $headBlock->addJs('somefolder/yay.js');. Give that a try and see if it works for you. Incidentally, if you are running these things on document.ready, you could just as well insert the code at the end of a page (this actually greatly increases the apparent page load speed).
    – treeface
    Dec 21, 2010 at 0:08
  • It needs to be xml code, as i'm adding it via the xml update design box in the back-end.
    – baobei
    Dec 21, 2010 at 1:37
3

Here's three different ways you can do this. I'd be hard pressed to call one of these more "right" than the other.

First approach: It sounds like you've used page.xml to add the base jQuery library to your page. If you know how to do that, you can add something like

<action method="addJs"><script>path/to/my/file.js</script></action>

below the action you added for jQuery. Then, place your code the file.js file that ends up linked in your head.

Second approach: If you look at the Block class for the head, you'll see where the template file is set.

app/code/core/Mage/Page/Block/Html/Head.php

...
protected function _construct()
{
    $this->setTemplate('page/html/head.phtml');
}

Find the page/html/head.phtml in your theme and add the code directly to page.html.

Third approach: If you look at the stock page.html mentioned above, you'll see this line

<?php echo $this->getChildHtml() ?>

Normally, the getChildHtml method is used to render a specific child block. However, if called with no paramater, getChildHtml will automatically render all the child blocks. That means you can add something like

<!-- existing line --> <block type="page/html_head" name="head" as="head"> 
    <!-- new sub-block you're adding --> <block type="core/template" name="stackoverflow" as="stackoverflow" template="page/stackoverflow.phtml"/>
    ...

to page.xml, and then add the stackoverflow.phtml file. Any block added to the head block will be automatically rendered. (this automatic rendering doesn't apply for all layout blocks, only for blocks where getChildHtml is called without paramaters)

Your phtml file doesn't need to be in page/, you can place it anywhere in your theme's template folder structure. The stackoverflow.phtml file will contain the javascript you want added to the head

<script type="text/javascript">
    alert("Test");
</script>

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.