将jQuery添加到Magento

Question

将jQuery添加到Magento

6

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

我尝试过在local.xml中使用以下代码：

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

但是这样会在Magento的page.xml文件中添加jQuery到基础包中已经添加的脚本的末尾。我甚至尝试使用以下代码删除所有脚本：

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

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

我已经逐步检查了Magento代码，并验证了这些脚本被删除，然后在Mage_Page_Block_Html_Head中重新添加到$this->_data['items']中，但在某个时候，当它们被添加到页面时，它们会以jQuery最后的方式添加。

我猜想必须有一种更优雅的方法来解决这个问题，但我在谷歌搜索中还没有找到。我发现所有推荐的修改page.xml的方法都不是一个好主意。

- Luke

4个回答

10

最好使用内容分发网络，在网站性能/速度方面会更好。

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

- Kenny

这个很好用！谢谢。一个编辑是src属性的开头缺少http:。因为我的编辑不到6个字符，所以无法编辑。 - Luke

太好了 ;)，这是由于mod_pagespeed的原因，对此感到抱歉。我已更新回复。 - Kenny

1

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

需要注意的是，Magento使用原型，因此您需要确保将jQuery设置为除$以外的其他变量。将以下内容添加到页面中可使其正常工作：

var $j=jQuery.noConflict();

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

- jprofitt

将此添加到_prepareLayout()方法中是否需要编辑核心文件？还是有一种方法可以在我的主题内覆盖核心文件？ - Luke

1

如果您想要扩展功能而不是创建自己的功能，请查看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/。如果您正在创建自己的主题，您可以将其添加到<head>中。 - jprofitt

1

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

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

- user3346811

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cfx · Accepted Answer

我个人偏好（也是最灵活的方式）使用 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能够与默认情况下包含在Magento中的Javascript框架Prototype一起工作。将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。