Jump to content

Liste des Produits sur 2 Colonnes

opportunite
 Share

Recommended Posts

opportunite Newbie

opportunite

Posted
Posted

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.

Link to comment
Share on other sites
clemclem Newbie

clemclem

Posted
Posted

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

Link to comment
Share on other sites
  • 4 weeks later...
sebcaraibes Newbie

sebcaraibes

Posted
Posted

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.

Link to comment
Share on other sites
sebcaraibes Newbie

sebcaraibes

Posted
Posted

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

Link to comment
Share on other sites
sebcaraibes Newbie

sebcaraibes

Posted
Posted

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.

Link to comment
Share on other sites
clemclem Newbie

clemclem

Posted
Posted

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).

Link to comment
Share on other sites
clemclem Newbie

clemclem

Posted
Posted

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.

Link to comment
Share on other sites
sebcaraibes Newbie

sebcaraibes

Posted
Posted

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.

Link to comment
Share on other sites
Niko_web Newbie

Niko_web

Posted
Posted

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 )

Link to comment
Share on other sites
clemclem Newbie

clemclem

Posted
Posted

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

Link to comment
Share on other sites
Niko_web Newbie

Niko_web

Posted
Posted

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;
}

Link to comment
Share on other sites
  • 3 months later...
thabetinfo Newbie

thabetinfo

Posted
Posted

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

Link to comment
Share on other sites
  • 2 months later...
Lahiru Newbie

Lahiru

Posted
Posted

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

Link to comment
Share on other sites
  • 6 months later...
  • 10 months later...
Tchupa Rookie

Tchupa

Posted
Posted

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.

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...