Php 将jQuery添加到Magento

使用local.xml在Magento附带的其他脚本之前添加jQuery（或任何脚本）的推荐方法是什么

我尝试使用（在local.xml中）：

皮肤
js/jquery-1.6.4.js

但这最终会将jQuery添加到脚本的末尾，这些脚本是由Magento在基本包的page.xml中添加的。我甚至尝试使用以下方法删除所有脚本：

<action method="removeItem">
...
</action>

...

要删除在page.xml中添加的所有脚本，然后按照我需要的顺序在local.xml中重新添加它们（首先是jQuery），但不知何故，它们最终的顺序是相同的（最后是jQuery）

我已经仔细阅读了Magento代码，并验证了脚本是否已被删除，然后重新添加到Mage_Page_Block_Html_Head中的$this->_data['items']，但在某些时候，当它们添加到页面时，最后会使用jQuery添加它们

---

我猜一定有更优雅的方式来做到这一点，但我还没有在谷歌上找到它。我发现的所有内容都建议直接修改page.xml，我在别处读过这不是一个好主意。

您可以使用

$this->getLayout（）->getBlock（'head'）->addJs（'path/to/jquery.js'）将其添加到块文件中\u prepareLayout（）

方法中的code>

需要注意的是，Magento使用Prototype，因此您需要确保将jQuery设置为另一个变量，而不仅仅是

$

。将此添加到页面使其适用于我：

var $j=jQuery.noConflict();

---

然后您只需在通常使用

$

$

的地方使用

$j

，最好的方法是使用内容交付网络，它将在性能/速度方面为您的网站提供更好的服务

我通常只是打开template/page/html/head.phtml，然后就在前面

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

我补充说：

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

还要确保运行jQuery.noConflict（）方法，并始终使用完整的jQuery名称，而不是$（美元符号），以避免与prototype（）冲突

我更喜欢（也是最灵活的方法）通过使用

local.XML

的XML、两个单独的Javascript文件以及我们将创建的一个新文件来实现这一点。第一个Javascript文件是jQuery本身——完全没有修改。我调用的第二个文件

no conflict.js

，它只包含一行：

jQuery.noConflict();

现在，我们将这两个文件以及一个新块添加到

local.xml

的头部部分：

    <reference name="head">
        <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery-1.7.2.min.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/no-conflict.js</name>
            </action>
        </block>
    </reference>

皮肤
js/jquery-1.7.2.min.js
皮肤
js/no-conflict.js

no conflict.js

是允许jQuery与Prototype（默认情况下包含在Magento中的Javascript框架）一起工作所必需的。将jQuery和

无冲突

文件分开，可以根据需要升级或降级jQuery，而无需编辑jQuery文件本身以包含

noConflict（）

方法

在XML中，我们创建了一个新块（

topscript

），模板文件设置为

top\u scripts.phtml

）

导航到

/app/design/frontend/PACKAGE\u NAME/TEMPLATE\u NAME/TEMPLATE/page/html/

并创建此新文件。它将包含一行：

jQuery.noConflict();

现在编辑

/app/design/frontend/PACKAGE\u NAME/TEMPLATE\u NAME/TEMPLATE/page/html/head.phtml

在您的

标题中找到
行。phtml

并将此行直接添加到其上方：

---

现在，您已经正确地将jQuery添加到了任何其他MagentoJavaScript之前。

作为替代方法，您可以使用以下扩展名添加jQuery，而不是每次手动编辑Magento文件：

---

它所做的是下载指定的jQuery版本，并自动安装所有需要的文件，同时向模板添加引用。在后端，您可以指定所需的版本，还可以激活无冲突设置。

将此添加到_prepareLayout（）方法不需要编辑核心文件吗？或者，有没有一种方法可以覆盖我的主题中的核心文件？如果您试图扩展功能，而不是创建自己的功能，请查看和。如果您正在创建自己的主题，您可以随时将其添加到“This worked great”！谢谢一个编辑是，src属性的开头缺少http:。不允许我编辑，因为我的编辑不超过6个字符。太好了；），这是因为mod_pagespeed，很抱歉。更新我的回复。创意！这也是我现在喜欢的新方式！虽然这是可行的，但它并没有回答如何在其余脚本之前包含Jquery的问题。编辑为在所有其他MagentoJavascripts之前添加Jquery！这一切都可以模块化，这样它就可以将jQuery放在适当的位置，而无需对local.xml进行编辑（如果您对其进行逻辑总结的话）。另外+1用于将noconflict作为单独的文件执行。我鄙视所有告诉您将noconflict行添加到jQuery库末尾的说明。后来，有人更新了jQuery库，整个prototype/jQuery不兼容问题暴露了出来，把你的电子商务网站打得天翻地覆。如果你在接受的答案中引用了这个方法，那么你是正确的，编辑local.xml是不必要的。然而，使用这种解决方案，您在每个页面上都必须使用jQuery，如果有必要的话，没有有效的方法排除它。使用块结构和XML的目的是增加灵活性。折衷是一些小的复杂性，但这不是新手不能掌握的。