猫头鹰旋转木马在 Magento 1.8 中不起作用

Question

让 Owl Carousel 为我的 Magento 设置工作，我度过了一段地狱般的时光。我已将以下内容加载到我的 .xml Here is the site

<default>

    <reference name="head">
        <action method="additem">
        <type>skin_js</type>
        <name>js/jquery-1.9.1.min.js</name>
    </action>

    <action method="additem">
        <type>skin_js</type>
        <name>js/owl.carousel.min.js</name>
    </action>

    <action method="addCss">
        <stylesheet>css/owl.carousel.css</stylesheet>
    </action>

    <action method="addCss">
        <stylesheet>css/owl.theme.css</stylesheet>
    </action>

将正确的文件添加到 Magento 的文件夹中。

以下代码出现在我的网站上，但不是插件。

<div id="owl-demo" class="owl-carousel owl-theme">
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl1.jpg"   alt=""></div>
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl2.jpg" alt=""></div>
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl3.jpg"  alt=""></div>
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl4.jpg" alt=""></div>
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl5.jpg" alt=""></div>
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl6.jpg" alt=""></div>
<div><img src="http://www.battingtunnel.com/media/wysiwyg/owl/owl7.jpg" alt=""></div>
</div>

Answer 1

我怀疑您需要 jQuery 处于 noConflict 模式，否则它会与 Prototype 库发生冲突，该库也使用 $ 作为全局命名空间中的变量名。

您可以编辑 jQuery-min-1.9.0.js 的本地副本，在文件末尾添加行 jQuery.noConflict();。

然后检查 Owl 可以回退到 jQuery() 并且没有硬编码为使用 $（如果是，那么您可以包装 Owl 代码以使其可以使用本地 $ - - see the jQuery noConflict docs)

那么'你所要做的'就是让jQuery在prototype.js之前加载。我使用这个Inchoo module 的修改版本。让我知道您是否需要更多指导来让 Prototype 和 jQuery 在同一页面上工作，但我确定 jQuery 需要先加载，然后去 noConflict 释放“$”，然后prototype.js 可以加载并建立“$”在全局命名空间中（这是我安排它发生在使用 jQuery 和 Prototype 的 Magento 网站上的方式）。