在 Magento 中使用 jQuery

在工作中，我们正在为客户开发一个网站，使用的是 Magento 电子商务软件。 这是我第一次使用它，我发现它非常棒（而且它是免费的！）。 它有很多优点，我们可能在以后再讨论，但它使用 Prototype 作为 JavaScript 库。 现在我确信 Prototype 很棒，但是我对它一无所知。 我宁愿使用我熟悉的并喜欢的库，即 jQuery。 但是 Prototype 和 jQuery notoriouly 不兼容。 这就是处理这种情况的方法。

1. 最新版本的 Magento 带有一个过时的 script.aculo.us effects 文件，这是问题的一部分。 获取最新版本（目前为 1.8.2）。 您可能想在末尾加上版本号重命名它，例如effects-1.8.1.js
2. 将文件上传到 [Magento]/js/scriptaculous
3. 打开文件page.xml位于 [Magento]/app/design/frontend/default/default/layout/page.xml
4. 在大约第 41 行，将会有这样的行

   <action method="addJs"><script>scriptaculous/effects.js</script></action>

   将文件名更改为您的新文件

5. 布局文件通常会被缓存，因此您需要清除缓存才能看到效果。 登录后端并转到系统 > 缓存管理
6. 从所有缓存菜单中选择“刷新”并保存（这应该会清除您的缓存）
7. 重新加载商店页面并查看源代码，以确保加载的是您的新文件
8. 现在您需要在页面上包含 jQuery。 您可以在 page.xml 文件中添加一行，也可以打开位于 [Magneto]/app/design/frontend/default/default/template/page/html/head.phtml 的 common head.phtml 文件，并在其中添加 jQuery 的 <script> 代码
9. 最后一步是确保 jQuery 处于 .noConflict(); 模式。 这是确保它与 Prototype 相安无事，以防止冲突的最后一步
10. 现在您需要设置 noConflict 并以该模式编写代码。 基本上，您用新的简写（在本例中为 $j）替换正常的“$”。

    var $j = jQuery.noConflict(); 
    
    $j(document).ready(function(){
        $j("#test").css("padding","10px");
    });

请注意，我并没有发明这个解决方案，我只是想整合我在研究这个问题时找到的信息。 大部分内容来自 维基百科 和 此主题，您可以参考以了解更多信息。