jquery - 原型(prototype)轮播

Question

我正在尝试将轮播功能与我的 Magento 商店集成，但到目前为止失败得很惨。

我研究过 owl carousel ( http://owlgraphic.com/owlcarousel/ )，但无法将其与 Magento 集成。我认为这可能是因为 owl carousel 是基于 jquery 的，而 Magento 仅原生支持 prototype-js，而不是 jquery。我不太确定 noConflict 程序。

非常感谢有关将 Owl Carousel 或替代 Prototype-JS carousel 与 Magento 集成的分步指南。

提前致谢。

Answer 1

这个答案适用于希望使用 Owl Carousel 的 OP - 它没有解决使用 PrototypeJs 的轮播的问题

如果您计划使用 OwlCarousel，则需要添加 jQuery。虽然在 Prototype 旁边添加第二个库让我很痛苦，但我过去也在 Magento 安装上使用过 Owl Carousel。

1. 链接 jQuery 的 CDN 副本并将其添加到主题的 head.phtml 文件中，或者将 jQuery 添加到 Skin/js 文件夹中并将其添加到布局中。

例如在 page.xml 中(或任何需要加载 jQuery 的地方) - 如果在 default 句柄下，这将在您的前端全局加载它。

    <reference name="head">
        ...
        <action method="addItem"><type>skin_js</type><name>js/vendor/jQuery/jQuery.1.11.min.js</name></action>
       ...
    </reference>

以类似的方式添加 Owl 库(默认句柄将全局加载它，但您可以轻松地将其限制为仅适用的页面)我将 owl 放置在我的 skin/frontend/[package]/[theme] 中/js/vendor/ 文件夹，使用下面的示例。

例如在 page.xml - 或适当的布局文档上

 <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/vendor/OwlCarousel/owl-carousel/owl.carousel.min.js</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>js/vendor/OwlCarousel/owl-carousel/owl.carousel.css</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>js/vendor/OwlCarousel/owl-carousel/owl.theme.css</name>
        </action>
    </reference>
</default>

使用您希望使用的模板来实现 owl，或者更好的是，添加一个单独的脚本来处理该功能并将其添加到您的布局中。

例如如果您要将其直接添加到加载轮播内容的 .phtml 文件中。显然，选择器仅用于演示。

<script>
    (function ($) {
        $(document).ready(function(){
            var brandSlides = $("#hero-slides");

            $(brandSlides).owlCarousel({
                 ... OWL OPTIONS ...
            });
        });
    }(jQuery));
</script>