Javascript 如何在 Magento 主题中添加/包含 js 文件

How to add/include js file into Magento theme

提问by psuparna

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

我正在修改 Magento 主题。并想在主题/js文件夹中添加一个js文件。我添加了以下代码：

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

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

into the /app/design/frontend/theme-name/default/layout/page.xmland 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.

进入/app/design/frontend/theme-name/default/layout/page.xml并公布了js文件到/skin/frontend/theme-name/default/js/。但没有运气。它没有显示在页面上。有人请帮我纠正这个。谢谢。

回答by Sunil Kumar

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

尝试将以下内容添加到您的布局.xml文件中<reference name="head">

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

回答by Ashwani Panwar

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

如果你想为你的模块的 layout.xml default` 标签设置include javascript in主题。then put this code inunder

<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 controllerthen put this code in your module's layout.xmllike below

如果你想把include javascript for any particular controller这段代码放在your module's layout.xml下面

<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.jsfile under yourMagentoDirectory/jsfolder.

并将custom-script.js文件放在文件yourMagentoDirectory/js夹下。

回答by bencergazda

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

您可以在您的主题中添加您的自定义 JS 文件local.xml，位于：/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>

回答by Vinod VT

Add this code in,

加入这段代码，

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

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.jsfile in jsfolder on root.

并将custom-script.js文件放在根目录的js文件夹中。

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

仅供参考：像这样你可以在 phtml 文件上添加任何 js/css 文件

回答by Pranob

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

请试试这个，我认为这是将我们的 js/css 文件添加到 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>

回答by flippinroo2

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.

这应该允许您访问主题特定的 javascript 文件。

回答by Carlo_PHP

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

最佳解决方案插入到 local.xml 文件中，引用名称为 =“head”

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

回答by Giancarlo Morales

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

问候

回答by Sunil Kumar

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

如果要实现自定义代码（.js 文件），请按照以下步骤操作：

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

• 从管理面板，转到设计 > 主题编辑器。

• 单击要添加自定义脚本的主题下的自定义。

• 单击左侧面板中的 Java Script Editor 以管理 JavaScript 资产。

• 单击浏览文件，从本地驱动器中选择 JavaScript 文件，然后单击上传文件。