1

我正在编辑一个模板，我需要在其中添加一个在产品页面上显示一些 HTML 内容的灯箱。准确地说，不是“添加到购物车”按钮，而是会弹出一些内嵌灯箱内容的按钮。

我看过的所有灯箱替代品都要求我使用 CDN 继承 jQuery。像这样： <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

我正在使用的模板在 head.phtml 和其他页面中使用了一堆自定义脚本。像：

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/ver_menu.js');?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/custommenu.js');?>"></script>

因此，当我在 head.phtml 甚至产品页面中添加此行时，我的顶部菜单停止下拉并且产品信息选项卡停止工作，所有信息都显示在我的产品页面上（而不是出现在各自的选项卡下） .

有没有办法可以避免 jQuery 脚本之间的这种干扰，以使灯箱（在产品页面 - view.phtml 上）工作并且不影响我的菜单和信息选项卡。

已经为此苦苦挣扎了一段时间，主题作者也不愿意提供帮助。

我已经尝试过放置我在上面发布的 jQuery Line，但没有运气。任何方式我都可以使用 magento 的核心 jQuery 脚本来使我的灯箱工作......

另外，我使用 colorbox 来实现灯箱效果。(http://www.jacklmoore.com/colorbox)

我无能为力，但我可以为任何能帮助我解决这个问题的人提供晚餐和啤酒。真的要靠你们了...

4

3 回答 3

1

我这样做我在/templatefiolder/page/html/head.phtml中添加了这个代码：

 <!-- adding jQuery -->
<script type="text/javascript" src="http://linktoJquery/jquery.tools.min.js"></script>

<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script>

由于与原型冲突，我添加了这个 $j。在这种情况下，你总是必须像这样做 jQuery 事情：

<script>
// execute your scripts when DOM is ready. this is a good habit
$j(function() {     

    $j(".scrollable").scrollable();

});
</script>
于 2012-08-20T14:10:42.303 回答
0

不要在 Magento 网站上通过 CDN 使用 jQuery。它会引起问题。相反，将其托管在您的服务器上。打开脚本，添加：

jQuery.noConflict();

在文件的末尾。将其重命名为类似 jquery.min.no-conflict.js 的内容，以便将来任何人都可以清楚地看到它在 noConflict() 模式下运行，并确保它在任何其他基于 jQuery 的脚本之前加载。

由于您处于 noConflict() 模式，您应该使用“jQuery”作为实例化器构建任何 jQuery 脚本，而不是 $（由 Prototype 使用，Magento 1.x 中使用的 javascript 框架）。

于 2012-08-20T10:18:21.827 回答
0

您尝试过的灯箱是 jQuery 插件，需要 jQuery 库。无论您是托管图书馆还是让其他人托管它（如 CDN）都没有关系。如果您的页面已经在运行 jQuery 版本，您可能根本不需要添加任何内容。

如果您的页面正在使用其他使用 $ 别名的脚本，那么您将需要使用 noConflict ，如 pspahn 所说。之后，如果不创建本地范围并将其分配到那里，您将无法再使用 '$' 作为 jQuery 的别名。例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script src='jquery.colorbox-min.js'></script>
<script>
  jQuery(document).ready(function(){
    var $ = jQuery; // create an alias for typing convenience
    $('a.example').colorbox();
  });
</script>
于 2012-08-20T13:20:25.847 回答