将jQuery添加到Magento

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

我试图使用（在那个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，这是我在其他地方读过的，不是一个好主意。

来源

2011-09-29 Luke

最好是使用内容传送网络，这将在性能/速度更好地为你的网页。

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

来源

2011-09-29 14:37:35 Kenny

这很好！谢谢。一个编辑是从src属性开始缺少http：。不会让我编辑，因为我的编辑不是> 6个字符。 – Luke

很好;），这是因为mod_pagespeed，对不起。更新了我的回复。 – Kenny

您可以在块的文件与$this->getLayout()->getBlock('head')->addJs('path/to/jquery.js');在_prepareLayout()方法添加它

一个警告，Magento会用原型，所以你需要确保你不是简单地$设置jQuery的另一个变量等。添加该页面使得它为我工作：

var $j=jQuery.noConflict();

然后你只需要使用$j，你通常会使用$

来源

2011-09-29 14:12:14 jprofitt

不会将此添加到_prepareLayout（）方法需要编辑核心文件？或者有没有办法覆盖我的主题中的核心文件？ – Luke

如果您试图扩展功能，而不是自己创建功能，请查看http://prattski.com/2010/06/24/magento-overriding-core-files-blocks-models-resources-controllers/和http://prattski.com/2010/06/24/magento-overriding-core-files-blocks-models-resources-controllers/。如果你正在创建自己的主题，你可以随时添加它在 – jprofitt

我的首选（也是最灵活的方式）是通过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一起工作，默认情况下，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。

找到行<?php echo $this->getCssJsHtml() ?>在head.phtml和直接添加它上面这一行：

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

你现在正确加入jQuery的任何其他的Magento的JavaScript之前。

来源

2012-07-08 00:39:26 cfx

创意！这现在是我的新的首选方式！ – andnil

虽然这个工作原理没有回答如何在其余脚本之前包含Jquery的问题。 – Christian

编辑添加所有其他Magento Javascript的jQuery！ – cfx

作为一种替代方式，而不是手动编辑Magento的每一次文件，你可以jQuery的使用这个扩展只需添加：http://www.intersales.de/shop/magento-magejquery.html

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

来源

2014-02-24 13:20:30 user3346811

将jQuery添加到Magento

回答

相关问题