如何通过 CMS 将外部 jQuery 添加到 Magento <head />？答案

【问题标题】：How can I add external jQuery to Magento <head /> via the CMS?如何通过 CMS 将外部 jQuery 添加到 Magento <head />？
【发布时间】：2012-03-03 23:56:48
【问题描述】：

在安装 Magento 时，我试图将 xml 插入到我主页的布局更新 XML 中。我已经有一些正在工作的 xml，但我想添加一个 jQuery 脚本来运行我的幻灯片。我在 page.xml 中有它（并计划在某个时候将它移动到我的 local.xml），它在那里工作，但它破坏了产品页面上的添加到购物车。所以，我想我会合并到主页上，并将其放入布局更新 XML。由于某种原因，它没有通过。

<reference name="head">
<action method="addJs"><script>jquery/jquery-1.7.1.noConflict.min.js</script></action>
<action method="addJs"><script>folder/slider.js</script></action>
</reference>

任何想法为什么它可以在我的 page.xml 中工作而不是在这里？

这是page.xml中的嵌套思路

<default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>

【问题讨论】：

对我来说很好。你把这些js文件放在哪里了？主页，你的意思是CMS页面主页吗？您是否将它放在最初包含注释代码

标签： xml magento content-management-system

【解决方案1】：

你可以这样做：

将javascript添加到local.xml

<layout version="0.1.0">
<default>
   <reference name="head">
      <action method="addJs"><script>jquery/jquery-1.7.1.min.js</script></action>
      <action method="addJs"><script>jquery/carouFredSel.js</script></action>
   </reference>
</default>
</layout>

然后制作一个自定义主页模板（参考 1column.phtml ），从 CMS 中为主页选择此模板。

将以下内容放在“设计”选项卡的主页“XML 布局更新”部分。这是我的设置，我从主页中删除了整个原型脚本是因为不想要。

<reference name="head">
<action method="removeItem"><type>js</type><script>prototype/prototype.js</script></action>
<action method="removeItem"><type>js</type><script>prototype/validation.js</script></action>
<action method="removeItem"><type>js</type><name>scriptaculous/builder.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/effects.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/dragdrop.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/controls.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name><params/></action>
<action method="removeItem"><type>js</type><name>lib/ccard.js</name><params/></action>
<action method="removeItem"><type>js</type><name>varien/menu.js</name><params/></action>
<action method="removeItem"><type>js</type><name>varien/js.js</name><params/></action>
<action method="removeItem"><type>js</type><name>mage/translate.js</name><params/></action>
<action method="removeItem"><type>js</type><name>varien/form.js</name><params/></action>
<action method="removeItem"><type>skin_js</type><script>js/prototype.formalize.min.js</script></action>
<action method="removeItem"><type>skin_css</type><name>css/formalize.css</name><params/></action>

另外，不要创建特定的 noConflict 页面，只需将运行良好的 jQuery 脚本结束即可。

例如，这是我的：

jQuery&&define("jquery",[],function(){return f})})(window);var $jQuery = jQuery.noConflict();

另外，你应该在根js目录下创建jquery文件夹，而不是在皮肤文件夹js目录下。

【讨论】：

非常感谢您的回复。非常有帮助。您对 local.xml 的代码建议有效，但我不知道如何将其应用于主页。当它加载到产品页面时，添加到购物车按钮不起作用（结帐中可能有其他东西会中断）。这是我用来在我的 local.xml <reference name="head" template="page/home.phtml"> 中引用两个外部 jquery 脚本的方法，但它适用于所有页面。
糟糕，抱歉。这就是全部。 <block template="page/home.phtml"> <reference name="head" template="page/home.phtml"> <action method="addJs"><script>jquery/jquery-1.7.1.min.js</script></action> <action method="addJs"><script>folder/slider.js</script></action> </reference> </block>
因此，忘记local.xml，只需将jquery脚本从CMS像action method="addItem"一样放入主页，但不要删除特殊的主页布局home.phtml。
另外，别忘了，<type>js</type> 和 <type>skin_js</type> 是有区别的。 skin_js是皮肤文件夹javascript目录，其他根目录是javascript目录。
好的。感谢您的时间！我仍然无法加载它。这是我在布局更新 XML 中的代码：<reference> <reference name="head"> <action method="addJs"> <script>jquery/jquery-1.7.1.min.js</script> </action> <action method="addJs"> <script>folder/slider.js</script> </action> </reference> <reference name="footer"> <block type="cms/block" name="cms_footer_suppliers"> <action method="setBlockId"> <block_id>footer_suppliers</block_id> </action> </block> </reference> </reference>。似乎即使它无法获得正确的 .js 文件，它也会构建链接