Product Features - installation, configuration et gestion des attributs

Ce document décrit la configuration du module kowal/module-product-features, la signification de tous les champs d’administration ainsi que le travail avec les attributs côté produit.

Installation

Le module est destiné à une installation via Composer.

composer config repositories.module.product.features vcs https://github.com/kowalco/product-featurescomposer config --global --auth github-oauth.github.com composer require kowal/module-product-featuresbin/magento module:enable Kowal_ProductFeaturesbin/magento setup:upgradebin/magento cache:flush

Après le déploiement en production, il convient d’exécuter les commandes standard propres au projet, par exemple la compilation DI et le déploiement des assets statiques, conformément au mode de fonctionnement de Magento.

Emplacement de la configuration

La configuration du module se trouve dans le panneau d’administration Magento :

Stores > Configuration > Catalog > Product Features

Les paramètres d’apparence se trouvent dans un groupe séparé :

Stores > Configuration > Catalog > Product Features Appearance

Les champs de configuration sont disponibles aux niveaux Default, Website et Store View. Ainsi, différents store views peuvent avoir des sections de caractéristiques ou une apparence différentes.

Product Features

Enabled

Active ou désactive le module pour l’étendue de configuration donnée.

Valeurs :

• Yes - les sections de caractéristiques produit sont rendues sur la fiche produit,
• No - le module ne renvoie aucune section et le bloc n’apparaît pas sur le frontend.

Utilisation : désactivation rapide du module pour l’ensemble de la boutique, un Website sélectionné ou un Store View sans supprimer la configuration des sections.

Feature Sections

Liste des sections rendues sur la fiche produit. Chaque ligne définit une section frontend ou un groupe de sections si le type cms_blocks est utilisé.

Enabled

Active ou désactive une section individuelle.

Valeurs :

• Yes - la section participe au rendu,
• No - la section est ignorée.

Utilisation : masquage temporaire d’une section sans supprimer ses paramètres.

Section Title

Titre de la section visible sur la fiche produit.

Exemples :

• Caractéristiques du produit,
• Utilisation sportive,
• Spécifications,
• Technologies,
• Livraison.

Utilisation : le nom doit être compréhensible pour le client, il n’a pas besoin de correspondre au nom technique de l’attribut.

Remarque : pour le type cms_blocks, le titre de la section enfant est récupéré à partir du titre du bloc CMS.

Attribute Code

Attribut produit unique utilisé par la section. Le champ se présente sous forme de dropdown contenant la liste des attributs produit.

Utilisation : utilisez ce champ lorsque la section repose sur un seul attribut, par exemple sport_usage, blocks_id, material, technology_icon.

Attribute Codes

Liste de plusieurs attributs produit utilisés par une même section. Le champ se présente sous forme de multiselect.

Utilisation : utilisez ce champ lorsqu’une section doit agréger plusieurs caractéristiques, par exemple plusieurs échelles dans la section Caractéristiques du produit ou plusieurs paramètres dans la section Spécifications.

Exemple : la section Caractéristiques du produit peut contenir les attributs fit, resistance, stretch et breathability, tous rendus sous forme d’échelles.

Display Type

Détermine le mode de présentation de la valeur d’attribut.

La valeur vide Auto signifie une sélection automatique du renderer :

• blocks_id est rendu comme cms_blocks,
• swatch multiselect comme swatch_list,
• select avec 2 ou 3 options comme scale,
• select avec un plus grand nombre d’options comme selected_label,
• multiselect comme text_list,
• boolean comme checkmark,
• date comme date,
• price comme price,
• textarea comme text_block,
• image/media_image comme image,
• les autres types comme text_inline.

Types disponibles :

Dans le panneau d’administration, certaines positions sont marquées comme available in future release. Cela concerne les types déjà visibles dans la liste de configuration, mais qui ne disposent pas encore de leur présentation frontend finale dédiée :

• table,
• badge,
• badge_list,
• icon_value,
• icon_list,
• swatch_grid.

Sort Order

Ordre des sections sur la fiche produit. Un nombre plus faible signifie un affichage plus précoce.

