[RESOLU] Comment afficher les produits sur 4 colonnes comme sur la homepage ?

[Pierre Webwalker]

Bonjour à tous,

Sur les listes de produits, peut-on afficher les produits sur 4 colonnes plutôt que sur 3, comme sur les Nouveautés et les produits phares de la homepage ?

J'ai essayé avec Firebug de changer le HTML comme ceci .col-md-4  par .col-md-3, tout comme dans les css de passer la valeur width: de 33.33 à 25%, sans succès.

Ca réduit bien la taille des images mais n'augmente pas le nombre de colonnes

Le système de grille reste très énigmatique à mes yeux, merci pour tous vos conseils

Edited May 23, 2014 by pierrewebmaster (see edit history)

[jomcdonald]

Oui, je l'ai d'ailleurs réalisé sur ma boutique: http://www.sexymoinscher.com/8-robes

 

Il faut modifier dans product-list  cette zone: (voici ma config)

	{*define numbers of product per line in other page for desktop*}
	    {if $page_name !='index' && $page_name !='product'}
		    {assign var='nbItemsPerLine' value=4}
		    {assign var='nbItemsPerLineTablet' value=2}
		    {assign var='nbItemsPerLineMobile' value=3}
	    {else}
		    {assign var='nbItemsPerLine' value=4}
		    {assign var='nbItemsPerLineTablet' value=3}
		    {assign var='nbItemsPerLineMobile' value=2}
	    {/if}

Puis comme vous l'avez fait, adapter col-md-3 avec une valeur à 25%.

Il vous faudra faire pas mal de modif sur le width % pour rester responsive et avoir un affichage en liste correct.

 

 

Cordialement

[Pierre Webwalker]

Bonjour à tous

 

Merci jomcdonald, c'est super

J'ai juste eu à modifier le tpl et à passer le .col-md-4 à 25% dans le css et ça fonctionne nickel !

même quand je teste l'affichage responsive avec Ctrl Shift M.

 

En mode liste en effet, les produits n'occupent plus que les 3/4 de la largeur (pas vraiment gênant) et idéalement il faudrait que j'arrive à modifier

<div class="center-block col-xs-4 col-xs-7 col-md-4">

par :

<div class="center-block col-xs-4 col-xs-7 col-md-6">

selon les test fait avec firebug...

Sauriez-vous ou faire cette modif ?

 

Par ailleurs, j'aimerai vraiment comprendre le fonctionnement de ce type de déclarations <div class="center-block col-xs-4 col-xs-7 col-md-5"> connaitriez-vous un tuto ?

Merci encore

Edited May 23, 2014 by pierrewebmaster (see edit history)

[jomcdonald]

Bonjour, non désolé je découvre 1.6 donc j'apprend au fur et à mesure.

 

Pour la modif en liste, il faut utiliser en css: 

.row .list .col-md-3 {
width: 100%;
}

[Pierre Webwalker]

moi aussi, je vais chercher

A propos, du :

.row .list .col-md-3 {
width: 100%;
}

je mets ou je le trouve ou ?

merci

[jomcdonald]

Dans le css product-list normalement, il faut le créer.

[Pierre Webwalker]

Ca ne fonctionne pas, mais j'ai fini par trouver ce que je cherchais

 

Pour ceux que cela intéresserai, dans les listes de produit en affichage sur 4 colonnes selon la méthode de jomcdonald, pour qu'en mode liste, afficher la description courte sur l'équivalent de 6 colonnes (colonnes bootstrap) modifier dans le fichier themes\default\js\ global.js la ligne 205 :

html += '<div class="center-block col-xs-4 col-xs-7 col-md-6">';

6 au lieu de 4.

 

Merci encore jomcdonald

Edited May 23, 2014 by pierrewebmaster (see edit history)

[jomcdonald]

Oui, je me souvient avoir modifié ce fichier là. Bien vue...