Les Pièces Modèles CSS

Modèles CSS pour catalogues de pièces détachées

Deux fiches produits dans un catalogue de pièces détachées peuvent être identiques et pourtant avoir des significations totalement différentes. L'un est disponible immédiatement, l'autre est une commande spéciale avec un délai de six semaines, et le troisième a été remplacé par une version plus récente. La mise en page permet de visualiser cette différence avant même que le client ne clique, et les modèles CSS pour pièces détachées offrent aux fournisseurs un ensemble de règles visuelles pour ces distinctions.

État des stocks sur des fiches identiques

L'état des stocks évolue plus rapidement que les photos des produits ; les informations qui y sont associées sont donc essentielles au quotidien.

Voici quelques exemples d'états des stocks :

• En stock, stock faible et en rupture de stock, différenciés par un critère plus explicite que la simple couleur.

• Articles en commande spéciale : le délai de livraison doit figurer à côté du prix.

• Composants obsolètes : indication du composant de remplacement.

• Compatibilité confirmée avec la machine sélectionnée et avertissement en cas d'incompatibilité.

Les distributeurs proposant des pièces d'origine et de rechange ont besoin d'un signal supplémentaire : l'écart de prix soulève des questions auxquelles une simple étiquette répond plus rapidement qu'un long texte.

Faciliter la lecture des codes longs

La référence d'une pièce est son véritable nom ; elle mérite donc une meilleure visibilité que le texte environnant. Un format à chasse fixe, un espacement plus large entre les lettres et un contraste marqué facilitent la lecture à voix haute d'un code de dix-neuf caractères et sa comparaison avec un code usé sur l'établi. Les tableaux de spécifications bénéficient de la même attention : unités alignées, séparateurs de lignes discrets et largeur de colonnes constante.

Nicepage prend en charge la plupart de ces aspects grâce à ses commandes visuelles, et le code CSS personnalisé gère le reste. La documentation CSS personnalisée explique comment ajouter des règles et attribuer des classes aux éléments, en excluant du système visuel général les éléments spécifiques au catalogue, tels que les étiquettes de compatibilité, les lignes de comparaison ou les filtres.

Écrans étroits : moins de colonnes

Sur téléphone, la mise en page du catalogue est souvent compromise. Un code de vingt caractères se retrouve coupé en deux et devient illisible, un tableau de spécifications masque le prix, et quatre fiches alignées rendent la lecture impossible. Le retour à la ligne automatique, un tableau à défilement horizontal et un nombre de fiches qui diminue avec la taille de l'écran permettent de résoudre la plupart de ces problèmes.

Il est important de bien gérer ces exceptions, car une règle existant pour une seule gamme de produits aux descriptions particulièrement longues ne devrait pas impacter la mise en page de toutes les fiches du catalogue. Une mise en page qui résiste à l'expansion du catalogue est généralement simple : un style visuel pour les articles récurrents, complété par une courte liste d'exceptions justifiées.