Galerie de produits (voir capture d’écran)

[glue]

Bonjour,
existe-il un module pour afficher les produits comme une "galerie de produits" comme la capture d'écran ?
Pas sur la page d'accueil mais quand on clique dans une catégorie...


Ou dans quel fichier faudrait-il intervenir pour le faire manuellement ?


Merci beaucoup !
Cédric

[jolvil]

cherchez " affichage sur plusieurs colonnes "

[Nommam]

c'est pas un module qu'il te faut, c'est juste du bricolage de theme !

[glue]

D'après ce que j'ai trouvé il faut intervenir sur global.css ?

Une idée comment customiser ce CSS ? Il n'y a pas de réponse précise à ce sujet.


Merci à vous.

Code :

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
   background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
   border: solid 1px #d0d3d8;
   padding: 6px;
   height:130px;
   clear:both;
   margin-bottom:0.3em;
}
ul#product_list li a {
   text-decoration:none;
   color:#374853;
}

ul#product_list a.product_img_link{
   border: solid 1px #d0d3d8;
   float:left;
   margin-right:0.6em;
}

ul#product_list a.product_img_link img{
   vertical-align:bottom;
}
ul#product_list li h3{ margin:0.4em 0; }
ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:1px solid #488C40;
   color:white;
   font-size:0.6em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:uppercase;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
   float:left;
   width:74%;
}
ul#product_list li div.right_block{
   float:left;
   width: 11em;
   text-align:right;
   margin-left:1em;
   margin-top:0;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}
ul#product_list li span.availability{
   float: right;
   color:#488c40;
   font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

[donaldlloyds]

ca m interesse aussi si quelqu un a la solution, merci

[Trolet]

Il n’y a pas de réponse précise à ce sujet.

ça m'étonnerait c'est un sujet récurrent.

en gros faut mettre un float:left sur les li et imposer des largeur aux blocs.

mais déjà traité moult fois sur le forum

[Marie]

Bonjour,

Comme le dit Nommam il faut bricoler le css.

J'ai un peu avancé sur ma boutique pour modifier la vue des produits mais cela reste imparfait et surtout, le rendu FF n'est pas le même que sur IE, Opéra, GChrome, enfin c'est un peu le why pour arriver à un travail propre et efficace.

ça se passe dans le global.css vers les lignes 1640 ou comme l'indique Glue à partir de /* product-list.tpl */

Une fois que j'aurai terminé un travail cohérent dans ce sens (et surtout compatible avec tous les navigateurs) je viendrais poster mon css ici.

Bon courage à tous

[Marie]

Bonjour,

Comme promis, voici le "product-list" de mon global.css :

/* product-list.tpl */
ul#product_list{ margin-top : 2em; list-style-type : none; }
ul#product_list li {
   background : #802223 repeat-x;
   border : solid 1px #d0d3d8;
   padding : 6px;
   height : 210px;
   float : left;
   margin bottom : 10px;
   width: 45%;
   margin left : 8px;
   margin right : 5px;
}
ul#product_list li a {
   text-decoration : none;
   color : #EAEBEF;
   font-weight : bold;
   font-size : 0.9em;
}

ul#product_list a.product_img_link{
   border: solid 1px #d0d3d8;
   float:left;
   margin-right:0.6em;
}

ul#product_list a.product_img_link img{
   vertical-align:bottom;
}

ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:1px solid #488C40;
   color:#ffffff;
   font-size:0.6em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:uppercase;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:1.5em; padding-top : 10px;}
ul#product_list li div.center_block{
   float:left;
   width:100%;
   background: transpartent repeat-x scroll;
}
ul#product_list li div.right_block{
   float:center;
   text-align: center;
   margin-left:0;
   margin-top: 5px;
   background: transparent none repeat-x scroll;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
   font-size: 0.9em
   background: url(../img/block_bg.jpg) repeat-x scroll;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
   font-size: 0.9em;
   font-family: Verdana;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
   color: green;
   font-family: Verdana;
   vertical-align: 10px;
}
ul#product_list li span.availability{
   float: right;
   color: #EAEBEF;
   font-size:0.9em;
   font-family: verdana;
}
ul#product_list li a.button{ margin-top:0.5em; }

Je précise que je suis finalement arrivée à caler ces ajustements sur tous les navigateurs grâce à ce fil Affichage des produits sur plusieurs colonnes

[powerbizz]

Merci bcp pour ce partage...
Crois-tu qu'il soit possible de mettre les boutons "ajouter au panier" et "voir le produit" cote à cote ? ca ferait plus propre encore que de les avoir tanker a gauche...
Merci d'avance

[Marie]

Comme ceci ?

Alors tu supprimes le display : block de "/* global button */" sur le global.css, soit environ vers la ligne 486 (du moins chez moi).

Ensuite tu bricoles le css pour caler le tout à ta sauce.

Allez j'y retourne, mon rayon de cadeaux de Noël n'est pas terminé !!