Jump to content
Sign in to follow this  
opportunite

Liste des Produits sur 2 Colonnes

Recommended Posts

Bonjour à Tous,

je reviens sur un sujet déjà traité mais jamais finalisé.
je fais appel aux développeurs.
J'aimerais que les produits listés dans les catégories s'affichent sur 2 colonnes et non une seule comme à l'origine.
je suis sur prestashop 1.2.5.0, je suis sur un le thème presta d'origine légèrement modifié.
J'arrive à afficher mais 2 colonnes sans problèmes à l'aide du post suivant :

http://www.prestashop.com/forums/viewthread/28903/P30/graphisme/afficher_les_produits_sur_2_colonnes

néanmoins je n'ai pas assez de connaissances pour remettre les éléments à la bonne place malgré mais différents
test avec firebug.

Quelqu'un pourrait il m'aider ? Je pense que cette fonction intéresse énormément de membres.

Merci.

Share this post


Link to post
Share on other sites

Bonjour,

j'ai fait un truc comme ça pour mon site. Je peux te donner les codes si la disposition te convient (j'ai enlevé le bouton ajouter au panier).
Sinon, il faudrait que tu détailles un peu plus ce que tu voudrais comme éléments et leur disposition

18040_BZuhAPSyVk5kdKwsELS9_t

Share this post


Link to post
Share on other sites

Bonjour clemclem, je serais aussi intéressé par ta présentation, peux tu m'envoyer tes lignes, stp, merci.

Share this post


Link to post
Share on other sites

Bonjour,
les voici :

ul#product_list li {
   border: dashed 1px #666666;
   padding: 6px 6px 6px;
   width:225px;
   height:230px;
   clear:none;
   float:left;
   margin:1em 1.1em 0.5em;
}

Share this post


Link to post
Share on other sites

Merci pour ta réponse clemclem,

entre tant j'ai testé un autre exemple qui ressemble fortement au tien.

juste une question peut être as tu la réponse.

Sur mon image j'ai le texte de l'article du haut qui déborde sur l'article en dessous, y vois tu une solution ?

merci pour ton aide.

Share this post


Link to post
Share on other sites

Bonjour,
essaye d'augmenter le margin-bottom de tes cellules.
Tu aurais une capture ou alors est ce que le site est en ligne ?

Share this post


Link to post
Share on other sites

Merci pour ta réponse je vais essayer sa.

Ci-joint ma capture écran, la capture cible et mes modifications apportées suite à l'exemple !

l'exemple suivi :
ul#product_list li div.center_block{
float:left;
width:50%;
}
ul#product_list li div.right_block{
float:left;
width:45%;
text-align:right;
margin-left:1em;
margin-top:0;
}

en vert le résultat à atteindre

19561_3G0sQ7Q8PqFcMhgHcpkR_t

19565_2N5H9jLuz8BBsNG4MKzo_t

Share this post


Link to post
Share on other sites

Ok, en fait il te faudrait mettre le descriptif du produit à droite de l'image pour pas être embeté.
je te cherche les modifs...

Share this post


Link to post
Share on other sites

ci-joint un lien de mon site : http://www.sexandfun972.net/category.php?id_category=18

sur cette page je voudrais séparer les produits et avoir l'encadrement un peu comme le block panier en terme de présentation.

J'ai malheureusement un manque de connaissance sur css et php.
Kel dommage qu'au vu de la puissance de prestashop il n'existe pas encore un module sur la mise en page de prestashop....
Merci pour ton aide.

Share this post


Link to post
Share on other sites

Ok, je te regarde ça un peu plus tard, je n'ai pas trop le temps de suite de suite :)

Share this post


Link to post
Share on other sites

dans le css, à la ligne ul#product_list li { rajoute :

margin : 1em 1.1em 0.5em


ca te créera l'espace entre les cellules (modifie les valeurs si tu veux plus ou moins d'espace). Sur cette ligne modifie la valeur de la hauteur de la cellule (le height) pour le mettre à 300px. J'ai testé avec cette valeur car certains champs de résumé sont assez long et faisaient déborder. Essaye peut etre de mettre un résumé de 3 ou 4 lignes pour faire des cellules plus petites et uniforme.