Utilisation : placez les sections les plus importantes au début, par exemple 10 pour les caractéristiques principales, 20 pour les usages, 30 pour les spécifications.

Default State

État initial de la section sur la fiche produit.

Valeurs :

• Expanded - la section est ouverte par défaut,
• Collapsed - la section est repliée par défaut.

Utilisation : les contenus les plus importants peuvent être affichés immédiatement, tandis que les informations d’aide plus longues peuvent rester repliées.

Hide Empty

Détermine si la section doit être masquée lorsqu’il n’y a pas de données à afficher.

Valeurs :

• Yes - la section est masquée si le produit n’a pas de valeur d’attribut ou si le renderer ne renvoie aucun élément,
• No - la section peut rester visible même sans éléments.

Utilisation : dans la plupart des cas, Yes est recommandé afin de ne pas afficher de sections vides au client.

Appearance Profile

Sélection du profil d’apparence défini dans le champ Appearance Profiles.

Le champ prend la forme d’un dropdown. L’administrateur ne saisit plus le code manuellement, mais choisit un profil prêt à l’emploi dans la liste, généralement au format code - label.

Utilisation : permet de donner à une section spécifique une apparence différente de l’apparence globale, par exemple le profil compact, highlight ou plain.

Si le champ est vide et que l’option Use global appearance est sélectionnée, la section utilise l’apparence globale.

Ordre de travail recommandé :

1. définissez un profil dans Appearance Profiles,
2. enregistrez la configuration,
3. revenez à Feature Sections,
4. sélectionnez le profil dans la colonne Appearance Profile pour la section concernée.

CSS Class

Classe CSS supplémentaire ajoutée à la section.

Utilisation : personnalisation individuelle de l’apparence dans le thème frontend, par exemple product-features-section--technical.

Renderer Options JSON

Paramètres optionnels transmis au renderer au format JSON.

L’utilisation dépend du type de présentation. Exemples :

{'unit':'cm','precision':1}

Pour number_with_unit :

• unit - unité, par exemple cm, %, g/m2,
• precision - nombre de décimales.

Pour range_bar :

• min - valeur minimale de la plage,
• max - valeur maximale de la plage,
• low_label - libellé du début de la plage,
• high_label - libellé de la fin de la plage.

Pour rating_dots :

• steps - nombre de points ou de niveaux.

Le type radial_chart ne nécessite pas d’options supplémentaires. Le renderer lit la valeur de l’attribut ou le libellé de l’option au format x/y, par exemple 1/6, 4/6, 7/10.

Exemple pour la barre de plage :

{'min':0,'max':100,'low_label':'Faible','high_label':'Élevée'}

Exemple pour les points :

{'steps':5}

Remarque : le champ doit contenir un JSON valide. Une valeur incorrecte est ignorée par le renderer.

Appearance Profiles

Liste des profils d’apparence optionnels qui peuvent être attribués aux sections via le champ Appearance Profile.

Code

Code technique du profil.

Exemples :

• compact,
• highlight,
• plain.

Utilisation : le code identifie le profil en interne et est utilisé comme valeur d’option dans le dropdown Appearance Profile de la section.

Label

Nom descriptif du profil visible pour l’administrateur.

Utilisation : facilite l’identification du profil dans la configuration, par exemple Compact, Mis en avant, Neutre. En combinaison avec le code, il crée un libellé clair dans la liste de sélection des profils dans Feature Sections.

Background

Couleur de fond de la section pour le profil.

Utilisation : mise en avant de sections sélectionnées ou adaptation au thème.

Text

Couleur du texte principal dans la section.

Heading

Couleur du titre de la section.

Accent

Couleur d’accent, par exemple pour les éléments actifs, les points de l’échelle ou les mises en avant.

Accent Background

Couleur de fond des éléments accentués.

Border

Couleur des lignes, séparateurs, axes d’échelle et bordures.

Icon

Couleur de l’icône d’ouverture et de fermeture de la section.

Radius, e.g. 18px

Arrondi des coins de la section.

Exemples : 0, 8px, 18px.

Padding, e.g. 28px

Espacement interne de la section.

