添加一些 jquery 脚本到 Magento 页面

Question

这让我发疯。我不知道如何将一些 jquery 脚本附加到 Magento 1.4.2 中特定页面的头部。我通过编辑 page.xml 将最新的 jquery 库添加到所有页面，并且添加了无冲突的内容。

我知道我需要向相关页面的自定义布局更新区域添加一些代码。然而，没有任何效果，我尝试了很多代码，当我稍后检查源代码时，没有一个出现在页面的头部。

我在 mangeto 官方论坛上发布了同样的问题，但八天后没有回复。该论坛很难获得建议，大多数问题都没有得到解答:(。例如，知道如何通过自定义布局更新将其添加到头部吗？

$(document).ready(function(){
    $("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

我尝试将其包含在脚本标签中，在引用 = head 标签中。没有任何效果。拔出我的头发，我用谷歌搜索了我能想到的每一个单词短语，但没有关于如何在 Magento 中添加脚本到页面头部的示例，请帮忙。

Answer 1

扩展艾伦的精彩总结。如果您只想将文件添加到一个特定页面，您可以在布局更新 XML 字段中使用以下代码片段：

<reference name="head">
    <action method="addJs"><script>path/to/my/file.js</script></action>
</reference>

并将文件放入
http://example.com/js/path/to/my/file.js

或者如果您希望它位于您的皮肤文件夹中，请使用

<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/file.js</name><params/></action>
</reference>

预期位置
http://example.com/skin/frontend/base/default/js /file.js
根据您正在使用的包和主题更改基本和默认值

您还可以在任何其他layout/?.xml 文件中使用上面的代码片段，只需将其放在您想要处理的布局句柄中即可。例如，要将其放置在 cms.xml 中的所有 cms 页面中，您将找到

<cms_page>
 ....
</cms_page>

并将其更改为

<cms_page>
    ...
    <reference name="head">
        <action method="addJs"><script>path/to/my/file.js</script></action>
    </reference>
</cms_page>

另一个简单的用于向所有页面添加 javascript 片段的方法
转到系统>配置>设计>页脚>其他 HTML

进一步阅读：

使用 local.xml主题定制

揭秘Magento的布局XML

Answer 2

如果您已添加 jQuery 库并打开 noConflict 模式，那么您应该尝试使用 jQuery 变量而不是 $ 访问 jQuery 对象代码>变量。像这样尝试一下，看看它是否有效：

jQuery(document).ready(function(){
    jQuery("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

如果这不起作用，您应该在脚本运行之前仔细检查 html 输出，看看是否包含 jQuery 库。这一点至关重要，因为 JavaScript 在页面上从上到下顺序处理。

Answer 3

您可以通过以下三种不同的方法来执行此操作。我很难说其中一个比另一个更“正确”。

第一种方法：听起来您已经使用 page.xml 将基本 jQuery 库添加到您的页面中。如果您知道如何执行此操作，则可以添加类似于

<action method="addJs"><script>path/to/my/file.js</script></action>

为 jQuery 添加的操作下面的内容。然后，将代码放置在最终链接到您头脑中的 file.js 文件中。

第二种方法：如果您查看头部的 Block 类，您将看到模板文件的设置位置。

app/code/core/Mage/Page/Block/Html/Head.php

...
protected function _construct()
{
    $this->setTemplate('page/html/head.phtml');
}

在主题中找到 page/html/head.phtml 并将代码直接添加到 page.html 中。

第三种方法：如果你查看上面提到的page.html，你会看到这一行。

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

通常，getChildHtml方法用于渲染特定的子块。但是，如果不带参数调用，getChildHtml 将自动渲染所有子块。这意味着您可以向 page.xml 添加类似内容

<!-- existing line --> <block type="page/html_head" name="head" as="head"> 
    <!-- new sub-block you're adding --> <block type="core/template" name="stackoverflow" as="stackoverflow" template="page/stackoverflow.phtml"/>
    ...

，然后添加 stackoverflow.phtml 文件。添加到头块的任何块都将自动渲染。 （此自动渲染不适用于所有布局块，仅适用于不带参数调用 getChildHtml 的块）

您的 phtml 文件不需要位于 page/ 中，您可以将其放置在主题模板文件夹结构中的任何位置。 stackoverflow.phtml 文件将包含您想要添加到头部的 JavaScript

<script type="text/javascript">
    alert("Test");
</script>