Ensuite, vers la ligne 1472 cherche "ul#product_list li div.center_block" et modifie le width pour le mettre à 100%

Ca devrait déjà pas mal le mettre en page. Pour le résultat à atteindre, il faudrait supprimer l'affichage de la description du produit dans le product-list.tpl (il me semble).

Share this post


Link to post
Share on other sites

Quelques produits se chevauchent encore. Essaye d'augmenter la hauteur des cellules un peu.
Pour le bas de la page, cherche la ligne div.pagination (l.641) et rajoute :
clear : both;
paddin-top : 60px;

plus la valeur sera élevée, plus il y aura d'espace entre ton dernier produit et la pagination. Mais le problème c'est que si tu as une page avec les produits qui ne débordent pas du cadre, ça va faire un gros écart.

Share this post


Link to post
Share on other sites

une dernière question je voudrais sur l'image décalé le tarif sur la droite, peux tu m'indiquer quelle lignes sont concernées ?

Merci.

19587_x4gIKTPIg1m43nXA8tze_t

Share this post


Link to post
Share on other sites

bonsoir,

Essayez d'augmenter la largeur du block ligne 1474:

ul#product_list li div.right_block {
float:left;
margin-left:1em;
margin-top:0;
text-align:right;
width:90%;
}



est ce que c'est ce que vous voulez?

Share this post


Link to post
Share on other sites

Merci niko_web, c'est pile ce que je voulais....

juste une question au passage, dans le cas ou je voudrais juste faire apparaitre le titre plus le tarif pour ainsi réduire mes blocks produits pour les mettre sur trois colonnes, vous connaissez cette manipulation ?

Est ce que je suis clair dans mes explications ?
Merci.

Share this post


Link to post
Share on other sites

pour enpurer tes blocs articles, il faut que tu modifie le fichier product-list.tpl à la racine de ton thème.

Si tu eux enlever la description tu peux supprimer la ligne:

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}



(par sécurité, commente la ligne et vérifie si c'est bien ce que tu veux avant de la supprimer )

Share this post


Link to post
Share on other sites

je me permet d'aporter une précision par rapport à ce que t'a indiqué niko_web, toujours à la même ligne essaye avec cette config :

ul#product_list li div.right_block {
float:left;
margin-left:120px;
margin-top:0;
text-align:right;
} 



Pour laisser juste texte + tarif, ouvre le fichier product-list.tpl, trouve les lignes suivantes et supprime les (ou mets les en commentaire) :


{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}



Attention : avant de faire cette manip, je te conseille de sauvegarder le fichier :)

edit : oups, raté :P

Share this post


Link to post
Share on other sites

mets <!-- au debut de la ligne et --> à la fin de la ligne

regarde l'avant dernniere ligne de product-list.tpl. "<!-- /Products list -->" c'est du commentaire pour indiquer la fin de la partie Products list.

PS: -- c'est en fait 2 tirets "6" !!

Share this post


Link to post
Share on other sites

Merci niko.

Dans le cas ou je souhaite mettre les produits sur trois colonnes, tu peux m'indiquer comment tu ferais?
J'en profite pour une petite dernière question, pour remonter les boutons ajouter panier et voir le produit, peux tu m'indiquer la ligne les concernant ?

Merci.

Share this post


Link to post
Share on other sites

pour mettre tes produits sur 3 colonnes il faut d'abord que tu saches combien de large fait ta partie centrale de ton site.
Ensuite il suffit d'ajuster la largeur de ton bloc produit (pour l'exemple j'ai mis 150px):

ul#product_list li {
background:url("../img/block_category_item_bg.gif") repeat-x scroll 0 0 #E7C9F6;
border:1px solid #E7C9F6;
float:left;
height:230px;
margin:1em 1.1em 0.5em;
width:150px;
}

Share this post


Link to post
Share on other sites

