javascript 将 jQuery 添加到 Magento
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7598431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding jQuery to Magento
提问by Luke
What is the recommended way to add jQuery (or any script) BEFORE the rest of the scripts that come with Magento using local.xml?
在使用 local.xml 的 Magento 附带的其余脚本之前添加 jQuery（或任何脚本）的推荐方法是什么？
I've tried to use (in local.xml):
我尝试使用（在 local.xml 中）：
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<script>js/jquery-1.6.4.js</script>
</action>
</reference>
but this ends up adding jQuery to the end of the scripts that are added by Magento in page.xml in the base package. I've even tried removing all the scripts using:
但这最终将 jQuery 添加到 Magento 在基本包的 page.xml 中添加的脚本的末尾。我什至尝试使用以下方法删除所有脚本：
<action method="removeItem">
...
</action>
to remove all of the scripts that were added in page.xml and then re-adding them in local.xml in the order I need them to be in (jQuery first), but somehow, they are ending up in the same order (with jQuery last).
删除所有添加到 page.xml 中的脚本，然后按照我需要的顺序将它们重新添加到 local.xml 中（首先使用 jQuery），但不知何故，它们以相同的顺序结束（使用jQuery 最后）。
I've stepped through the Magento code and verified that the scripts are getting removed and then re-added to $this->_data['items'] in Mage_Page_Block_Html_Head, but at some point, when they get added to the page, they are added with jQuery last.
我已经逐步完成了 Magento 代码并验证脚本已被删除，然后重新添加到 Mage_Page_Block_Html_Head 中的 $this->_data['items'] 中，但在某些时候，当它们被添加到页面时，它们是最后添加了 jQuery。
I'm guessing there has to be a more elegant way to do this, but I've yet to find it in my Googling. Everything I've found recommends modifying page.xml directly, which I've read elsewhere is not a good idea.
我猜必须有一种更优雅的方法来做到这一点，但我还没有在我的谷歌搜索中找到它。我发现的所有内容都建议直接修改 page.xml，我在别处读过的这不是一个好主意。
回答by cfx
My preferred (and the most flexible way) to do this is through XML using local.xml, two separate Javascript files, and a new file we will create. The first Javascript file is jQuery itself--completely unmodified. The second file I call no-conflict.jsand it contains only one line:
我首选（也是最灵活的方式）是通过 XML using local.xml、两个单独的 Javascript 文件和我们将创建的一个新文件。第一个 Javascript 文件是 jQuery 本身——完全未经修改。我调用的第二个文件no-conflict.js只包含一行：
jQuery.noConflict();
Now we add both of these files, along with a new block, to the head section of our local.xml:
现在我们将这两个文件以及一个新块添加到我们的 head 部分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.jsis necessary to allow jQuery to work alongside Prototype, the Javascript framework included in Magento by default. Keeping jQuery and a no-conflictfile separated allows you to upgrade or downgrade jQuery as needed without the need to edit the jQuery file itself to include the noConflict()method.
no-conflict.js必须允许 jQuery 与 Prototype 一起工作，Prototype 是默认包含在 Magento 中的 Javascript 框架。将 jQuery 和no-conflict文件分开允许您根据需要升级或降级 jQuery，而无需编辑 jQuery 文件本身以包含该noConflict()方法。
In our XML we created a new block (topScripts) with the template file set to top_scripts.phtml.
在我们的 XML 中，我们创建了一个新块 ( topScripts)，模板文件设置为top_scripts.phtml.
Navigate to /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/and create this new file. It will contain one line:
导航到/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/并创建这个新文件。它将包含一行：
<?php echo $this->getCssJsHtml(); ?>
<?php echo $this->getCssJsHtml(); ?>
Now edit /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml.
现在编辑/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml。
Find the line <?php echo $this->getCssJsHtml() ?>in your head.phtmland add this line directly above it:
找到这行<?php echo $this->getCssJsHtml() ?>你head.phtml和直接添加上面这行：
<?php echo $this->getChildHtml('topScripts') ?>
<?php echo $this->getChildHtml('topScripts') ?>
You have now correctlyadded jQuery before any other Magento Javascript.
您现在已经在任何其他 Magento Javascript 之前正确添加了 jQuery。
回答by Kenny
Best is to use the content delivery network which will be better in performance/speed for your website.
最好是使用内容交付网络，这将为您的网站提供更好的性能/速度。
I mostly just open up template/page/html/head.phtml and right before
我大多只是打开 template/page/html/head.phtml 和之前
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
I add:
我加：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Also make sure you run the jQuery.noConflict() method and always use the full jQuery name instead of the $ (dollar sign) to avoid conflicts with prototype ;)
还要确保您运行 jQuery.noConflict() 方法并始终使用完整的 jQuery 名称而不是 $（美元符号）以避免与原型冲突；)
回答by jprofitt
You can add it in your block files with $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js');in the _prepareLayout()method
您可以在块的文件与添加它$this->getLayout()->getBlock('head')->addJs('path/to/jquery.js');的_prepareLayout()方法
One caveat, Magento uses Prototype, so you'll need to make sure you set jQuery to another variable other than simply $. Adding this to the page made it work for me:
一个警告，Magento 使用 Prototype，因此您需要确保将 jQuery 设置为另一个变量，而不是简单的$. 将此添加到页面使其对我有用：
var $j=jQuery.noConflict();
Then you just use $jwhere you would normally use $
然后你只需使用$j你通常使用的地方$
回答by user3346811
As an alternative way, and instead of manually editing Magento files each time, you can simply add jQuery using this extension: http://www.intersales.de/shop/magento-magejquery.html
作为替代方法，您无需每次都手动编辑 Magento 文件，只需使用此扩展程序添加 jQuery：http: //www.intersales.de/shop/magento-magejquery.html
What it does for you is download the jQuery version you specify and install all needed files automatically while also adding the references to your template. In the backend you can specify the desired version and also activate the no-conflict setting.
它为您所做的是下载您指定的 jQuery 版本并自动安装所有需要的文件，同时还将引用添加到您的模板中。在后端，您可以指定所需的版本并激活无冲突设置。
