Méthode #1 : vous avez une contrainte responsive
Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :
- app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
- skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries
list.phtml
Trouver la ligne suivante sous la section <?php // Grid Mode ?> :
|
|
<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col"> |
…et ajouter les classes suivantes :
|
|
<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col"> |
Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.
_product-list.scss
Pour info : les variables prédéfinies à exploiter
- $product-column-spacing : espace entre les colonnes (valeur en px).
- $productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).
Repérer le mixin suivant :
|
|
@include bp(min-width, 960px) { @include product-grid(4, 960); @include product-grid(5, 960); @include product-grid(6, 960); } |
…et ajouter juste en dessous :
|
|
@include bp(min-width, 993px) { @include product-grid(3, 993); } @include bp(max-width, 992px) { @include product-grid(2, 992); } @include bp(max-width, 360px) { @include product-grid(1, 360); } |
Méthode #2 : vous n’avez pas de contrainte responsive
Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.
catalog.xml :
Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :
|
|
<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns --> <action method="setColumnCount"><count>3</count></action> |
Modifier la valeur de <count /> selon le nombre de colonnes souhaité.
Méthode #3 (bidouille – ne pas utiliser)
Source : How to change product column quantity in Magento
Il faut modifier 2 fichiers :
- app/design/frontend/default/yourtheme/layout/catalog.xml
- app/design/frontend/default/yourtheme/template/catalog/product/list.phtml
catalog.xml :
Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :
|
|
<reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template></action> </reference> |
Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.
list.phtml :
Trouver la ligne suivante sous la section <?php // Grid Mode ?> :
|
|
<?php $_columnCount = $this->getColumnCount(); ?> |
…et la remplacer par :
|
|
<?php $_columnCount = 3 ?> |
Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.
