Toutes les images sur la liste des produits list.phtml

février 10, 2010 3 Commentaires

Code pour ajouter les images dans la liste des produits de magento et donner la possibilité de zoomer grâce à un shadowbox. Zoom similaire au zoom présent sur ce tutoriel Le but étant de donner la possibilité au client de visualiser rapidement toutes les images du produit sans allez sur la fiche produit.

Mise en place du zoom

Le zoom s’appliquera aux autres photos, un clic sur la grande photo amènera le client sur la fiche produit.
Il est nécessaire d’importer les éléments javascript et css, je ne vais pas reprendre la procédure, elle est identique à celle utilisée dans ce tutoriel : zoom sur photo fiche produit.

Toutes les images dans la liste de produits : list.phtml

Toutes les images dans la liste de produits : list.phtml

Placer le code dans le fichier

Il faut placer le code javascript dans le fichier list.phtm de votre theme.

<script type="text/javascript">
Shadowbox.init({
    language:   "fr",
   });
</script>
<?php // IMAGES GALERIE PRODUIT ?> 
<?php $_gallery = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages();  ?>
       <?php $imgcount = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages()->count();?>
            <?php if($imgcount >1): ?>
                <div class="more-views" style="clear:both; padding:0 0 0 5px;">                        
                      <table>
                          <tr>
                            <?php foreach ($_gallery as $_image ):  ?>
<td style="display:inline;">
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile()); ?>" rel="shadowbox"> <img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(71, 71); ?>" width="71" height="71" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</td>
<?php endforeach;  ?>
</tr>
</table>
</div>
<?php endif; ?>

Insérez ce code dans les deux mode de list.phtml, mode liste (list) et grille (grid)
J’ai mis le css directement dans le code pour allez plus vite mais il vos mieux l’externaliser dans un ficher CSS.

zoom sur toutes les images de la liste des produits

zoom sur toutes les images de la liste des produits

Code
3 commentaires : “Toutes les images sur la liste des produits list.phtml”
  1. Jerome dit :

    Bjr
    j ai copier coller le code mais rien s’affiche sur la liste des produits.
    mon niveau en programmation est limite. Je ne sais pas ou chercher.

  2. cédric rousset dit :

    Bonjour,
    tu est sur d’avoir coller le code au bon endroit ?

  3. Bonjour,
    ça marche nickel,
    merci bcp !!

Poster un commentaire

(obligatoire)

(obligatoire)