Prototype Carousel

Question

J'essaie d'intégrer la fonctionnalité de carrousel à mon magasin Magento, mais j'ai échoué lamentablement jusqu'à présent.

J'ai regardé dans le carrousel de hibou (http://owlgraphic.com/owlcarousel/) mais je n'ai pas réussi à l'intégrer avec Magento. Je pense que cela pourrait être dû au fait que owl carrousel est basé sur jquery alors que Magento ne supporte nativement que des prototypes, pas des jquery. Je ne suis pas trop sûr de la procédure noConflict.

Apprécierait vraiment un guide étape par étape sur l'intégration soit Owl Carousel, ou peut-être un autre carrousel Prototype-JS avec Magento.

Merci d'avance.

Answer 1

Cette réponse se rapporte aux programmes opérationnels souhaitent utiliser Owl Carousel - il ne répond pas à la question de l'aide d'un carrousel avec prototypejs

Vous devrez ajouter jQuery si vous prévoyez d'utiliser OwlCarousel. Alors que ça me fait mal d'ajouter une deuxième bibliothèque à côté de Prototype, j'ai aussi utilisé Owl Carousel sur les installations de Magento.

1. Soit un lien copie CDN de jQuery et l'ajouter à votre fichier head.phtml de thème ou ajouter jQuery à votre peau/dossier js et l'ajouter à votre mise en page.

E.g. dans page.xml (ou partout où vous avez besoin de charger jQuery) - si sous la poignée default, cela va le charger globalement sur votre frontal.

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

1. Ajouter la bibliothèque Owl de façon similaire (la poignée par défaut chargera ce dans le monde, mais vous pouvez facilement limiter ce aux seules pages applicables) Je posai hibou dans mon skin/frontend/[package]/[theme]/js/vendor/ dossier en utilisant l'exemple ci-dessous.

E.g. sur page.xml - ou d'un document de mise en page appropriée

<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. Mettre en oeuvre hibou avec le modèle que vous souhaitez utiliser, ou mieux, ajouter un script séparé pour gérer la fonctionnalité et l'ajouter à votre disposition.

E.g. si vous deviez l'ajouter directement au fichier .phtml où le contenu de votre carrousel est chargé. Évidemment, les sélecteurs sont pour la démonstration seulement.

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

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