Jump to content

[RESOLU]Ou modifier la façon dont s’affichent les produits d’une categorie?


Recommended Posts

Bonjour à tous,

je travaille actuellement sur une modification du thème de Prestashop pour mon site et je souhaite que les produits d'une catégorie soient listés horizontalement puis verticalement (de manière a former un carré avec les produits).

Pour vous donner une image du classement que je veux obtenir visitez ce site.

j'ai déjà réussi à mettre en forme les blocs de produits tels que sur le site ci dessus, il ne me reste plus qu'a trouver comment afficher plusieurs produits sur une ligne et je compte sur vos lumières pour m'y aider.

Merci

Share this post


Link to post
Share on other sites

Salut,

tout se fait dans la feuille de style global.css en grande partie et aussi dans le fichier product-list.tpl de votre theme pour supprimer des choses qui vous semblera superflues (decriptions, icones etc...).

V++

Atch

Share this post


Link to post
Share on other sites

Merci Atch, supprimer, modifier j'ai trouvé dans le .tpl et dans le global.css sans problème.

Ma question (si je la formule différemment) est : comment afficher une liste de manière horizontale avec saut de ligne après x "colonnes".

Aurais-je oublié de le préciser dans mon premier post? (ou alors mal exprimé sans doute)

Share this post


Link to post
Share on other sites

exemple :

ton div contenu (principal) fait 500 px de large par exemple.

à l'intérieur, tu as aujourd'hui (encore par exemple) une seule ligne avec un div produit de 400 px de large.

Si tu fais un div produit de 90 px de large, par exemple, et tu lui appliques un float left, tu auras 5 blocks produits qui vont se mettre sur une seule ligne et les autres block iront à la ligne...

si tu veux que 4 blocks tu joues sur la largeur et les padding/margin des blocs etc...

c'est bien cela que tu souhaites, non?

V++

atch

Share this post


Link to post
Share on other sites

Tu as parfaitement cerné ce qu'il me faut (du moins je pense).

En revanche j'ai du mal à réaliser cela malgré tes conseils sur les div.

je te met l'endroit qui je pense doit etre modifié dans le css de prestashop

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
   background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
   border: solid 1px #d0d3d8;
   padding: 6px;
   height:130px;
   clear:both;
   margin-bottom:0.3em;
}
ul#product_list li a {
   text-decoration:none;
   color:#374853;
}



et ici celui que j'ai modifié

/* product-list.tpl */
ul#product_list{
   margin-top:2em;
   list-style-type:none;
   text-align:center;
}

ul#product_list li {
   background: #FFFE95 url('../img/block_category_item_bg.jpg') bottom repeat-x;
   border: solid 1px #d0d3d8;
   clear:both;
   margin-bottom:0.3em;
   width:134px;

}
ul#product_list li a {
   text-decoration:none;
   color:#374853;
}



Peut etre suis-je "aveuglé" à force de chercher^^ si ce n'est pas le bon endroit du code à modifier, j'imeris savoir dans quelle "catégorie" chercher

Share this post


Link to post
Share on other sites

Merci Peha, j'avais déjà testé cette solution, mais voyant qu'un pro me conseillait ca j'ai essayé de virer des trucs en laissant un float:left la ou il faut et j'ai trouvé ce qui m'empechait d'arriver à mes fins.

Ici, si on eleve le clear:both, tout se passe bien et j'ai pour le moment 3 produits sur la meme ligne.

ul#product_list li {
   background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
   border: solid 1px #d0d3d8;
   padding: 6px;
   height:130px;
   clear:both;
   margin-bottom:0.3em;
}



Il ne me reste plus qu'a fignoller un peu pour aérer les produits entre eux.

Merci à vous

Share this post


Link to post
Share on other sites

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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More