How to add custom js & css for specific pages

Question

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 ?

Answer 1

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>

Answer 2

try this

<catalog_category_layered>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type> 
            <name>js/myjavascript.js</name> 
        </action>
        <action method="addItem">
            <type>skin_css</type> 
            <file>css/mycss.css</file> 
        </action>
    </reference>
</catalog_category_layered>

Answer 3

To add CSS file follow the below steps:

Open File
app\design\frontend\rwd\default\layout\page.xml
Add the below tag for css:
<action method="addCss"><stylesheet>css/[filename].css</stylesheet></action>

Just below the last method=”addCss” add the above line.
Now open,
skin\frontend\rwd\default\css\[filename].css

Start writing your css code in this file.

To add JS file follow the below steps.

Open File
app\design\frontend\rwd\default\layout\page.xml
Add the below tag
<action method="addItem"><type>skin_js</type><name>js/[filename].js</name></action>

Just below the js include tags similar to the above line.
Now open,
skin\frontend\rwd\default\js\[filename].js

Start writing your js code in this file

Question is same as #226981