Exemples : 16px, 24px, 28px.

Label Font Size, e.g. 21px

Taille du texte des libellés de caractéristiques dans la section.

Exemples : 16px, 18px, 21px, 1.25rem.

Product Features Appearance

Ce groupe contient l’apparence globale des sections. Les paramètres sont convertis en variables CSS et appliqués au wrapper du module.

Section Background Color

Couleur de fond de la section.

Par défaut : #f4f4f4.

Section Text Color

Couleur principale du texte dans la section.

Par défaut : #000000.

Section Heading Color

Couleur de l’en-tête de section.

Par défaut : #000000.

Muted Text Color

Couleur des textes d’aide et des éléments moins importants.

Par défaut : #555555.

Accent Color

Couleur des éléments actifs et des mises en avant.

Par défaut : #000000.

Accent Background Color

Couleur de fond des éléments actifs, par exemple les sélections.

Par défaut : #ffffff.

Border Color

Couleur des bordures, séparateurs et axes d’échelle.

Par défaut : #9b9b9b.

Icon Color

Couleur de l’icône + / - dans l’en-tête de section.

Par défaut : #000000.

Selected Text Color

Couleur du texte de la valeur sélectionnée.

Par défaut : #000000.

Selected Font Weight

Graisse de police de la valeur sélectionnée.

Par défaut : 700.

Exemples : 400, 500, 600, 700, bold.

Section Border Radius

Arrondi du conteneur de section.

Par défaut : 18px.

Section Padding

Espacement interne de la section.

Par défaut : 28px.

Section Gap

Espacement entre les sections.

Par défaut : 16px.

Heading Font Size

Taille de police de l’en-tête de section.

Par défaut : 20px.

Exemples : 18px, 20px, 1.25rem, clamp(18px, 2vw, 22px).

Label Font Size

Taille de police des libellés de caractéristiques et des libellés de valeur.

Par défaut : 21px.

Body Font Size

Taille de police du contenu principal de la section.

Par défaut : 16px.

Gestion des attributs côté produit

Le module ne crée pas de système distinct de données produit. Il utilise les attributs produit Magento, c’est pourquoi la gestion du contenu s’effectue principalement dans l’édition du produit.

Édition d’un produit unique

1. Accédez à Catalog > Products.
2. Ouvrez le produit à modifier.
3. Renseignez les attributs utilisés par les sections du module.
4. Si le produit doit utiliser des blocs CMS, accédez au groupe Product Features et définissez le champ CMS Blocks.
5. Enregistrez le produit.
6. Videz le cache si le projet l’exige.

La section n’apparaîtra sur le frontend que si :

• le module est activé,
• la section est activée dans la configuration,
• l’attribut existe,
• le produit possède une valeur pour cet attribut,
• le renderer peut gérer la valeur sélectionnée,
• la section n’a pas été masquée par Hide Empty.

Attribut blocks_id / CMS Blocks

Pendant setup:upgrade, le module ajoute un attribut produit :

• code : blocks_id,
• libellé : CMS Blocks,
• type : text,
• input : multiselect,
• source model : blocs CMS actifs,
• backend : backend Magento standard pour multiselect,
• scope : Store View,
• groupe : Product Features,
• visible dans l’édition produit,
• disponible dans la grille produits et le filtrage de grille.

Le champ CMS Blocks permet d’attribuer au produit des blocs CMS actifs. Chaque bloc sélectionné sera rendu comme une section distincte si la configuration du module contient une section avec :

• Attribute Code : blocks_id,
• Display Type : cms_blocks.

Le titre de la section en frontend provient du titre du bloc CMS, et son contenu provient du contenu du bloc. Les blocs inactifs ou indisponibles pour le Store View ne sont pas rendus.

Gestion des blocs CMS

Les blocs utilisés par blocks_id sont créés de manière standard dans Magento :

Content > Elements > Blocks

Recommandations :

• utilisez des titres de bloc clairs, car ils peuvent être visibles comme titres de section,
• attribuez les blocs aux Store View appropriés,
• définissez le bloc comme actif,
• stockez dans les blocs des contenus descriptifs destinés à être partagés entre plusieurs produits, par exemple la livraison, les retours, les instructions, les technologies.

