原型旋转木马

Question

我正试图将旋转木马功能与我的Magento商店集成起来，但到目前为止却失败了。

我研究过owl旋转木马(http://owlgraphic.com/owlcarousel/)，但无法将它与Magento集成。我认为这可能是因为owl旋转木马基于jquery，而Magento只支持原型-js，而不是jquery。我对noConflict程序不太确定。

将非常感激一步一步地集成猫头鹰旋转木马，或者可能是另一个原型JS旋转木马与Magento的集成。

提前谢谢。

Answer 1

这个答案涉及到OPs希望使用猫头鹰旋转木马-它没有解决使用PrototypeJs的旋转木马的问题。

如果计划使用jQuery，则需要添加OwlCarousel。虽然我在原型旁边添加了第二个库，但我过去在Magento安装时也使用过猫头鹰传送带。

1. 要么链接jQuery的CDN副本并将其添加到主题的head.phtml文件中，要么将jQuery添加到皮肤/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>

1. 以类似的方式添加猫头鹰库(默认句柄将全局加载该句柄，但您可以轻松地将其限制在仅适用的页面上)，我使用下面的示例将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>

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

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

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

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