affichage des produits en colonnes

[daniel3000]

Bonsoir,

dans les pages catégories produits sur le thèmes original Prestashop (http://.../category.php?id_category=...), les produits sont affichés sur la colonne centrale dans des blocs empilés horizontalement.

Au contraire, en page d'accueil, le module "produits phares" présente les produits dans des blocs verticaux, mis cote à cote jusqu'à 3, puis 1ligne en dessous les 3 suivants etc... Ceci est parfait pour moi.

l'idée simple est donc de récupérer la présentation "produits phares" pour l'appliquer aux pages catégories (sans oublier de gérer le nombre de produits par pages à gérer, et probablement d'autres paramètres encore).

Je dois donc d'abord identifier les fichiers et séquences concernés pour pouvoir les modifier

Vos commentaires me seront précieux avant de commencer à modifier... ou si quelqu'un l'a déjà fait c'est encore mieux!
Par avance merci.

[daniel3000]

Petit UP du mardi,

et en même temps j'ai un peu avancé sur le sujet.

Voici ce que j'ai pu identifier comme fichiers à modifier:

1°/ le fichier "category" TPL
contient notamment, pour sa partie présentation produits:
{/if}
{if $products}
{include file=$tpl_dir./product-sort.tpl}
{include file=$tpl_dir./product-list.tpl products=$products}
{include file=$tpl_dir./pagination.tpl}
{elseif !isset($subcategories)}

{l s='There are no products in this category.'}

{/if}
>>>à priori pas de modification à apporter, mais ici les infos de base

2°/ le fichier "pagination" TPL
contient notamment:(gestion du changement de page en fonction du nombre de produits à afficher, je crois). les 25 dernières lignes à partir de
/if} {if $nb_products > 10}
<form action="{if !is_array($requestNb)}{$requestNb}{else}{$requestNb.requestUrl}{/if}" method="get" class="pagination">.............
>>> sera à passer à 9 ou 12 en config verticale (3 x 3ou4)


3°/ Le fichier product-list tpl
>>> ne me semble pas devoir être modifié, car les infos qu'il contient me semblent rester OK si le bloc produit devient vertical ?

4°/ Je suis un peu perdu dans le global CSS:
>>>lignes 963 et +(special style for block product...), j'ai l'impression qu'il s'agit des blocs verticaux vu les largeurs réduites, mais je ne trouve pas les blocs horizontaux que je veux transformer.
>>>Lignes 1400 à 1485 du CSS (/*product-list;tpl*/) semblent par contre définir les règles d'emplacement des blocs horizontaux.

5°/ Enfin je ne crois pas qu'il y a des php à modifier, les fonctions restant les mêmes (???)

Cette première identification des fichiers qui seront à modifier des fichiers à modifier vous semble correcte ???
Merci de votre réponse

[cedrickb]

Bonjour,

Je rencontre le même problème que toi, j'ai réussi à modifier l'affichage en 4x3 mais la pagination se trouve au milieu de la page...

J'ai réalisé ça en changeant juste une le product_list dans le css.

Voici l'ancien code:

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;
   min-height: 130px;
   height: auto;
   clear: both;
   margin-bottom: 0.3em
}
* html ul#product_list li {
   height: auto !important;
   height: 130px
}
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; display:block }
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: 0 1em 0 0;
   padding: 0 0.4em;
   text-transform: uppercase;
   vertical-align: 0.3em
}
ul#product_list li p.product_desc { 
   margin-bottom: 0;
   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 {
   color: #488c40;
   font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em }

Voici le nouveau:

ul#product_list { margin-top: 2em; list-style-type: none;  }
ul#product_list li {
background: #FFF;
padding: 4px;
height:220px;
clear:both;
margin-bottom:0.3em;
float: left;
width: 20%;
height: 255px;
margin-right: 8px;
clear: none;
margin-left:4px;
margin-top:2px
}
}
* html ul#product_list li {
   height: auto !important;
   height: 130px
}
ul#product_list li a {
   text-decoration: none;
   color: #000
}
ul#product_list a.product_img_link {
border: solid 1px #d0d3d8;
float:left;
margin-right:0.6em;
margin-left:15px;
margin-top:30px
}
ul#product_list a.product_img_link img { vertical-align: bottom }
ul#product_list li h3{ margin:0.4em 0; width:160px;padding-bottom:2px;height:10px; text-align: center}

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:;
vertical-align:0.3em
}
ul#product_list li p.product_desc { 
   margin-bottom: 0;
   font-size: 0.92em 
}
ul#product_list li div.center_block {
   float: left;
   width: 100%
}
ul#product_list li div.right_block {
float:left;
text-align:center;
margin-left:2em;
margin-top:0.5em;
display:inline
}
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: 170%;
   margin-bottom: 0.3em
}
ul#product_list li span.availability {
   color: #488c40;
   font-size: 0.9em    
}