Édition de masse des produits

L’attribut blocks_id est prêt pour l’édition de masse des produits.

1. Accédez à Catalog > Products.
2. Sélectionnez les produits dans la grille.
3. Choisissez l’action Update Attributes.
4. Définissez la valeur du champ CMS Blocks.
5. Enregistrez les modifications.

Utilisation : attribution rapide de la même section CMS, par exemple Livraison, Retours ou Instructions d’entretien, à plusieurs produits en même temps.

Attributs pour l’échelle

Pour le type scale, utilisez des attributs select avec 2 ou 3 options actives.

Exemple :

• attribut fit,
• options : Ample, Regular, Ajusté.

Le produit doit avoir l’une des options sélectionnée. Le module affichera toutes les options de l’échelle et mettra en avant celle attribuée au produit.

Si l’attribut comporte moins de 2 ou plus de 3 options, le renderer scale ignorera cet attribut.

Attributs multiselect

Pour les listes de caractéristiques, d’usages, de technologies ou de certifications, utilisez des attributs multiselect.

Types de présentation possibles :

• text_list,
• badge_list,
• swatch_list,
• swatch_grid,
• multiselect_icon,
• icon_list.

Le produit peut avoir plusieurs valeurs sélectionnées. Le module rend uniquement les valeurs attribuées au produit.

Swatches Magento

Si l’attribut multiselect utilise les swatches Magento, vous pouvez utiliser le type swatch_list ou swatch_grid.

Utilisation :

• icônes de technologies,
• couleurs,
• pictogrammes d’usage,
• marquages des matériaux.

Si l’option dispose d’un swatch image, le module affichera l’image. Si elle dispose d’un swatch couleur ou texte, le module utilisera la variante appropriée.

Icônes Amasty

Pour le type multiselect_icon, le module tente de récupérer l’icône de l’option depuis Amasty ShopbyBrand / ShopbyBase.

Source de l’icône :

Shop by Brand > Option Edit > Other > Small Image

Le texte alternatif provient de Small Image Alt, et en son absence, du libellé de l’option.

Si Amasty n’est pas installé ou si l’option n’a pas d’icône, le module affichera uniquement le libellé.

Attributs textuels et HTML

Pour les informations courtes, utilisez text_inline, key_value ou badge.

Pour les descriptions plus longues, utilisez text_block, accordion_text ou html_block.

Remarque : html_block et accordion_text rendent du HTML, ils ne doivent donc être utilisés que pour des contenus administratifs de confiance.

Attributs numériques

Pour les valeurs numériques, vous pouvez utiliser :

• number_with_unit - lorsque le nombre nécessite une unité,
• range_bar - lorsque la valeur doit être affichée comme une progression dans une plage,
• rating_dots - lorsque la valeur décrit un niveau ou une note.

Exemple de Renderer Options JSON pour un nombre avec unité :

{'unit':'%','precision':0}

Attributs boolean

Pour les attributs oui/non, utilisez :

• yes_no, lorsque le client doit voir à la fois Yes et No,
• checkmark, lorsque la caractéristique doit être visible uniquement si le produit la possède.

Attributs image

Pour les attributs de type image, vous pouvez utiliser :

• image,
• image_with_label,
• image_grid.

Le module construit l’adresse de l’image à partir du répertoire média produit de Magento et utilise le libellé de l’attribut comme texte alternatif.

Exemple de configuration

Section avec plusieurs échelles :

Section d’usages avec icônes :

Sections CMS :

Diagnostic

Si une section n’apparaît pas sur le frontend, vérifiez :

• si Enabled du module a la valeur Yes,
• si la section concernée a Enabled = Yes,
• si le produit a l’attribut renseigné,
• si le bon Attribute Code ou Attribute Codes a été sélectionné,
• si Display Type correspond au type d’attribut,
• si Hide Empty ne masque pas la section vide,
• si l’attribut est disponible pour le Store View concerné,
• si le bloc CMS est actif et attribué au bon Store View,
• si le cache Magento a été actualisé.