Carrousel magento

avril 14, 2010 2 Commentaires

Ajouter un carrousel sur la page d’accueil de magento. Ce tutoriel décris la marche à suivre les images du carrousel ne seront pas cliquable un autre tutoriel ajoutera cette fonctionnalité. Le carrousel est un bon moyen pour présenter les nouveaux produits ou un panel de produit sous forme de galerie d’images animées.

Suite à une demande d’un membre de fragento je déterre ce vieux tutoriel qui s’était perdu dans les entrailles de mon blog ( dans les oubliettes des articles portant le statut « brouillon « )

Télécharger les éléments du carrousel

code du carrousel

<action method="addJs"><script>jquery/jquery-1.2.3.pack.js</script></action> 
<action method="addCss"><stylesheet>css/jcarousel/stylecarou.css</stylesheet></action>
<action method="addCss"><stylesheet>css/jcarousel/jquery.jcarousel.css</stylesheet></action>            
<action method="addCss"><stylesheet>css/jcarousel/skin.css</stylesheet></action>            
<action method="addJs"><script>jquery/jquery.jcarousel.pack.js</script></action>
<action method="addJs"><script>jquery/jquery.jcarousel.js</script></action>

Dans le fichier bloggento-install\skin\frontend\default\default\css\carousel mettre les CSS cités ci dessus.

Rajouter les javascript du carrousel dans le dossier JS de magento.

Sur la page d’accueil de magento ajoutez ce code dans le contenu de la page CMS. Dans le back office de magento allez sur CMS gestion des pages et home page placer ce code :

<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
    if (state != 'init')
        return;
 
jQuery.get('{{skin url='images/dynamic_ajax.txt'}}', function(data) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
    });
};
 
function mycarousel_itemAddCallback(carousel, first, last, data)
{
    var items = data.split('|');
    for (i = 0; i < items.length; i++) {
        carousel.add(i+1, mycarousel_getItemHTML(items[i]));
    }
 
    carousel.size(items.length);
};
 
 
function mycarousel_getItemHTML(url)
{
 return '<img src="' + url + '" width="75" height="75" alt="" />';
};
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});
 
</script>
<div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-ie7">
    <!-- The content will be dynamically loaded in here -->
  </ul>
</div>

Le lien vers les images ce situe dans le fichier le CSS skins et aussi en dur dans le fichier dynamic_ajax.txt. j’ai ajouté un dossier carrousel dans le dossier images
le fichier .txt contient ces lignes :

http://localhost/bloggento-install/skin/frontend/default/default/images/caroussel/home_main_callout.jpg|

http://localhost/bloggento-install/skin/frontend/default/default/images/caroussel/home_main_callout1.jpg|

http://localhost/bloggento-install/skin/frontend/default/default/images/caroussel/home_main_callout2.jpg|

http://localhost/bloggento-install/skin/frontend/default/default/images/caroussel/home_main_callout3.jpg|

http://localhost/bloggento-install/skin/frontend/default/default/images/caroussel/home_main_callout4.jpg|

http://localhost/bloggento-install/skin/frontend/default/default/images/caroussel/home_main_callout5.jpg

Voici un aperçu du résultat la galerie d’images apparait sur la page d’accueil de magento. Vous pouvez placer ce carrousel dans les catégories ou autres pages magento.

Caroussel magento, une galerie d'images animées sur la page d'accueil de magento

Caroussel magento, une galerie d'images animées sur la page d'accueil de magento


code du carrousel Vous pouvez améliorer le carrousel ou le rendre le défilement des images automatiques, plusieurs options sont disponible pour cela consultés la documentation.

Code
2 commentaires : “Carrousel magento”
  1. Pihtt dit :

    Est-ce que la cohabitation prototype/jquery que ce tuto impose ne présente aucun risque ?

  2. cédric rousset dit :

    Bonjour,
    Il existe des tutoriels pour rendre compatible jquery et prototype. Personnellement j’utilise le moins possible jquery. Pourquoi utiliser jquery quand protoype (déjà intégré dans magento) Peut le faire aussi bien :)

Poster un commentaire

(obligatoire)

(obligatoire)