Jump to content

Afficher les produits sur 2 colonnes

123julien

By 123julien
in PrestaShop pour les développeurs

 Share

Recommended Posts

123julien Newbie

123julien

Posted
Posted

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

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

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

Link to comment
Share on other sites
123julien Newbie

123julien

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 2 weeks later...
jeckyl Newbie

jeckyl

Posted
Posted

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;

Link to comment
Share on other sites
123julien Newbie

123julien

Posted
  • Author
Posted

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

Link to comment
Share on other sites
123julien Newbie

123julien

Posted
  • Author
Posted

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…
Link to comment
Share on other sites
123julien Newbie

123julien

Posted
  • Author
Posted

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

Link to comment
Share on other sites
123julien Newbie

123julien

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

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

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

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.

Link to comment
Share on other sites
  • 2 weeks later...
Trolet Newbie

Trolet

Posted
Posted

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

Link to comment
Share on other sites
Alexmp4 Newbie

Alexmp4

Posted
Posted

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

Link to comment
Share on other sites
  • 5 weeks later...
La Matrice Du 67 Newbie

La Matrice Du 67

Posted
Posted

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

Link to comment
Share on other sites
La Matrice Du 67 Newbie

La Matrice Du 67

Posted
Posted

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.

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

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.

Link to comment
Share on other sites
La Matrice Du 67 Newbie

La Matrice Du 67

Posted
Posted

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

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

superman69

Posted
Posted

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

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

surfshop

Posted
Posted

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 +

Link to comment
Share on other sites
  • 6 months later...
capclem Newbie

capclem

Posted
Posted

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 !

Link to comment
Share on other sites
  • 5 weeks later...
Petit Wapiti Newbie

Petit Wapiti

Posted
Posted

ç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

Link to comment
Share on other sites
Petit Wapiti Newbie

Petit Wapiti

Posted
Posted

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

Link to comment
Share on other sites
  • 1 month later...
  • 11 months later...

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