ul#product_list li span.notavailable {
 color: red;
 font-size: 0.9em
 }
ul#product_list li a.button { margin-top: 0.5em }

EDIT:
Bon ben en fait, en passant le nombre de produits par page dans BO-> Préférences-> produits -> Nombre de produits de 10 à 12 ça s'affiche nettement mieux!

EDIT2:
Bon ça s'affiche mieux quand il y a 12 produits sur la page, mais il y a un bug quand il y en a moins... je vais chercher une solution!

En espérant que ça t'aide.

Cedrick

[daniel3000]

Bonjour Cédrick,

merci pour ces infos qui relancent le sujet.

J'ai rapidement pu tester ton code, et c'est une avancée car il permet en effet une mise en place verticale des vignettes produits.

Il reste au moins 2 ajustements à faire:
- le problème de pagination que tu cites. (pour info, les 25 dernières lignes du fichier "pagination TPL" que je mentionnais dans mon post précédent, conditionnent en fait l'apparition d'un déroulant en bas de page si plus de 10 produits. Ce n'est donc pas là que l'on trouvera la solution comme je le pensais au départ, même s'il faudra gérer ce paramètre.).
- la présentation des vignettes "produit", trop courtes, avec les textes qui se surimpriment sur les titres et autres problèmes d'apparences (mais ceci existe déjà dans Prestashop pour les "produits phares", on doit donc pouvoir le retrouver).

Je vais donc rechercher dans ces directions et je reviens quand j'aurai du neuf.

Daniel

[cedrickb]

Bonjour Daniel,

Concernant les textes qui se surimpriment, la solution choisie pour moi est la réalisation d'un truncate sur le nom du produit (sachant que ce problème dans mon cas ne se pose que pour une petite partie des produits)... peut être que ça peut être une piste pour toi!

A+

Cedrick

[Loo]

Bonsoir,

J'ai eu quelques problèmes avec l'affichage en lignes superposées de mes produits, et cela au niveau de la description. Je me suis alors penchée sur l'affichage en colonne, bien plus pertinent concernant la boutique que je pense ouvrir. Après quelques recherches sur ce forum moyennement fructueuses, j'ai lancé mon ami google sur la piste, et voici ce que j'ai trouvé : http://www.freeprestashopmodules.com/2009/06/30/change-sub-categories-to-grid-view/.

Vous y trouvez toute l'explication pour réaliser votre mise en page en 3 colonnes (cela recoupe très surement ce qui a été dit plus haut), mais donne aussi la solution pour la question de la pagination qui apparaît au milieu :

Around the line 630 of your global.css, found div.pagination and add the css class “clear:both;”.

Soit : Aux environs de la ligne 630 de votre fichier global.css, trouvez "div.pagniation" et ajoutez "clear : both;". Je vous aide, dans le global.css du template par défaut ce doit être à la ligne 595. Ce qui donne, à la ligne 594 :

/* pagination.tpl */
div.pagination { padding: 1em 0; clear: both; }
ul.pagination {
   list-style: none;
   float: left
}

Enfin, il y a aussi la réponse pour ce "10" qui apparaît encore :

in the Back Office, preferences, products, you have to change the number of products by page.

Donc le backoffice, allez dans préférence --> produits et changez le nombre par défaut de produits par page.

Je ne suis pas sure de savoir si ma réponse correspond parfaitement aux normes du forum mais j'espère avoir pu vous aider, c'est là le but de mon intervention. Je m'excuse si d'aventure elle venait à être plus dérangeante qu'utile, du fait d'un manquement aux règles (je présume).

[Franck_R]

Bonjour,

J'ai créé un module permettant de basculer entre les deux affichages.
Si cela vous interesse, il est disponible sur PrestaStore.
Rencontrez-vous encore des Problèmes avec vos modifications?

Cordialement,

Franck_R

[Loo]

Personnellement je n'ai plus aucun problème. L'affichage en colonne étant bien plus pertinent, les modifications ont permis de tous les régler. Le blog cité ci-dessus y ayant grandement aidé.

Pour le moment, me concernant, mon commerce et son site principalement, doivent me coûter le moins cher possible (quitte à faire grincer quelques dents), ce qui me fait éviter les modules payant. Mais qui sait, si nous venions à fonctionner suffisamment bien, peut-être investirons-nous dans quelques modules payants comme le votre qui semble fort intéressant.

[daniel3000]

Bonsoir,

merci beaucoup à LOO pour toutes ces informations qui ont bien éclairé le sujet.
Elles peuvent représenter une solution, et permettent en effet une présentation des listes produits sur 3 colonnes, sans le commentaire produit.

C'est l'occasion de récapituler:

Les points à changer:
1/ le global CSS, rubrique "/* product-list.tpl */"
2/ le fichier product-list.tpl lui même.
3/ le nombre de produits par pages (BO + pagination.tpl)

je confirme le lien donné par LOO , qui fournit les codes pour le 1°/ , et carrément un fichier de remplacement pour le 2°/: http://www.freeprestashopmodules.com/2009/06/30/change-sub-categories-to-grid-view/.

ATTENTION, sur mon ordinateur, cette présentation verticale ressort limitée pour chaque produit à: Titre + Photo + mention "disponible" + Prix + bouton "voir le produit".
Le "résumé produit" (c'est normal) et le bouton "ajouter au panier" présents dans le thème initial de Prestashop ont disparu. (surprenant car le fichier product-list.tpl de remplacement conditionne ce dernier apparemment comme il faut).
-> Loo: pouvez-vous me confirmer si vous arrivez au même résultat sur votre site, ou si la disparition du bouton "panier" chez moi est anormale (encore un problème avec mon développement en local sous windows?).

Sinon si quelqu'un a déjà planché sur la possibilité de rajouter et positionner le résumé produit, bienvenue...

A bientôt. Daniel

[daniel3000]

désolé d'insister, quelques problèmes à valider...
le lien communiqué par LOO fonctionne trés bien en présentation verticale pour:
"Nom produit"+ "photo produit" + mention "disponible" + "Prix" + bouton "voir le produit".

J'ai au moins 2 problèmes (peut-être liés à mon fonctionnement soous Windows).
1°/ Le bouton "rajouter au panier" n'apparait pas, alors qu'il semble conditionné OK en productlist.tpl.
2°/ La présentation n'est pas "stabilisée". (par exemple, la mise en prix réduit d'un produit, qui rajoute l'affichage "prix réduit", fait descendre le bouton "voir le produit" hors du cadre...

Quelqu'un peut -il essayer et voir s'il rencontre les mêmes problèmes?
Merci.

[marius]

Bonjour tout le monde.
Je relance le débat sur l'affichage en colonnes.
Sur la version 1.4 j'ai essayé de faire afficher les produits sur quatre colonnes en suivant la méthode ci dessus puis :
dans product_list.css sur ul#product_list li j'ai mis width: 20%;
en élargissant la taille de la colonne centrale à 747px dans global.css
en désactivant la colonne droite sur cette page.
Les problèmes par la suite:
le texte de la description se chevauche (j'arrive pas à faire les modifs dans product-list.tpl pour laisser juste le titre du produit, le prix et le prix réduit);
pb d'affichage de la colonne droite sur la page produit.
Par avance merci pour vos commentaires.

[cashmedia]

Bonsoir, je voudrais effectuer les mêmes modifications pour mettre 2 à 4 produits de large avec les mêmes données que celle de la version de base de prestashop (histoir de mettre le plus de produit par page tout en ayant du texte). Je suis sur prestashop 1.4.1

Si quelqu'un a une idéé, un lien qui fonctionne ou un module, je suis preneur !

[daniel3000]

Bonsoir,

retour sur ce vieux sujet.
je suis enfin entrain de finaliser une présentation en "grille" qui fonctionne, de la manière suivante

> changer dans le fichier global CSS la rubrique *productlist;tpl* avec 20% de largeur (pour 4 blocs produit). Attention, j'ai porté ma colonne centrale à 768 px: celà permet de rentrer les 4 blocs "à l'aise", avec notamment assez de place pour caser les 4 marges et les 4 photos définies en largeurs fixes.
> dans le même fichier, fixer la hauteur à 350 px mini, si l'on veut tout rentrer titre + photo + résumé + prix + bouton "voir" + bouton + bouton "panier". (et encore, c'est un peu juste, mais au delà ça fait vraiment des blocs hauts; chacun jugera en fonction de ses besoins).
> dans le même fichier: +/- 20 ligne +bas, centrer la photo (pour moi marge 12 px à la place de 15).
voilà pour le fichier global CSS.

Pour le fichier productlist.tpl, ne pas télécharger le fichier de substitution cité en début de ce topic (si on veut conserver tous les boutons), je me suis contenté d'inverser 2 lignes (7 et 8 je crois) pour avoir le titre au dessus de la photo. Ensuite quelques truncate pour dimensionner les textes titres et résumé).

Pour le fichier pagination.php, aller en ligne 3 et remplacer "10" "10,20,50" par "12" "12,24,48" ou tout autre multiple de 4 qui vous conviendra (puisque nous avons 4 blocs par ligne)... on aura le bon nombre de produits par page.

Et voilà c'est nickel... il reste encore une finition: la hauteur des boutons n'est pas fixe à l'intérieur du bloc, et ils peuvent descendre en fonction de le longueur de texte, ou de l'ajout d'une promo par exemple. Si quelqu'un a déjà planché là dessus, merci par avance.

Cordialement
Daniel

[traivore]

Bonsoir,<br/><br/>retour sur ce vieux sujet.<br/>je suis enfin entrain de finaliser une présentation en "grille" qui fonctionne, de la manière suivante<br/><br/>> changer dans le fichier global CSS la rubrique *productlist;tpl* avec 20% de largeur (pour 4 blocs produit). Attention, j'ai porté ma colonne centrale à 768 px: celà permet de rentrer les 4 blocs "à l'aise", avec notamment assez de place pour caser les 4 marges et les 4 photos définies en largeurs fixes.<br/>> dans le même fichier, fixer la hauteur à 350 px mini, si l'on veut tout rentrer titre + photo + résumé + prix + bouton "voir" + bouton + bouton "panier". (et encore, c'est un peu juste, mais au delà ça fait vraiment des blocs hauts; chacun jugera en fonction de ses besoins).<br/>> dans le même fichier: +/- 20 ligne +bas, centrer la photo (pour moi marge 12 px à la place de 15).<br/>voilà pour le fichier global CSS.<br/><br/>Pour le fichier productlist.tpl, ne pas télécharger le fichier de substitution cité en début de ce topic (si on veut conserver tous les boutons), je me suis contenté d'inverser 2 lignes (7 et 8 je crois) pour avoir le titre au dessus de la photo. Ensuite quelques truncate pour dimensionner les textes titres et résumé).<br/><br/>Pour le fichier pagination.php, aller en ligne 3 et remplacer "10" "10,20,50" par "12" "12,24,48" ou tout autre multiple de 4 qui vous conviendra (puisque nous avons 4 blocs par ligne)... on aura le bon nombre de produits par page.<br/><br/>Et voilà c'est nickel... il reste encore une finition: la hauteur des boutons n'est pas fixe à l'intérieur du bloc, et ils peuvent descendre en fonction de le longueur de texte, ou de l'ajout d'une promo par exemple. Si quelqu'un a déjà planché là dessus, merci par avance.<br/><br/>Cordialement<br/>Daniel

 

 

Bonjour Daniel!

 

J'ai déjà posé cette question sur un topic consacré aux bugs du module navigation à facette. Mais peut-être pourrais-tu m'aider si toi même tu utilises ce module avec la présentation horizontale. Je n'arrive pas à faire fonctionner les deux en même temps. Si le module navigation à facette est activé, les produits ne s'affichent pas. Une idée? merci

[cedricdeb]

Bonjour

Ce Topic est assez ancien mais j'ai un souci avec l'affichage des produits en colonne.

Voici ce que donne mon site :

http://www.chaussures-stevenson.com/category.php?id_category=6

 

Pourquoi je n'arrive pas à avoir les produits les uns à côté des autres au lieu qu'ils s'affichent les uns sous les autres ?

 

Merci d'avance pour vos réponses... je sèche là (