7

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)

15

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.

  • Does cms_index_index reference only the homepage? Didn't know that! – Sander Mangel Nov 25 '13 at 13:42
  • @SanderMangel. That's what I know. There is this in the cms layout file <cms_index_index translate="label"> <label>CMS Home Page</label> </cms_index_index>. Either I'm right or someone else lied to me. – Marius Nov 25 '13 at 13:59
  • Don't... trust... anyone...! especially when it's Magento documentation. But in this case I think you're right :P – Sander Mangel Nov 25 '13 at 14:00
  • It works when I put exactly your code, but when I change the "YOUR TEXT GOES HERE" part for the javascript code I wan't to implement it gives me "Array". Any clue of what could be going wrong? (let me know if you need the javascript code to answer this). Thanks again! ;) – pedrogon Nov 25 '13 at 14:47
  • If you have html tags in your code just wrap it arround <![CDATA[..]]>. I will update the answer. If still does not solve it, add the js code in the question. – Marius Nov 25 '13 at 14:51
3

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="header">
            <action method="addItem"><type>skin_js</type><name>js/your_custom_js.js</name></action>
        </reference>
    </checkout_onepage_index>
    <catalog_product_view>
        <reference name="header">
            <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

  • That would probably work, but if possible I want to add the javascript codes directly in local.xml (without calling custom js files). Is that possible? – pedrogon Nov 25 '13 at 14:50
  • using the <block type="core/text"> that @Marius provided should do the trick. – Sander Mangel Nov 25 '13 at 15:05
2

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)

screenshot

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)

screenshot

...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.

  • KidCajes forgot to upvote. Consider this as +1 from him. Kudos :) – Rajeev K Tomy Sep 22 '15 at 1:45

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.