Adding javascript to head in certain pages

Question

I'm trying to add some javascript scripts to the head of certain pages of my magento store (now I need one script in the product pages and other script in checkout, but I will need it in other different pages in the future: homepage, categories...).

I'm new to Magento and read quite a bit about it, but still not sure how to do this in Magento (I've done it successfully in Drupal for example).

It seems that page.xml (or local.xml) would be the right place to put the scripts for the head, but I don't know in those xml files allow "conditionals" (only show this script in this kind of pages...).

Another option seems to be putting the code in head.phtml of the template. This should work, because it accepts php ifs, but I don't know what code and variables should be used for each case (for showing in product pages, or checkout, or homepage, etc.)

What is the best/cleanest option for this? Could you please give me a code example of how would it be implemented or point to me to the relevant documentation page?

Thanks a lot!

P.S.: I don't think it makes any difference for this matter, but the javascript codes that I'm trying to implement are for using the Google Analytics Content Experiments API (https://developers.google.com/analytics/solutions/experiments-client-side)

Answer 1

Add the following in your local.xml layout file (app/design/frontend/{interface}/{theme}/layout/local.xml) right under the <layout> tag this:
For product pages

<catalog_product_view>
    <reference name="head">
        <block type="core/text" name="some_name" as="some_name">
            <action method="setText">
                <text><![CDATA[YOUR TEXT GOES HERE]]></text>
            </action>
        </block>
    </reference>
</catalog_product_view>

For the checkout page is the same thing, except you need to replace the top tag with <checkout_onepage_index>. So the section above becomes:

<checkout_onepage_index>
    <reference name="head">
        <block type="core/text" name="some_name" as="some_name">
            <action method="setText">
                <text><![CDATA[YOUR TEXT GOES HERE]]></text>
            </action>
        </block>
    </reference>
</checkout_onepage_index>

it works the same for any other page. You just need to know the correct page handle (top tag). For index is cms_index_index, for cart is checkout_cart_index.

Answer 2

The local.xml would be the way to go. It's considered best practice to only change and add rules there.

On addressing only certain types of pages, the layout XML provides you with page handles. So for example the product page is catalog_product_view. In your case the layout XML would look something like this

<?xml version="1.0"?>
<layout version="0.1.0">
    <checkout_onepage_index>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/your_custom_js.js</name></action>
        </reference>
    </checkout_onepage_index>
    <catalog_product_view>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/another_custom_js.js</name></action>
        </reference>
    </catalog_product_view>
</layout>

For the homepage you will need to add it via the backend under CMS pages and then the layout tab, the Layout Update XML area

Answer 3

now I need one script in the product pages and other script in checkout, but I will need it in other different pages in the future: homepage, categories

If you will reuse the same script in several places, it makes sense to use a custom layout handle in your themes local.xml (or another theme specific layout file, as explained in this answer) like this:

<content_experiments> <!-- this is the custom layout handle -->
    <reference name="head">
        <block type="core/text" name="content_experiments">
            <action method="setText">
                <text><![CDATA[
add scripts here

]]></text>
            </action>
        </block>
    </reference>
</content_experiments>

Then, to use this handle on product pages and the checkout:

<catalog_product_view>
    <update handle="content_experiments"/>
</catalog_product_view>
<checkout_onepage_index>
    <update handle="content_experiments"/>
</checkout_onepage_index>

To use it on all category pages

<catalog_category_view>
    <update handle="content_experiments"/>
</catalog_category_view>

To use it on the category with the ID 42:

<CATEGORY_42>
    <update handle="content_experiments"/>
</CATEGORY_42>

(alternatively add <update handle="content_experiments"/> to the custom layout update text field in the category configuration)

To use it on the product with the ID 42:

<PRODUCT_42>
    <update handle="content_experiments"/>
</PRODUCT_42>

(alternatively add <update handle="content_experiments"/> to the custom layout update text field in the product configuration)

...and so on...

All layout handles are placed directly within <layout> ... </layout>

The advantage of this method is that if you want to change the script, you only need to do it in one place.