Adding javascript to head in certain pages
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
.
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
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.