[PrestaTIPS] Titre trop long.. changez de style en 1 ligne !

[ludo]

Lors de la creation de la charte graphique, il est courant que l'on prenne des exemples un peu trop parfait et lorsque le site est en production, on se rend compte que ca marche plus aussi idéalement. Un exemple (parmi tant d'autres) est la longeur des titres d'un article.

Évidement on peut être tenté (comme dans le template par défaut) de tronquer violemment le titre et rajouter 3 petits points ... c'est moche, ca perturbe le visiteur et par la même le référencement de la fiche. D'une autre coté, on peut difficilement brider le e-commercant en lui imposant une longueur maxi et le contraindre de modifier la rédaction et le frustrer !

De toute manière, le fond (texte) ne doit jamais céder face à la forme (template). Donc dans l'absolu il faudrait que le forme s'adapter dynamiquement au fond.

Reprenons l'exemple d'un titre sur une fiche produit... Regardez le premier visuel... le titre est très long et il déborde sur l'image.

En fait, rien de bien compliqué.. Directement dans le tpl (product.tpl en l'occurrence) il suffit de tester la longueur du titre et modifier ou non le nom du style.

Et matez ensuite le résultat.. C'est tout bête et ca arrange tout le monde (vous, votre client et Google !)

Dans le .tpl

 

{$product->name|escape:'htmlall':'UTF-8'}

 

Dans le .css

#product_titre {
margin-bottom:4px;
}
#product_titre-long {
margin-bottom:4px;
padding-bottom:20px;
}

A vous d'adapter le nom des styles et paramétrer la longueur (ex:60) en fonction de votre template.

Vous pouvez bien évidement décliner ce tips à d'autres infos de la fiche (description, référence, ...)

[jeckyl]

Bonjour,

Je suis étonné de la complexité du système.

Perso, j'ai un problème sur un de mes template avec les noms trop long (2 lignes ou plus), mais pour corriger cela, j'ai juste retiré la hauteur fixe du style du titre du produit et tout rentre automatiquement dans l'ordre.

[StoreCommander]

Bonjour,

retirer, ce n'est jamais une bonne solution en css : une taille fixe a été placée sur la balise H2, c'est qu'elle sert quelque part donc il vaut mieux utiliser la méthode de ludo ou surcharger le titre de la page sur la page produit avec :

#product h2{
height:auto;
}

[ludo]

Voilà l'expert a parlé !

Mais bonne remarque Jeckyl.
Après ce tips est là pour se "sensibiliser" au fait qu'on peut facilement dynamiser un template (merci smarty !)

[jeckyl]

Attention, j'ai fait cette remarque rapidement sans vérifier l'impact de la modification de cette balise. Bien entendu si cela provoque des disfonctionnement sur d'autres parties du site, je fait une précision en définissant le h2 correspondant à celui utilisé comme vous le précisez.

Bonjour,

retirer, ce n'est jamais une bonne solution en css : une taille fixe a été placée sur la balise H2, c'est qu'elle sert quelque part donc il vaut mieux utiliser la méthode de ludo ou surcharger le titre de la page sur la page produit avec :

#product h2{
height:auto;
}

[Fabrice]

bonne idée ! merci pour le partage.

d'ailleurs un forum "tips" serait bienvenu non ?

Patric, tu t'en charges ?

[ludo]

Salut Fabrice

Oui c'est une idée ... Si tu veux voir les miens faire une recherche avec [PrestaTIPS].
On en trouve pas mal d'autres avec [TIPS].

Je propose de mettre en ligne ce WE un blog qui reference toutes ces astuces : PRESTATIPS