Mettre les produits à l'horizontal

[Lilil]

Bonjour,

J'ai beaucoup de produits dans ma boutique et dois encore faire une mise à jour sur environ 800 de plus !
Mais lorsque le client choisi ce qui l'intéresse dans les catégories, il se retrouve avec, parfois, 20 pages à parcourir pour tout voir... C'est long...

J'aimerai donc changer un peu la présentation de ceux-ci et pouvoir les alignés à l'horizontal (4 voir 5 produits sur une ligne). Seulement, je ne sais pas trop par ou commencer et comment m'y prendre car je sais que ça déraille vite d'un navigateur à l'autre.
Est-ce que vous pourriez m'aider ??

Merci

[eltitos]

Bonjour,


Faut repenser a toute la presentation, ou mettre le titre, reduire la taille de la description (via truncate), quelle taille en hauteur...


Voici des modifs basics pour avoir 5 produits sur une seule ligne (global.css)

ul#product_list li {
background:url("../img/block_category_item_bg.jpg") repeat-x scroll 0 0 #BD4283;
border:1px solid #BD4283;
float:left;
height:350px;
margin-bottom:0.3em;
padding:6px;
width:136px; 
(width:173px;) pour avoir 4 produits par lignes


ul#product_list li div.center_block {
float:left;
height:270px;

Dans le product-list.tpl

changer le truncate de cette ligne

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

intervertire ces deux lignes

getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

et

    {if $product.new == 1}{l s='new'}{/if}{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}

[Lilil]

Bonjour,

Tout d'abord merci de ta réponse rapide et efficace
Il subsiste quelques petits soucis.

Comment mettre les liens de navigations en dessous, comme ils sont d'origine ??
Et est-il possible de mettre uniquement un petit résumé de ce que j'ai mis comme description pour éviter que texte et prix se chevauchent ?
(Voir capture)

Merci pour tes réponses.
MARY

[eltitos]

Et est-il possible de mettre uniquement un petit résumé de ce que j’ai mis comme description pour éviter que texte et prix se chevauchent ?

Dans le fichier tpl il faut modifier le truncate

{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}

Essaye avec 70 comme chiffre, il faut modifier que le deuxieme

Comment mettre les liens de navigations en dessous, comme ils sont d’origine ??

Rajoute cette ligne

clear:both;

dans

div.pagination {

j'ai pas pu valide avec IE (mac) mais je pense pas qu'il y ai de soucis, donc a verifier

[Lilil]

Ça fonctionne bien....
Je continue puisque tu t'y connais bien. Pour obtenir encore un peu plus d'aide

Comment faire pour séparer les produits les uns des autres ? Faire une marge entre chaque produits pour qu'il ne soient pas ramassés comme sur la capture ?

Et comment puis-je séparer le "Nouveau" du titre, le mettre en face de "En stock" par exemple ?
Je sais que c'est une histoire de display : block (ou pas) mais je ne sais toujours pas ou ça se passe ?

Et peut-être aussi séparer les deux boutons "ajouter au panier" et "voir le produit" ?

En tout cas, merci de tes renseignements. Ca m'aide beaucoup
MARY

[eltitos]

Pour mettre des bordures il faut changer

ul#product_list li {
border:1px solid #BD4283;

par

border:1px solid #000000;

pour avoir du noir.


Pour nouveau il faut modifier le tpl

deplacer

{if $product.new == 1}{l s='new'}{/if}

le mettre apres

{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}

Jouer "ca" pour le placer

ul#product_list li .new {

Pour les boutons verfie que tu as ces lignes

ul#product_list li a.button {
margin-top:0.5em;

[Lilil]

Coucou,

Alors, j'ai testé et ça fonctionne bien au niveau de l'affichage des produits par liste.
Le soucis c'est que lorsque je choisi ensuite un produit et que je vais sur sa page, tout est "en vrac" (voir capture)

Du coup, j'ai remis en place mon fichier d'origine global et le tpl et tout rentre dans l'ordre.
Une idée pour que tout marche bien ??

Merci encore

MARY

[Lilil]

up up

[Lilil]

J'ai fini par trouver d'où venais ce soucis... (ça peut servir aux autres)
En fait dans le ul#product_list li { j'avais laissé une fonction clear:both qui me décalait même la page suivante du produit.

Je l'ai donc enlevé mais un autre problème apparaît.
Le texte commence à côté de l'image !
Savez-vous comment lui demander de descendre en dessous ??
Merci

[pogoi]

Bonjour,

Je me présente brièvement car je suis nouveau sur le forum:

Pogoi, 25 ans, j'habite en Suisse. Je passe très régulièrement consulter l'aide fournie dans ce forum malgré que je n'y ai pour l'instant jamais posté. Je suis polygraphe de métier (infographiste ou typographe selon les endroits). Je débute dans le css (grâce aux conseils avisés des membres que je remercie!)

Voilà, je ne veux pas déterrer un ancien sujet, mais mon message a rapport à celui-ci. J'utilise prestashop 1.3.6.0 et ai suivi les explications pour mettre plusieurs produits par ligne. C'est fantastique, ça marche :-) Par contre, lorsque je clique sur un article (voir le produit, qui affiche la fiche de l'article) la photo est à gauche, et le texte (prix, imprimer, ajouter au panier etc.) est aussi à gauche, sous l'image de l'article.

J'aimerais faire repasser le texte à la droite en face de l'article comme il était de base dans la fiche. J'ai essayé de changer des left en right, ai cherché sur internet, mais je n'y parviens pas.

Quelqu'un aurait-il la solution à ce casse tête? Merci d'avance, et félicitations pour ce forum qui a déjà répondu à beaucoup de mes questions :-)

