Afficher un produit par ligne

[raffyrms]

Bonjour,

je réalise un site prestashop et je souhaite afficher mes produit en ligne (1 par ligne) comme on peut le voir sur le site de http://blackrainbow-shop.com/6-sneakers !!

Je sais qu'il faut créer un tableau mais je galère sur la modification du product_list.css

Auriez vous des conseils ?

Merci

[coeos.pro]

Bonjour, inutile de faire un tableau, quand je regarde l'exemple que vous donnez je vois la page categorie de prestashop un peu modiifiée (pas de description courte, image plus petite). Ce n'est pas product_list.css mais product_list.tpl qu'il faut modifier.

[df15]

Bonjour,
en effet, comme coeos te le dis, rien de particulier sur l'affichage dans ton exemple, c'est le product_list.tpl par défaut, un tout petit peu allégé et ensuite mis en forme dans la css

[raffyrms]

Bonsoir,

Merci pour vos réponses, je vois en effet que la modification va se jouer dans le product_list.css...

Par contre encore novice dans le domaine j'ai du mal à saisir où s'effectue la modif pour ne pas "display" les produits en block mais en ligne...

Car dans le code du site de blackrainbow je vois qu'il fonctionne avec des table-cell...

En gros je suis perdu...

Merci d'avance

[coeos.pro]

laisse tomber les tables, su prestashop de base tu vois bien que c'est une liste (

• ...) pour les images au lieu de

http://taboutique/img/p/10-50-home.jpg tu mets http://taboutique/img/p/10-50-small.jpg tu enlève la description courte, c'est tout.

Et c'est product_list.tpl

pas product_list.css

[raffyrms]

Bonsoir,

Alors je dois certainement est très novice mais je ne comprends pas en quoi les modifications que vous me proposez pourrais changer la présentation du site.

J'ai essaye vos changements :

Dans le product-list.tpl voici le code que selon vous (si ne ne me trompe pas) que je dois modifier

puis à enlever

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

En effectuant ces changements 'small' à la place de 'large', les photos deviennent floues... et en enlevant la description courte, plus rien ne s'affiche sur la page produit...

Je ne comprends pas ce que je dois faire comme modification pour avoir la présentation de mes produits sur une ligne simple (avec 4 colonnes).

Pour essayer d'être plus clair :

voici l'adresse du site que je réalise actuellement www.goodshoesgoodchoice.com

Actuellement la page de présentation des produits est comme ceci,

Block du centre image sur la gauche et description des produits à droite, sur le block de droite, prix dispo et mise en panier...

Je cherche à faire la présentation comme sur le site de blackrainbow, car j'ai beaucoup de références... donc cela devrait donner :

Photo, Nom produit, dispo, prix (sur la même ligne...)

Avec si possible car je trouve ça très pratique la possibilité de trier avec les flèches présentent en haut des colonnes.

Voila j’espère que j'ai été claire car je me fais peut être mal comprendre.

Merci pour votre aide

Raffy

getImageLink($product.link_rewrite, $product.id_image, 'large')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" width="200" />
               {if isset($product.new) && $product.new == 1}{l s='New'}

[hellotheworld]

Pour tenter d'expliquer rapidement :

le fichier TPL est le fichier Template, qui est interprété par SMARTY.

Smarty génère du code PHP qui est ensuite interprété pour générer l'HTML. Ce sont ces templates qui gèrent l'affichage, ainsi que les CSS.

 

Pour faire simple,

• les templates et SMARTY, c'est l'architecture (les colonnes, les lignes, la taille des images, etc.)
  
• Le PHP et la BdD, ce sont les infos à afficher
  
• et le CSS, c'est la peinture (quelle police, quelle taille, etc.)
  

 

Donc pour modifier l'affichage, il faut bien modifier le template de smarty.

 

dans le code :

 getImageLink($product.link_rewrite, $product.id_image, 'large')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" width="200" />
               {if isset($product.new) && $product.new == 1}{l s='New'}

on voit bien :

$product.id_image, 'large'

il faut prendre un autre paramètre (le bon ! attention à correctement l'écrire) pour que l'image affichée change de taille. ATTENTION : il va aller chercher l'image, mais il faut qu'elle ai été générée dans le BO de PS.

 

Sinon, pour la description, c'est à priori cette ligne qu'il faut modifier... Mais attention, en la supprimant complètement, il est possible que cela plante le template. Pourquoi pas essayer de mettre le résumé à seulement quelques caractère pour le moment :

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

devient

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

(la fonction truncate permet de raccourcir des descriptions trop longues, et ajoute ensuite les '...' trois petits points.

 

Pour les flèches de tri, je sais que cela existe par exemple dans les tableaux de WikiPédia, mais c'est vrai que c'est une fonction 'Sort' qui fonctionne sur les tableaux. Dans le cas de PS, avec l'affichage tel qu'il est par Smarty, il faut implémenter cette fonction dans le template, en utilisant la fonction équivalente... pour smarty.

 

Le problème est qu'une recherche d'une fonction 'sort', 'tri' ou 'trier' n'a pas donné de résultat sur http://www.smarty.net

 

Donc joker.

 

 

En espérant avoir aidé...