1

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 ?

3
  • and what is the question? – Marius Nov 13 '14 at 7:55
  • you are not able to add it ? – Pradeep Sanku Nov 13 '14 at 7:55
  • you can try the answers and check which is posted – Pradeep Sanku Nov 13 '14 at 8:07
10

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>
2
  • +1 for that special catalog_category_view layout handle. I will definitely try that layout handle when a situation comes. :-) – Rajeev K Tomy Nov 13 '14 at 8:14
  • I followed your answer, my js is inside skin/frontemd/ucs_personalizaion/js/person.js, but in page source magento looks the js inside base/default.. directory, can you help me? – Butterfly Jun 15 '15 at 8:36
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>
0

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

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.