原型旋转木马

Question

我正在尝试将旋转木马功能与我的Magento商店集成，但迄今为止失败惨不忍睹。

我已经看着猫头鹰旋转木马（http://owlgraphic.com/owlcarousel/），但无法设法将其与Magento集成。我认为这可能是由于猫头鹰旋转木马基于jquery，而Magento只支持prototype-js而不是jquery。我不太确定noConflict过程。

真的很感谢关于整合猫头鹰传送带，或者一个替代Prototype-JS传送带和Magento的分步指南。

在此先感谢。

Answer 1

这个答案涉及到OPS希望使用猫头鹰旋转木马 - 它不涉及使用与PrototypeJs

转盘您将需要添加的jQuery，如果你打算使用OwlCarousel的问题。虽然我很难在Prototype旁边添加第二个库，但在过去的Magento安装中，我也使用了Owl Carousel。

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> 

添加猫头鹰库中类似的方式（默认的手柄将在全球范围加载这个，但你可以很容易地限制这仅适用页）我把猫头鹰在我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> 

实现你想使用它，或者更好的模板猫头鹰，添加一个单独的脚本来处理的功能，并将其添加到你的布局。

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

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

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