Affichage des produits en 3 colonnes comme sur les featured products

[Sellmor]

Bonjour,

J'aimerais afficher mes produits comme ils le font sur la page des featured products. J'ai lu beaucoup de post traitant ce sujet mais aucun ne donne une véritable marche à suivre claire et définitive. On dirait que tout le monde part dans tous les sens à ce propos. Dommage que cette fonctionnalité ne soit pas incluse de base dans le backoffice...

[canel]

Bonjour,

Il serait long d'expliquer comment le mettre en 3 colonnes car tout ce gère dans les fichiers css. Il vas falloir apprendre le langage css pour arrivé à ce que tu veux. Si tu veux personnalisé ta boutique pour qu'elle ne ressemble pas à toute les autres et qu'elle fasse professionnelle il faudra toucher au HTML/CSS.

Un ptit lien pour commencer ta formation : http://www.siteduzero.com

[jeckyl]

Salut,

comme précisé, c'est sur le css qu'il faut jouer afin de définir une largeur fixe à l'espace de stockage de chaque produit puis répartir les éléments dans cet espace.

Donc si vous êtes encore sur le 3 colonne de Prestashop de base, la colonne centrale fait 556px de large donc vous pouvez définir une largeur pour chaque produit maximale de 185px, mais en même temps si vous souhaitez mettre ou pas une bordure il faudrait prévoir une marge entre chaque éléments et cela dépend e l'espace intérieur en fonction des données présentes.

Donc voilà maintenant vous savez faire, mais il reste tellement à définir que nous ne pouvons pas expliquer plus que l'idée générale.

[Sellmor]

Ca me paraît bien compliqué pour faire une chose qui a l'air pourtant simple. Je vais essayer de me débrouiller mais mes connaissances en CSS vont me faire perdre du temps...

Pouvez-vous m'indiquer les principaux paramètres à changer ? Je ne comprends pas tous les paramètres qui sont dans les global.css, y a-t-il d'autres fichiers à modifier ?


Merci

[Sellmor]

Voici mon code, je ne comprends pas tout, ou du moins pas toutes les références que font ces codes.

J'ai rajouté à la deuxième ligne : width:180px;float:left mais ça me donne un résultat complètement fou avec des boutons disposés n'importe où. Que dois-je changer d'autres pour avoir 3 ou 4 colonnes... ?


Merci

/* ————— product-list.tpl ————— */
ul#product_list {padding:20px 0 0 0;}
ul#product_list li {height:203px;margin:8px 0 0 0;background:#fff;width:180px;float:left;}
ul#product_list li:first-child {margin:0;}

ul#product_list li a.product_img_link {width:175px;height:203px;display:block;float:left;}
ul#product_list li a.product_img_link img {margin:21px 0 0 0;}

ul#product_list li div.center_block {width:355px;float:left;padding:18px 0 0 0;}

ul#product_list li div.center_block div.product_flags {height:23px;clear:both;}
ul#product_list li div.center_block div.product_flags span {height:18px;display:block;float:left;padding:5px 10px 0 10px;font:normal 10px "Arial";text-transform:uppercase;text-align:center;}
ul#product_list li div.center_block div.product_flags span.new {background:#5e5e5e;color:#fff;}
ul#product_list li div.center_block div.product_flags span.availability {background:#e2e2e2;color:#353535;}

ul#product_list li div.center_block h3 {padding:25px 0 0 0;}
ul#product_list li div.center_block p.product_desc {padding:13px 0 0 0;}

ul#product_list li div.right_block {width:150px;float:right;}

ul#product_list li div.right_block span.on_sale,
ul#product_list li div.right_block span.discount {display:block;padding:18px 0 0 0;font:normal 17px "Arial";color:#3f3f3f;}

ul#product_list li div.right_block span.price {display:block;margin:21px 0 0 0;font:10px "Arial";}
ul#product_list li div.right_block span.online_only {display:block;padding:6px 0 0 0;color:#888;}

ul#product_list li div.right_block .exclusive {margin:10px 0;}

ul#product_list li div.right_block p.compare {height:15px;padding:10px 0 0 0;}
*+html ul#product_list li div.right_block p.compare input {margin-right:-4px;}

[brunollivier]

Voici mon code, je ne comprends pas tout, ou du moins pas toutes les références que font ces codes. <br/><br/>J'ai rajouté à la deuxième ligne : width:180px;float:left mais ça me donne un résultat complètement fou avec des boutons disposés n'importe où. Que dois-je changer d'autres pour avoir 3 ou 4 colonnes... ? <br/><br/><br/>Merci<br/><br/>

/* ————— product-list.tpl ————— */<br/>ul#product_list {padding:20px 0 0 0;}<br/>ul#product_list li {height:203px;margin:8px 0 0 0;background:#fff;width:180px;float:left;}<br/>ul#product_list li:first-child {margin:0;}<br/><br/>ul#product_list li a.product_img_link {width:175px;height:203px;display:block;float:left;}<br/>ul#product_list li a.product_img_link img {margin:21px 0 0 0;}<br/><br/>ul#product_list li div.center_block {width:355px;float:left;padding:18px 0 0 0;}<br/><br/>ul#product_list li div.center_block div.product_flags {height:23px;clear:both;}<br/>ul#product_list li div.center_block div.product_flags span {height:18px;display:block;float:left;padding:5px 10px 0 10px;font:normal 10px "Arial";text-transform:uppercase;text-align:center;}<br/>ul#product_list li div.center_block div.product_flags span.new {background:#5e5e5e;color:#fff;}<br/>ul#product_list li div.center_block div.product_flags span.availability {background:#e2e2e2;color:#353535;}<br/><br/>ul#product_list li div.center_block h3 {padding:25px 0 0 0;}<br/>ul#product_list li div.center_block p.product_desc {padding:13px 0 0 0;}<br/><br/>ul#product_list li div.right_block {width:150px;float:right;}<br/><br/>ul#product_list li div.right_block span.on_sale,<br/>ul#product_list li div.right_block span.discount {display:block;padding:18px 0 0 0;font:normal 17px "Arial";color:#3f3f3f;}<br/><br/>ul#product_list li div.right_block span.price {display:block;margin:21px 0 0 0;font:10px "Arial";}<br/>ul#product_list li div.right_block span.online_only {display:block;padding:6px 0 0 0;color:#888;}<br/><br/>ul#product_list li div.right_block .exclusive {margin:10px 0;}<br/><br/>ul#product_list li div.right_block p.compare {height:15px;padding:10px 0 0 0;}<br/>*+html ul#product_list li div.right_block p.compare input {margin-right:-4px;}

 

Salut,

 

dans ton fichier, tu dois modifier la largeur du bloc. Pour 3 colonnes de largeur, il te faut modifier :

div#featured-products_block_center ul {width:[b]750px[/b];overflow:hidden;}

 

@+