How to add/include js file into Magento theme

Question

I am modifying a Magento theme. And want to add a js file into the theme /js folder. I have added the following code:

<action method="addItem"><type>skin_js</type><name>js/custom-script.js</name></action>

into the /app/design/frontend/theme-name/default/layout/page.xml and published the js file into /skin/frontend/theme-name/default/js/. But no luck. It is not showing on the page. Someone please help me to rectify this. Thanks.

Answer 1

You can add your custom JS file in your theme's local.xml, located in: /app/design/frontend/{design package}/{theme}/layout/local.xml

 <?xml version="1.0"?>
 <layout version="0.1.0">
    <default>
       <reference name="head">
          <action method="addItem"><type>skin_js</type><name>js/script_name.js</name></action>
       </reference>
    </default>
 </layout>

Answer 2

try with this code:

    <default>
        <reference name="head">
            <action method="addJs"><script>js/jquery/jquery-1.7.2.min.js</script></action>
        </reference>
    </default>

Regards

Answer 3

I believe if you change:

<action method="addItem"><type>skin_js</type><name>js/custom-script.js</name></action>

to

<action method="addItem"><type>skin_js</type><name>skin/frontend/{Theme Package Name}/{Theme Name}/js/custom-script.js</name></action>

that should allow you to access theme specific javascript file.

Answer 4

If you want to include javascript inthemethen put this code inyour module's layout.xmlunderdefault` tag.

<layout>  
 <default>
    <reference name="head">
        <action method="addJs">
            <script>custom-script.js</script>
        </action>
    </reference>
</default>
</layout>

If you want to include javascript for any particular controller then put this code in your module's layout.xml like below

<layout>  
<yourpackage_yourmodule_yourcontroller_action translate="label" module="yourpackage_yourmodule">       
    <reference name="head">
        <action method="addJs">
            <script>custom-script.js</script>
        </action>
    </reference>
</yourpackage_yourmodule_yourcontroller_action>
</layout>

And put custom-script.js file under yourMagentoDirectory/js folder.

Answer 5

Please try this, i think this is the way to add our js/css files into the load.xml:

<layout>
  <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/jquery-1.11.0.min.js</name>
        </action>
    </reference>
  </default>
</layout>

Answer 6

Best solution insert into local.xml file with reference name="head"

<action method="addJs">
    <script>js/custom.js</script>
</action>