Magento – How to add custom js & css for specific pages

categoryjs-csslayout-updatemagento-1.9

I trying to add custom js & css only for all category pages.

I create a local.xml file at app/design/frontend/package/theme/layout/local.xml
& add this code inside it.

< ?xml version="1.0"?>
<layout version="0.1.0">
     <catalog_category_default>
         <reference name="head">
             <action method="addItem">
                  <type>skin_js</type><name>js/myjavascript.js</name>
             </action>
             <action method="addItem">
                   <type>skin_css</type><name>css/mycss.css</name>
             </action>
         </reference>            
     </catalog_category_default>
</layout>

But I don't get that files in head section. So my question is how to add custom css & js files for all category pages ?

Best Answer

The category pages can use 2 layout handles depending on the 'is_anchor' flag of the category.
catalog_category_default is used when is_anchor is no and catalog_category_layered is used when is_anchor is yes.
But there is one layout handle that is loaded, but magento does not use it in it's files.
<catalog_category_view>.

So you can try with this code:

<?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_category_view>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type><name>js/myjavascript.js</name>
            </action>
            <action method="addItem">
                <type>skin_css</type><name>css/mycss.css</name>
            </action>
         </reference>            
     </catalog_category_view>
</layout>
Related Topic