Jump to content
Sign in to follow this  
123julien

Afficher les produits sur 2 colonnes

Recommended Posts

Bonjour,

Ma demandé est un petit peu spécifique.

En effet j'ai modifié le fichier "product_list.php" pour me permettre d'afficher mes produits sous la forme d'un tableau a 2 colonnes et aux nombre de lignes illimités en fonction du nombre de produits.

Cependant je n'arrive pas à faire en sorte de limiter mon tableau à deux colonnes et mes produits s'affiche tous à la suite sur une même ligne.

Ma solution pour afficher 2 produits par ligne est-elle mauvaise?
Dois-je intégrer quelque chose en php pour limiter mes ligne à 2 produits?

D'avance merci

Julien

></pre>
<table width="595" border="0">

               <!--{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'}
getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|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'}



</t

Share this post


Link to post
Share on other sites

hmmmm en théorie sans passer par un tableau ( qui se fait de moins en moins) il était plus simple de modifier le global.css

exemple :

ton

fait 600px de large

tu modifies ul#product_list li (d'origine) pour que la block produit soit inférieur à 600/ 2 (colonnes)

exemple : tu mets un width à 250 px

ul#product_list li {
clear:both;
height:130px;
margin-bottom:0.3em;
width:250px;
}



là tu te retrouves, normalement avec une colonne qui fait 250px de large.
Il ne reste plus qu'a passer en deux colonnes :

tu supprimes clear:both; et tu ajoutes un float: left;

ul#product_list li {
float: left;
height:130px;
margin-bottom:0.3em;
width:250px;
}




Normalement tu devrais avoir deux colonnes visuellement, non?

Bon après, selon ton besoin, tu ajustes la hauteur du bloc, les marges, les padding, la position des boutons, des descriptions etc...
(tu seras certainement obligé de modifier un peu le product-list.tpl pour la position des images, description ,supprssion d'un bouton etc...)

V++

Atch

Share this post


Link to post
Share on other sites

super tuyau, mais je voudrais l'adapter uniquement pour certaine catégorie (exemple: pièces détachées), comment mettre une condition différente par catégories? Aurais tu une idée?
merci

Share this post


Link to post
Share on other sites

Désolé de réouvrir ce sujet après sa résolution mais j'ai une question qui en découle.

J'aimerais beaucoup pouvoir centrer les éléments de ma liste sur la page. J'ai beau usé de tous les text-align: center et autre margin: auto qui puisse exister je n'arrive pas à mettre la main sur la méthode pour centrer ces images sur ma page.

D'avance merci

Julien

Share this post


Link to post
Share on other sites

peux tu nous donner une capture d'écran de ce que tu as et surtout de ce que tu veux ?

Share this post


Link to post
Share on other sites

regardes dans le global cssvers la ligne 495 (le mien est pas mal modifié donc le n° n'est paut être pas le bon)

j'ai modifié l'entrée suivante :

input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large

en incorporant un text-align:center;

Share this post


Link to post
Share on other sites

Pas du tout, je me suis planté

j'ai modifié la ligne ul#product_list li a.button{ (environ ligne 1678)

en ajoutant un margin-right:auto; et un margin-left:auto;

Share this post


Link to post
Share on other sites

Malheureusement ca ne change rien.

J'ai changé comme ceci:

ul#product_list li a.button{
margin-top:0.5em;
margin-right:auto;
margin-left:auto;
}

Share this post


Link to post
Share on other sites

J'ai en effet Firebug mais je ne vois pas en quoi il pourrait m'être utile sur le coup?

Je suis assez newb avec Firebug je ne maitrise peut etre pas sa puissance :)

Share this post


Link to post
Share on other sites

Je pense avoir spotté la partie qu'il faut bidouiller et même le problème de fond.

Tout semble ce situé ici:
ul#product_list li {
float: left;
height:285px;
margin-bottom:2em;
width:275px;
padding-left: 25px;
}

