原型旋轉木馬

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>