How to add/include js file into Magento theme

问题

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.

回答1:

Try adding the following to your layout .xml file within <reference name="head">

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

回答2:

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.

回答3:

Add this code in,

app/design/frontend/{your_theme}/default/template/page/html/header.phtml

<script type="text/javascript" src="<?php echo $this->getSkinUrl(); ?>js/custom-script.js"></script>

And put custom-script.js file in js folder on root.

FYI : Like this you can add any js/css file on phtml files

回答4:

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>

回答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>

回答6:

I believe if you change:

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

<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.

回答7:

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

回答8:

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

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

回答9:

If you want to implement custom code (a .js file), please follow these steps:

From the Admin panel, go to Design > Themes Editor.
Click Customize under the theme you wish to add custom script to.
Click Java Script Editor in the left panel to manage JavaScript assets.
Click Browse Files, select the JavaScript file from your local drive, and then click Upload Files.

来源：https://stackoverflow.com/questions/26093139/how-to-add-include-js-file-into-magento-theme

标签

javascript

magento

frontend

magento-1.x