Le problème c'est que quand je lui donne des margin-left et -right en auto il ne se centre que si je supprime le "float:left" et bien entendu si je supprime le float mes boites se mettent les unes en dessous des autres...

Share this post


Link to post
Share on other sites

tu veux que les 2 boutons soient l'un à côté de l'autre et centré dans le carré rouge ?

Share this post


Link to post
Share on other sites

Non pas exactement. Je voudrais que les deux blocks soient centrés sur la page. Alors que pour le moment ils sont alignés à gauche.

D'avance merci

Share this post


Link to post
Share on other sites

Donc tu veux que le cadre rouge soit centré ?

Le cadre existe t il vraiment ou l'as tu rajouté pour faire comprendre ?

Share this post


Link to post
Share on other sites

Je l'ai ajouté pour aider à comprendre. Mais dans l'idée oui c'est ca que je voudrais: centrer le cadre rouge.

Je pense avoir spotté le problème mais je vois pas comment le résoudre

Tout semble ce situé ici:
ul#product_list li { float: left; height:285px; margin-bottom:2em; width:275px; padding-left: 25px;
}

Le problème c’est que quand je lui donne des margin-left et -right en auto il ne se centre que si je supprime le “float:left” et bien entendu si je supprime le float mes boites se mettent les unes en dessous des autres…

Share this post


Link to post
Share on other sites

ben pourquoi ne pas le mettre, ce carré rouge, en gros tu encadres tes produits avec une div de taille fixe et tu fait des marges auto de 2 côtés. bien entendu tu fais disparaitre la bordure.

Share this post


Link to post
Share on other sites

J'ai ajouté une

autour de ma liste et mis dans le css

.product_block {
border: 1px solid #333
width: 100px;
margin-left:auto;
margin-right:auto;
}



mais résultat ca centre mais en mettant les blocks les uns sous les autres.

Encore plus bizarre le cadre en #333 est au dessus de ma liste...

Share this post


Link to post
Share on other sites

ben tu as mis une largeur de 100px ce qui me parait un peut juste vu les produits. Tu dois mettre la largeur correspondant à 2 colonnes

Share this post


Link to post
Share on other sites

Quel con! Je voulais bien sur mettre 100%.

Le problème c'est que je n'aurais pas toujours le même nombre de produits (2, 3, 4...) il faut donc que je centre les produits à l'intérieur du cadre et non le cadre par rapport à la page je suppose.

Share this post


Link to post
Share on other sites

il faut que ton cadre fasse exactement la largeur de 2 produits en comptant les marges pour que le troisième produit passe à la ligne automatiquement.

Donc sit le bloc produit fait 250px de large, tu mets ton cadre à 500px et tu le centres.

Tu ne peut pas centrer les 2 colonnes dans le cadre, sinon tu n'aurais pas eu besoin de créer ce cadre ;-)

Share this post


Link to post
Share on other sites

Alors dans ce cas ca ne convient pas non plus. Je souhaiterai pouvoir afficher mes produits centrer mais pas forcement par 2. J'ai de 2 à 5 produits par catégorie...

Désolé si par hasard je n'ai pas été clair auparavant.

Share this post


Link to post
Share on other sites

je ne comprends ce que tu veux exactement faire.

Si tu veux afficher au maximum 5 produits sur une ligne, il faut adapter la largeur de chaque présentation de produits pour que cela loge.

Puis tu mets ton cadre en width:auto et tes marges comme cela tu devrais avoir tes produits centrés.

Après si tu veux adapter la taille de présentation en fonction du nombre de produits tu devras mettre le nez dans le code php.

Share this post


Link to post
Share on other sites

j'ais bien compris mais tu veux combiens de produits au max par lignes ?

Share this post


Link to post
Share on other sites

Il y en aurait 3 au max par ligne.
Ma page faisant 950px de large et chaque block 275...

Share this post


Link to post
Share on other sites

tu peux faire un test avec un width auto ou sinon avec un min-widt et un max-width si je me trompe pas. Après il faut faire des tests avec firebug.

Share this post


Link to post
Share on other sites

