Jump to content

[Résolu] produits phares, changement de largeur des colonnes

minimome
 Share

Recommended Posts

minimome Newbie

minimome

Posted
Posted

Bonjour,

Mon thème est sur trois colonnes, PS1.4.1, mais avec une largeur supérieure de 1120px au total.
J'ai réussi à tout changer sauf la taille des colonnes des "Produits phares" en page d'accueil.
Si quelqu'un a un peu de temps pour m'indiquer quoi faire, merci d'avance.

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Bonsoir,
Un peu maigre comme indications aussi ma réponse sera très générale.
Cela dépend de différents critères:
1 -La largeur de la colonne centrale (center-column).
2 -Du nombre de produits que tu veux afficher par ligne.
3 -De l'espace (margin) entre chaque produit.

Par exemple, si tu veux présenter 3 produits par ligne et que la "center-column" a un "width" de 600px, en théorie la largeur de chaque case "produits" devrait être de 200px, mais en réalité cette largeur sera inférieure car il faut tenir compte des "margin" entre chaque "produits".
Le réglage se fait d'une part dans le homefeatured.tpl pour le nombre de produits à afficher par ligne et d'autre part dans le global.css pour les encadrant les produits (régler leur largeur).

Bon courage.

Link to comment
Share on other sites
minimome Newbie

minimome

Posted
  • Author
Posted
Bonsoir,
Un peu maigre comme indications aussi ma réponse sera très générale.
Cela dépend de différents critères:
1 -La largeur de la colonne centrale (center-column).
2 -Du nombre de produits que tu veux afficher par ligne.
3 -De l'espace (margin) entre chaque produit.

Par exemple, si tu veux présenter 3 produits par ligne et que la "center-column" a un "width" de 600px, en théorie la largeur de chaque case "produits" devrait être de 200px, mais en réalité cette largeur sera inférieure car il faut tenir compte des "margin" entre chaque "produits".
Le réglage se fait d'une part dans le homefeatured.tpl pour le nombre de produits à afficher par ligne et d'autre part dans le global.css pour les encadrant les produits (régler leur largeur).

Bon courage.


Merci pour la réponse, Jacobis. Ceci fait, je n'ai que 2 colonnes qui s'affichent au lieu des 3 programmées, la troisième est mangée : le bloc garde sa largeur originelle malgré le changement de largeur.
Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Bien sûr et c'est normal, cela signifie que ta largeur de est trop forte! le 3ème produit n'a pas la place pour s'afficher et va automatiquement à la ligne.
Si tes modifications de bloc ne sont pas prises en compte, il faut très certainement supprimer les fichiers du cache smarty.
Toujours pareil, sans le lien du site on ne peut faire que des suppositions...

Link to comment
Share on other sites
minimome Newbie

minimome

Posted
  • Author
Posted
Bien sûr et c'est normal, cela signifie que ta largeur de est trop forte! le 3ème produit n'a pas la place pour s'afficher et va automatiquement à la ligne.
Si tes modifications de bloc ne sont pas prises en compte, il faut très certainement supprimer les fichiers du cache smarty.
Toujours pareil, sans le lien du site on ne peut faire que des suppositions...



Ma colonne centrale est très grande, il y a la place d'afficher les trois colonnes mais elles ne s'affichent pas. Bien que la largeur du site a changé, bien que tout s'affiche avec la nouvelle largeur, tout bien... Les 'produits phares', eux, non. Les 'produits phares' conservent la largeur qu'ils ont au template de base.

Il doit y avoir d'autres lignes à rectifier, mais lesquelles et où si ce n'est pas dans les fichiers habituels?

Une idée?

Merci d'avance
Link to comment
Share on other sites
minimome Newbie

minimome

Posted
  • Author
Posted
Bonjour
Si tu pouvais nous faire profiter de tes découvertes ce serait sympa.
merci


Bonjour, la réponse de Jacobis est suffisante sauf les petits détails faciles à oublier.

(0) Désactive le bloc "produits phares" dans l'admin.


(1) Note sur un papier:
* la nouvelle largeur totale,
* la largeur des colonnes droite et gauche si modifiée (pour un premier essai, mieux ne pas la changer, à cause de la cascade de modifs)
* la nouvelle largeur de la colonne centrale
* la "margin-left" si modifiée (là aussi, essaye de ne pas la changer, tu pourras faire des calculs sans te prendre le chou, simplement en te basant sur la taille originelle de la colonne centrale et les autres dimensions de base. Tu répercutes simplement la dimension ajoutée à toutes les valeurs de colonnes centrales. Pour ne pas être trop embêté au final, maintiens les mêmes écarts par rapport à la colonne centrale originelle (par ex. 556px qui deviennent 541px, écart= -15px), et les mêmes écarts entre blocs contenants et contenus, par ex. bloc de 133px, image de 129px, écart = -4px))


(2) Modifie le fichier www/tonsite/modules/homefeatured/homefeatured.tpl

<!-- MODULE Home Featured Products -->
.............................
{assign var='nbItemsPerLine' value=4}

A la ligne ci-dessus, change value=4 en ce que tu veux (après avoir calculé la quantité et la taille de tes colonnes selon la nouvelle largeur de la "colonne centrale")


(3) Modifie le fichier www/tonsite/themes/prestashop/css/global.css

il y en a une tartine et faut rien louper, tu dois changer "width" dans toutes ces entrées (en fonction de ta nouvelle largeur):
* #header
* #left_column (seulement si tu veux changer la taille de la colonne, dans cette entrée tu peux aussi changer "margin-left")
* #center_column
* #right_column (pour un site deux colonnes, tu mets la valeur 0)
* body.mceContentBody
* div.table_block
* ul.step
* center_column div.block
* #center_column.products_block ul li (ici c'est la nouvelle largeur des colonnes du bloc "produits phares")
* #center_column div.products_block a.product_image (ici c'est la nouvelle taille des images, n'oublies pas ensuite d'aller dans l'admin et de modifier la taille des images "home", et de regénérer les images "home")
* #center_column div.products_block a.product_description

conseil : ne supprime pas les données originelles du global.css, mais plutôt commente-les : /*......*/


4) Ouvre le fichier www/tonsite/themes/prestashop/img, et avec le logiciel de dessin que tu veux, modifies les images qui vont dans la colonne centrale pour qu'elles s'adaptent à la nouvelle taille de la colonne (tu peux aussi empêcher les images au global.css en les remplaçant par "none;")


5) Retourne dans l'admin et réinstalle le module "homefeatured", lance ton site, parcoure les fiches produits, etc. et vois ce que tu veux encore modifier pour bien caler le visuel.


Voili, voilou
pas très compliqué à faire et même pas très long (plus rapide que d'écrire ce post)
  • Like 1
Link to comment
Share on other sites
  • 1 month later...
anaislys Newbie

anaislys

Posted
Posted

chers tous,

j'ai bidouillé des heurs à partir de ce post et d'autres et me restent des interrogations
cf site http://www.lescreationsdanais.fr/Boutique/
ds ce module produits phares comment
- faire pour qu'il n'y aient pas certaines lignes avec un seul produit au lieu de 3 (il ne manque pas de produits, ils se mettent juste bizarrement)
- aligner la colonne de droite à droite
- avoir une colonne centrale plus large avec 4 photos par lignes
- enlever les boutons acheter et "plus de détails"

j'ai conscience d'avoir bcp de questions ms apres des heures me voilà bloquée!
toute réponse est la bienvenue, même sur un détail !!

merci !!

Link to comment
Share on other sites
  • 9 months later...
  • 1 month later...

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
Go to topic listing
×
×
  • Create New...