1 min read

Magento 添加 jQuery 支持

Magento 添加 jQuery 有许多办法,可以硬编码到 head.phtml,但也有些灵活用法。以下说几个灵活的应用法。

假设 magento 安装在 本地 htdocs/chenxsan 目录下,新的模板文件夹名称为 lan,则先在 lan/layout/ 文件夹下新建一个 local.xml 文件:

addJs 方法

首先将 jquery.js 添加到 chenxsan/js/ 目录下,然后在 local.xml 中添加如下语句:

<reference name="head">
    <action method="addJs"><script>jquery.js</script></action>
</reference>

刷新网页,查看源代码,里面已经添加 jquery.js:

<script type="text/javascript" src="http://localhost/chenxsan/js/jquery.js">
</script>

这种用法觉见于多主题里都要调用 jQuery 的情况。

addItem 方法

首先将 jquery.js 添加到 chenxsan/skin/frontend/default/lan/js/ 目录下,然后在 local.xml 文件添加以下语句:

<reference name="head">
   <action method="addItem">
       <type>skin_js</type>
       <name>js/jquery.js</name>
   </action>
</reference>

刷新网页,查看源代码:

<script type="text/javascript" src="http://localhost/chenxsan/skin/frontend/default/lan/js/jquery.js">
</script>

因为 Magento 本身引用 prototype js 库,也使用 $,这会造成与 jQuery 语句的冲突,为解决这冲突,在所写的 js 代码前需要引入 noConflict() :

jQuery.noConflict();
 jQuery(document).ready(function(){
    //code here
  });

如果嫌 jQuery 这样太长,则可以这样写:

var $j = jQuery.noConflict();
    $j(document).ready(function(){
   //code here
});

这样,你如果要 extjs 的话,则可以放心使用 $ 了。

硬编码 head.phtml

最后再提个硬编码到 template/page/html/head.phtml 文件的办法。

直接在合适的位置加入下列语句:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
</script>

以上所说的办法是将 jQuery 添加到网站前端整站,如果要针对特定的 CMS 页面 引用 jQuery,则请到后台管理的 CMS -> Pages -> Design -> Page Layout 下 “Layout Update XML” 里设置。又或要针对分类进行设置,也可以在 Catalog -> Manage categories -> Custom Design 下的 “Custom Layout Update” 下添加。

报告问题 修订