将jQuery添加到Magento

Question

在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>

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

Answer 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中,我们创建了一个新的block(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') ?>

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

Answer 2

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

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