将 jQuery 添加到 Magento答案

【问题标题】：Adding jQuery to Magento将 jQuery 添加到 Magento
【发布时间】：2011-09-29 13:58:33
【问题描述】：

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

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

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

但这最终会将 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，我在其他地方读过这不是一个好主意。

【问题讨论】：

标签： php javascript jquery magento

【解决方案1】：

我的首选（也是最灵活的方式）是通过 XML 使用 local.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>

no-conflict.js 是允许 jQuery 与 Prototype 一起工作的必要条件，Prototype 是 Magento 默认包含的 Javascript 框架。保持 jQuery 和 no-conflict 文件分离允许您根据需要升级或降级 jQuery，而无需编辑 jQuery 文件本身以包含 noConflict() 方法。

在我们的 XML 中，我们创建了一个新块 (topScripts)，模板文件设置为 top_scripts.phtml。

导航到/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ 并创建这个新文件。它将包含一行：

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

现在编辑/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml。

在您的head.phtml 中找到<?php echo $this->getCssJsHtml() ?> 行并在其正上方添加此行：

<?php echo $this->getChildHtml('topScripts') ?>

您现在正确在任何其他 Magento Javascript 之前添加了 jQuery。

【讨论】：

创意！现在这也是我新的首选方式！
虽然这可行，但它并没有回答如何在其余脚本之前包含 Jquery 的问题。
编辑在所有其他 Magento Javascript 之前添加 jQuery！
这一切都可以模块化，因此如果您认为它是合乎逻辑的结论，它甚至不需要对 local.xml 进行编辑就可以将 jQuery 放置到位。也 +1 将 noconflict 作为单独的文件进行。我鄙视所有告诉您将 noconflict 行添加到 jQuery 库末尾的说明。后来，有人更新了 jQuery 库，整个原型/jQuery 的不兼容问题浮出水面，让你的电子商务网站从地球上消失了。
如果您指的是已接受答案中的方法，那么您是正确的，无需编辑 local.xml。但是，使用该解决方案，您会在每个页面上都使用 jQuery，并且如果有必要，没有有效的方法将其排除在外。使用块结构和 XML 的目的是增加灵活性。权衡是一些较小的复杂性，但它不是新手无法掌握的。

【解决方案2】：

最好是使用内容交付网络，这将为您的网站提供更好的性能/速度。

我大多只是打开 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 名称而不是 $（美元符号）以避免与原型冲突；）

【讨论】：

这很棒！谢谢。一个编辑是 http: 从 src 属性的开头丢失。不允许我编辑，因为我的编辑不是 > 6 个字符。
太棒了 ;) ，这是因为 mod_pagespeed，抱歉。更新了我的回复。

【解决方案3】：

您可以在 _prepareLayout() 方法中使用 $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); 将其添加到您的块文件中

需要注意的是，Magento 使用 Prototype，因此您需要确保将 jQuery 设置为另一个变量，而不是简单的 $。将此添加到页面使其对我有用：

var $j=jQuery.noConflict();

然后您只需在通常使用$ 的地方使用$j

【讨论】：

将其添加到 _prepareLayout() 方法中不需要编辑核心文件吗？或者有没有办法覆盖我主题中的核心文件？
如果您尝试扩展功能，而不是创建自己的功能，请查看prattski.com/2010/06/24/… 和prattski.com/2010/06/24/…。如果您正在创建自己的主题，您可以随时将其添加到

【解决方案4】：

作为一种替代方法，您可以使用以下扩展名简单地添加 jQuery，而不是每次手动编辑 Magento 文件：http://www.intersales.de/shop/magento-magejquery.html

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

【讨论】：