原型轮播

Question

我正在尝试将轮播功能与我的Magento商店整合，但到目前为止都失败了。

我查看了猫头鹰旋转木马（http://owlgraphic.com/owlcarousel/），但无法将其与Magento整合。我认为这可能是因为owl carousel基于jquery，而Magento本身只支持prototype-js，而不是jquery。我对noConflict程序不太确定。

非常感谢有关整合Owl Carousel或者可能是另一种Prototype-JS轮播与Magento 的分步指南。

提前致谢。

Answer 1

这个答案与OP希望使用Owl Carousel有关 - 它没有解决使用PrototypeJs旋转木马的问题

如果您打算使用OwlCarousel，则需要添加jQuery。虽然我很难在Prototype旁边添加第二个库，但我过去也曾在Magento安装中使用过Owl Carousel。

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

E.g。在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>

1. 以类似的方式添加猫头鹰库（默认句柄将全局加载，但您可以轻松地将其限制为仅适用的页面）我使用以下示例将猫头鹰放入skin/frontend/[package]/[theme]/js/vendor/文件夹中。

E.g。在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>

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

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

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

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