bon je galère toujours sur le meme probleme :(

Personne n'a de solution ?

Share this post


Link to post
Share on other sites

en utilisant fireburg j'arrive à ce résultat je sais pas si c'est ce que tu veux

j'ai augmenté la hauteur des li (à 165px je crois) puis pour les div center_block et right_block qui y sont contenus j'ai adapté les largeurs (50% et 45%).

après il reste à remettre les choses à leur place et ça tu peux le faire dans le fichier product-list.tpl. le tu peux par exemple le déplacé dans le right_block ce sera peut-être mieux après à toi de voir.

13537_Yeen48VSbec7gRlhCapF_t

Share this post


Link to post
Share on other sites

Bon je galère sur ce product-list.tpl :s

Comment a tu mis les boutons a droite ? moi j'ai toujours cet affichage... bien que j'ai augmenté la hauteur.

13542_wZhrseiaGuMTCxLTB8QF_t

Share this post


Link to post
Share on other sites

Bon j'avance... si ça peut aider :

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

Share this post


Link to post
Share on other sites

Bon voila ce que j'obtient avec mes fichier :

product-list.tpl

>{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}


{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}
getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />



{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'}




   {/foreach}
</ul>
<br>   <!-- /Products list --><br



Et pour le global.css en plus des modifs du début du post ;)

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



Et merci à toi Trolet ;)

13544_hWtvqYyW4BdQsUO0Dhf5_t

Share this post


Link to post
Share on other sites

Bonjour tous. J'ai fais cette modification sur mon site et je rencontre plusieurs bugs.

Avec la modif du global.css, je retrouve plus ou moins la même position que décrite sur ce post (j'ai du modifier des paramètres). Par contre, si j'ai seulement 3 produits sur la page, il y a donc 2 produits sur une même ligne mais le 3ème s'affiche un peu au hasard !!!

Ensuite, si je fais la modif du product_list.tpl, je n'ai plus d'image et la mise en forme est confuse.

Il n'y aurais pas possibilité d'avoir un module pour tout le site (sans modifer à chaque fois le thème).

Je dirais même avoir un module pour carement personnaliser l'affichage de ses produits et ce, en fonction de chaque thème utilisé ce serais le TOP !!! Bien sûr, j'étudie toute proposition ;)

15069_9mVcJDbCDl5Kz5bG3bA5_t

15070_LK75pgkaGD2xmTigit46_t

15071_EhK0VHqCu8T2y1DE2J8N_t

Share this post


Link to post
Share on other sites

Salut,


La structure même de prestashop réside dans la séparation du code et de la présentation, donc il faut juste modifier le thème pour changer la présentation.

Donc pas de module.

Share this post


Link to post
Share on other sites

Donc il faut modifier chaque thème pour avoir sa modif. Pourtant y'a bien un module "Produit Phare", il n'y aurait pas moyen de l'adapter pour les produits en général ?

Sinon j'ai modifier le global.css mais je ne trouve pas la présentation que je veux (même en utilisant Firebug).

Et puis le language PHP n'est pas mon fort (nelson !!). Quels sont les lignes à modifier, quels termes utiliser ?

Merci de votre aide.

Share this post


Link to post
Share on other sites

pas besoin de connaître php,
la mise en forme est gérée en css.

si la présentation des produits phares te convient, utilises firbug pour trouver les paramètres css utilisés,
ensuite toujours avec firebug, vas sur la page produits et regarde quelle ligne du fchier global.css gère leur apparence,
pour finir met y les même paramètres que pour les produits phares et ça devrait avoir le même effet.

pa.

Share this post


Link to post
Share on other sites

Bon, j'arette !!!! Je n'y arrive pas, je fais plus de mal qu'autre chose. Même avec Firebug, je ne m'y retrouve pas. Alors si quelqu'un pouvais me faire une mise en page produit identique à la page "produit phare" je suis preneur.

A force de tripatouiller les codes, je m'y perd, j'ai des lignes de code plein les yeux :s

Share this post


Link to post
Share on other sites