[Jacques Biais]

Pour Lilil

La div contenant l'image: lui donner une largeur equivalente à celle de , puis résoudre le centrage de l'image avec padding.

[pogoi]

Je me répond à moi même ;-) d'un coup que ça puisse aider les suivants

J'y ai passé qques heures mais j'ai fini par trouver, j'avais

ul#product_list li div.center_block {
float:left;
height:270px;

A double en deux endroits dans le global.css

J'ai repris mon fichier de base pour comparer tout simplement. Sur Dreamweaver la première product list apparassait noire, et la deuxième rose, donc y'en a une des deux qui était en trop et pêchait.

[minimome]

Bonjour,


Faut repenser a toute la presentation, ou mettre le titre, reduire la taille de la description (via truncate), quelle taille en hauteur...


Voici des modifs basics pour avoir 5 produits sur une seule ligne (global.css)

ul#product_list li {
background:url("../img/block_category_item_bg.jpg") repeat-x scroll 0 0 #BD4283;
border:1px solid #BD4283;
float:left;
height:350px;
margin-bottom:0.3em;
padding:6px;
width:136px; 
(width:173px;) pour avoir 4 produits par lignes

ul#product_list li div.center_block {
float:left;
height:270px;

Dans le product-list.tpl

changer le truncate de cette ligne

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

intervertire ces deux lignes

getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

et

    {if $product.new == 1}{l s='new'}{/if}{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}

-----------
Bonjour,

J'ai fait tout ce que vous avez indiqué, avec un deuxième truncate à 70, inclus de marquer clear:both; dans div.pagination {
Voilà ce que j'obtiens sur une version de tests 1.4.1 (voir l'image)
Si vous pouviez me dire comment résoudre le problème et mettre les produits en ligne,
merci d'avance

[minimome]

Pour ceux que cela intéresse, une solution toute faite à ce fil:
http://www.prestashop.com/forums/viewthread/99248/integration/change_subcategory_view_to_grids_instead_of_list_v1_dot_4

Il suffit de télécharger le zip et de remplacer les fichiers product-list.tpl et product-list.css dans le thème.
Marche bien en PS 1.4.2.5, juste une petite erreur ici:

Sélecteur attendu. jeu de règles ignoré suite à un mauvais sélecteur : product_list.css
* html ul#product_list li {


voili voilou

[lechat51]

Super, merci. Je me creusais la tête pour afficher les produits en lignes, c'est donc chose résolue et grâce à vous tous.