Afficher les produits sur 2 colonnes

[123julien]

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

    {foreach from=$products item=product name=products}

    {/foreach}

    
        

            

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

            

        
    

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

• Back to top

Merci beaucoup.

Je vais essayer ca et reviens vers toi.

++

Ca fonctionne a merveille.

Merci pour le tuyau.

Ju

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

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

Petit UP au sujet du centrage de ma liste.

D'avance merci

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

Bien entendu.

J'aimerai donc centrer le contenu du cadre rouge.

Merci beaucoup

Attached File(s)

•  centrer.JPG (62bytes)
  Number of downloads: 2062

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;

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;

Je test ca dans la foulée et reviens vers toi

Merci

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

utilises tu firebug pour faire des tests ?

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

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

Petit UP au cas où quelqu'un ai eu le temps d'y réfléchir

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

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

Donc tu veux que le cadre rouge soit centré ?

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