Je me permets de relancer ce topic !!!
Je viens d'apporter les modifs à mon global suivant les différents commentaire ci-dessus.

Par contre, j'aimerai :

avoir une hauteur des blocks fixe correspondant au plus petit des quatres (voir même 2-3 mm de moins)
supprimer le bouton "ajouter au panier"
centrer l'image ainsi que le bouton "voir le produit"

Je sais que les modifs sont à apporter au Global par contre où et surtout quoi !!!

Par avance merci de votre aide

Xavier

20525_zOawUouofl3mLcLcURNI_t

Share this post


Link to post
Share on other sites

si tu n'as toujours pas trouve la réponse pour toi la matrice du 67 ou les autres qui l irais se post ne recopie pas le fichier product-list.tpl de alexmp4 il est faut j ai fait comme toi je viens de recopier son product-list.tpl et sa a beuguer. remet l original par contre tu peux faire la modif du css qu'il a explique cela mets bien le prix a droite ainsi qu'ajouter au panier et voir le produit
voila j éspere que tu as fait une copie de l original a +

Share this post


Link to post
Share on other sites

Merci du conseil mais je viens de passer en 1.3 et je veux plus bidouiller les codes. A force il faut faire trop de modif et si tu change de thème, c'est la cata. Alors je me contente de ce que j'ai et je modifie légèrement.

Share this post


Link to post
Share on other sites

Bonsoir,

J'ai mis la liste des produits sur 2 colonnes je rencontre un problème lorsque le nombre de produits est impaire.
En effet, le N° de pages avec les boutons suivant remontent à la place du "4e produit" soit sur la colonne de droite et non plus en bas sous les produits.

Quelqu'un aurait-il une solution ?

Merci !

Share this post


Link to post
Share on other sites

Bonjour,

Ci-joint le résultat lorsque je mets des promotions en nombre impaire… la numérotation se retrouve plaquée à droite…

Merci pour vos lumières !

32683_mLRwsc0b3KiWvftZmBv5_t

Share this post


Link to post
Share on other sites

ça me fait pareil, mais ça me dérange pas (cf ici http://www.petitwapiti.fr/category.php?id_category=14 )

Pour avoir la meme chose que moi sur le thème earth voici mes modif :

ul#product_list li {
background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #d0d3d8;
padding: 6px;
float: left;
height:210px;
margin-bottom:0.3em;
width:257px;
margin : 0.3em;
}



et

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



C'est bcp lisible je trouve ça évite des coups de mollette.
Par contre j'aimerais comblé le trou sous "Voir le produit", surement par une image....

34505_XBmEyasncLg2bHQ1kjMw_t

Share this post


Link to post
Share on other sites

Avec Opera (même principe que FireBug je pense) j'ai pu comprendre comment été divisé l'encadré produit.
J'ai fait plusieurs essai sur le CSS pour trouver la bonne largeur et la bonne hauteur (attention a vérifier sur tout les produits, la longeur du Résumé joue sur la position des autres éléments...). Et ensuite j'ai modifier le product-list.tpl afin de déplacer les différents éléments a ma gise...
je suis pas une pro du code mais avec quelques br et copier-coller on peut y arriver !!

Voici mon product-list.tpl en entier avec des commentaires.

>
{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}

           <!--partie gauche du cadre produit-->
getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

           <!-- Suppression Nouveau{if $product.new == 1}{l s='new'}{/if}-->


           <!--partie droite du cadre produit-->
           <!--Titre Produit-->{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}
           <!--Description Produit-->
{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}    
           <!--Etat Stock-->    {if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}

               {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'}




   {/foreach}
</ul>
<br>   <!-- /Products list --><br>{/if



Voilà ce que ça donne :

34515_J1GoTLQSRvFTSiJOnUUv_t

Share this post


Link to post
Share on other sites
Bonjour,

Ci-joint le résultat lorsque je mets des promotions en nombre impaire… la numérotation se retrouve plaquée à droite…

Merci pour vos lumières !


Personne n'a de solution pour ce problème?

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