Blog Magento

On veut afficher ces produits choisis dans un slideshow.

J’ai choisis le script glider.js, utilisant la librairie Scriptaculous. Cette librairie est déjà utilisée par Magento. Cela évite ainsi de charger une nouvelle librairie.

1- On insère le code javascript dans app/design/frontend/default/mon-theme/layout/page.xml
On insère ces lignes vers la ligne 50 :

2-Télécharger glider.js et l’ajouter dans le dossier js/

3- On enregistre le fichier app/design/frontend/default/mon-theme/template/catalog/product/list.phtml sous defil.phtml

Exemple de fichier defil.phtml

<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg">
    <?php echo $this->__('There are no products matching the selection.') ?>
</p>
<?php else: ?>
<div id="slider">
    <a href="#" onClick="my_glider.previous();return false;" class="bt">
        <img src="<?php echo $this->getSkinUrl('images/voiture-prev.png'); ?>"  alt="Voiture précédente" /></a>
    <div class="scroller">
        <div class="content">
            <?php $_iterator = 0; ?>
            <?php foreach ($_productCollection as $_product): ?>
            <?php if ($_iterator>=4): continue;  endif;         										// on fixe le nombre de produits affichés à 4 ?>
            <div class="section" id="section<?php echo $_iterator ?>">								// on ajoute à l'id section la valeur de l'itérateur
                <div class="products-list" id="products-list">
                    <?php // Product Image ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="
                        <?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->directResize(120,120,3); ?>" width="120" height="90" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
                    <?php // Product description ?>
                    <div class="product-shop">
                        <div class="f-fix">
                            <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName())?></a></h2>
                            <?php if($_product->getRatingSummary()): ?>
                            <?php echo $this->getReviewsSummaryHtml($_product) ?>
                            <?php endif; ?>
                            <?php echo $this->getPriceHtml($_product, true) ?>
                            <?php if($_product->isSaleable()): ?>
                            <!--<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>-->
                            <?php else: ?>
                            <p class="availability out-of-stock">
                                <span>
                                    <?php echo $this->__('Out of stock') ?>
                                </span>
                            </p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
        </div>
    </div>
    <a href="#" onClick="my_glider.next();return false" class="bt">
        <img src="<?php echo $this->getSkinUrl('images/voiture-next.png'); ?>"  alt="Voiture suivante" /></a>
</div>
<script type="text/javascript" charset="utf-8">
        var my_glider = new Glider('slider', {duration:0.4, autoGlide: true});		//on peut modifier la durée en changeant 0.4 et l'éxécution automatique en mettant autoGlide:false
	</script>
<?php endif; ?>

4- On insère le style CSS relatif au slider, dans /skin/frontend/default/mon-theme/css/styles.css

/* PROMO Défilante - View Type: List */
#slider {
/* modify width and height of scrolling section if necessary */
width: 538px;
height: 98px;
background: url(../images/voiture-pas-chere.png) no-repeat ;
padding:12px 6px;
}
div.scroller {
/* modify width and height of scrolling section if necessary */
float:left;
display:inline;
width: 504px;
height: 103px;
overflow: hidden;
}
div.scroller div.section {
/* modify width and height of each section as needed (should match the size of the scroller window) */
width:480px;
height:103px;
overflow:hidden;
float:left;
display:inline;
padding:4px 1em 0 1em;
}
div.scroller div.content {
width: 10000px;
}
a.bt { display:inline; float:left; width:17px; height:103px; padding:0; cursor:pointer; }
#slider .products-list .product-name { width:235px; }
#slider .products-list .product-name a { color:#000; height:90px; width:235px; float:left; }
#slider .products-list .product-name a:hover { color:#F7CD30; }

5- On affiche le résultat avec la ligne suivante placée dans un layout

<block type=”catalog/product_list_defil” name=”product_defil” template=”catalog/product/defil.phtml”/>

Ou dans du contenu d’une page ou d’un bloc CMS

{{block type='catalog/product_list_defil' template='catalog/product/defil.phtml'}}