Attention aux problèmes de compatibilité avec les navigateurs (notament les IE) pour le 3 colonnes. Tu risques d'avoir de mauvaises surprises :/

Share this post


Link to post
Share on other sites

je vais essayer merci pour l'info.

est ce que tu connais la ligne pour remonter les boutons ajout et voir ?

oui merci clem, je vais faire des test mais déjà avoir deux colonnes c'est super !

Share this post


Link to post
Share on other sites

bonjour ,
j' ai finalement trouver une petie solution en modifiant les fichier global.css et product-list.tpl J'espere que vous trouverez un peu d'aide dans ces quelques lignes

dans le fichier global.css

 
/* 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 #DA0F00;
   padding: 25px 5px 10px 5px;
   width:255px;
   height:145px;
   clear:none;
   float:left;
   margin:0.3em 0.3em 0.3em 0.3em;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
}
ul#product_list li a {
   text-decoration:none;
   color:#374853;
}

ul#product_list a.product_img_link{


   margin-right:0;
}

ul#product_list a.product_img_link img{
   vertical-align:bottom;
   border: solid 1px #d0d3d8;

}
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:auto;
}
ul#product_list li div.right_block{
   float:right;
   width: 120px;
   text-align:left;
   margin-left:0;
   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 .image_block
{   display:block;
   float: left;
}
ul#product_list li .test_block
{  display:block;
  width:110px;
}
ul#product_list li a.button{ margin-top:0.5em; }




dans le fichier product-list.tpl




{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}
{if $product.new == 1}{l s='new'}{/if}{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}
                  <!--
{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}-->
 

               {if $product.on_sale}
{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product.reduction_from))}
{l s='Price lowered!'}
               {/if}
               {if !$priceDisplay || $priceDisplay == 2}{convertPrice price=$product.price}{if $priceDisplay == 2} {l s='+Tx'}{/if}{/if}
               {if $priceDisplay}{convertPrice price=$product.price_tax_exc}{if $priceDisplay == 2} {l s='-Tx'}{/if}{/if}
               {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='Add to cart'}
               {else}
{l s='Add to cart'}
               {/if}
{l s='View'}

25073_McFwUyPLygdtsfRb44fy_t

Share this post


Link to post
Share on other sites

Bonjour à tous,

J'ai suivi cette méthode et j'ai bien réussi mettre des produits en 2 colonnes.
Mais j'ai un petit souci au niveau d'affichage, les prix et le bouton "Voir le produit" ne sont pas bien aligné.

Voici le ci joint:

Ceux que je veux faire c'est que mettre le bouton "Voir le produit" sur la ligne noire et le prix sur la ligne rouge.

Merci de vos réponse

28108_No9zLqRldA8GkPx1kMDB_t

Share this post


Link to post
Share on other sites

Bonjour, vous pouvez essayer ceci :

à la ligne ul#product_list li div.right_block, remplacer le code présent par :

float:left;
margin-left:50px;
margin-top:195px;
padding:0;
position:absolute;
text-align:right;

Share this post


Link to post
Share on other sites

ça marché nickel et je suis très content :)

Merci beaucoup, vous êtes vraiment fort, J'ai essayé pleins d'autre choses et il n'y avait rien qui me plaisait.

Share this post


Link to post
Share on other sites

Bonsoir, je viens de lire vos postes, je voudrais aussi presenter sur 2 ou 3 colonnes, pouvez vous me dire dans quel fichier il faut modifier ces codes ?

Merci

Share this post


Link to post
Share on other sites

Bonsoir,

Je cherche a faire la meme chose, pouvez vous m'indiquer les fichiers et les codes qu'il faut modifier , merci

Share this post


Link to post
Share on other sites

Bonjour,

 

j'ai mis ma liste de produit sur 2 colonnes grâce a vos postes et je vous en remercie ! par contre j'ai un petit bug plutôt gênant visuellement, quand ma liste de produit contient un nombre de produit impaire sur la page le bouton comparer et celui des pages remonte et c'est très vilain pour le client.

 

Auriez vous une solution svp?

En vous remerciant.

 

cordialement Tchupa.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More