Product Features - installation, configuration et gestion des attributs

Ce document décrit la configuration du modulekowal/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é à être installé via Composer.

Les identifiants d’accès au dépôt Composer, c’est-à-dire l’adresse e-mail du client et le token de licence, vous seront envoyés par e-mail après l’achat. Ils sont également disponibles dans l’espace client après connexion sur kowal.store. Remplacez TWOJ_EMAIL_KLIENTA par l’adresse e-mail de votre compte et TWOJ_TOKEN par le token reçu. Exécutez les commandes dans le répertoire racine de Magento.

composer config repositories.kowal composer https://repo.kowal.store
composer config http-basic.repo.kowal.store "TWOJ_EMAIL_KLIENTA" "TWOJ_TOKEN"
composer require kowal/module-product-features
bin/magento module:enable Kowal_ProductFeatures
bin/magento setup:upgrade
bin/magento cache:flush

Après un 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érentes vues de boutique peuvent disposer de sections de caractéristiques ou d’une apparence différentes.

Product Features

Enabled

Active ou désactive le module pour le périmètre de configuration donné.

Valeurs :

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

Utilisation : désactivation rapide du module pour toute 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 lorsque le typecms_blocks.

Enabled

Active ou désactive une section unique.

Valeurs :

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

Utilisation : masquer temporairement une section sans supprimer ses paramètres.

Section Title

Titre de section visible sur la fiche produit.

Exemples :

• Cechy produktu,
• Zastosowanie Sportowe,
• Specyfikacja,
• Technologie,
• Dostawa.

Utilisation : le nom doit être compréhensible pour le client et ne doit pas nécessairement correspondre au nom technique de l’attribut.

Remarque : pour le typecms_blocks, le titre de la section enfant est récupéré depuis le titre du bloc CMS.

Attribute Code

Attribut produit unique utilisé par la section. Le champ prend la forme d’un dropdown avec la liste des attributs produit.

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

Attribute Codes

Liste de plusieurs attributs produit utilisés par une seule section. Le champ prend la forme d’un multiselect.

Utilisation : utilisez ce champ lorsqu’une section doit agréger plusieurs caractéristiques, par exemple plusieurs échelles dans la sectionCechy produktuou plusieurs paramètres dans la sectionSpecyfikacja.

Exemple : la sectionCechy produktupeut contenir les attributsfit,resistance,stretchetbreathability, tous rendus sous forme d’échelles.

Display Type

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

La valeur videAutosignifie le choix automatique du renderer :

• blocks_idest rendu commecms_blocks,
• swatch multiselect commeswatch_list,
• select avec 2 ou 3 options commescale,
• select avec davantage d’options commeselected_label,
• multiselect commetext_list,
• boolean commecheckmark,
• date commedate,
• price commeprice,
• textarea commetext_block,
• image/media_image commeimage,
• les autres types commetext_inline.

Types disponibles :

Dans le panneau d’administration, certaines entrées sont marquées commeavailable in future release. Cela concerne les types déjà visibles dans la liste de configuration, mais qui ne disposent pas encore de leur propre présentation frontend cible :

• 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 tôt.

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

Default State

État initial de la section sur la fiche produit.

Valeurs :

• Expanded- la section est déployée 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 complémentaires plus longues restent repliées.

Hide Empty

Détermine si la section doit être masquée lorsqu’il n’y a aucune donnée à 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 : la valeurYesest généralement recommandée afin de ne pas afficher de sections vides au client.

Appearance Profile

Choix du profil d’apparence défini dans le champAppearance Profiles.

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

Utilisation : permet de donner à une section précise une apparence différente de l’apparence globale, par exemple le profilcompact,highlightouplain.

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

Ordre de travail recommandé :

1. définissez le profil dansAppearance Profiles,
2. enregistrez la configuration,
3. revenez àFeature Sections,
4. sélectionnez le profil dans la colonneAppearance Profilepour la section appropriée.

CSS Class

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

Utilisation : adaptation individuelle de l’apparence dans le thème frontend, par exempleproduct-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}

Pournumber_with_unit:

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

Pourrange_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 fin de plage.

Pourrating_dots:

• steps- nombre de points ou de niveaux.

Typeradial_chartne nécessite pas d’options supplémentaires. Le renderer lit la valeur de l’attribut ou le libellé de l’option au formatx/y, par exemple1/6,4/6,7/10.

Exemple pour la barre de plage :

{"min":0,"max":100,"low_label":"Niska","high_label":"Wysoka"}

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 pouvant être attribués aux sections via le champAppearance 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 dropdownAppearance Profilede la section.

Label

Nom descriptif du profil visible par l’administrateur.

Utilisation : facilite l’identification du profil dans la configuration, par exempleKompaktowy,Wyróżniony,Neutralny. Associé au code, il forme un libellé lisible dans la liste de sélection des profils dansFeature Sections.

Background

Couleur d’arrière-plan 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 section.

Accent

Couleur d’accent, par exemple des éléments actifs, des points de l’échelle ou des mises en évidence.

Accent Background

Couleur d’arrière-plan des éléments d’accent.

Border

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

Icon

Couleur de l’icône de déploiement et de repli de la section.

Radius, e.g. 18px

Arrondi des angles 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 d’arrière-plan 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 auxiliaires et moins importants.

Par défaut :#555555.

Accent Color

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

Par défaut :#000000.

Accent Background Color

Couleur d’arrière-plan des éléments actifs, par exemple des 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 valeurs.

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 de données produit distinct. Il utilise les attributs produit Magento, c’est pourquoi la gestion du contenu se fait 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 groupeProduct Featureset définissez le champCMS Blocks.
5. Enregistrez le produit.
6. Videz le cache si le projet l’exige.

La section apparaîtra sur le frontend uniquement si :

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

Attributblocks_id/ CMS Blocks

Lors desetup:upgrade, le module ajoute l’attribut produit suivant :

• 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 du produit,
• disponible dans la grille produits et dans le filtrage de la grille.

Le champCMS Blockspermet d’attribuer des blocs CMS actifs au produit. 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 sur le frontend provient du titre du bloc CMS, et le contenu de son contenu. Les blocs inactifs ou indisponibles pour le Store View ne sont pas rendus.

Gestion des blocs CMS

Les blocs utilisés parblocks_idse créent de manière standard dans Magento :

Content > Elements > Blocks

Recommandations :

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

Modification en masse des produits

Attributblocks_idest préparé pour fonctionner avec la modification en masse des produits.

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

Utilisation : attribution rapide de la même section CMS, par exempleDostawa,ZwrotyouInstrukcja pielęgnacji, à plusieurs produits à la fois.

Attributs pour l’échelle

Pour le typescale, utilisez des attributsselectavec 2 ou 3 options actives.

Exemple :

• attributfit,
• options :Luźny,Regularny,Dopasowany.

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

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

Attributs multiselect

Pour les listes de caractéristiques, d’usages, de technologies ou de certificats, utilisez des attributsmultiselect.

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 ne rend que les valeurs attribuées au produit.

Swatches Magento

Si l’attribut multiselect utilise les swatches Magento, vous pouvez utiliser le typeswatch_listouswatch_grid.

Utilisation :

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

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

Icônes Amasty

Pour le typemultiselect_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 deSmall Image Alt, et s’il est absent, 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 texte et HTML

Pour les informations courtes, utiliseztext_inline,key_valueoubadge.

Pour les descriptions plus longues, utiliseztext_block,accordion_textouhtml_block.

Remarque :html_blocketaccordion_textrendent du HTML, ils doivent donc être utilisés uniquement pour des contenus d’administration fiables.

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 deRenderer 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 foisYesetNo,
• 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 des médias produit Magento et utilise le libellé de l’attribut comme texte alternatif.

Exemple de configuration

Section de plusieurs échelles :

Section d’usages avec icônes :

Sections CMS :

Diagnostic

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

• siEnableddu module a la valeurYes,
• si la section concernée aEnabled = Yes,
• si le produit possède l’attribut renseigné,
• si le bonAttribute CodeouAttribute Codes,
• siDisplay Typecorrespond au type d’attribut,
• siHide Emptyne masque pas une section vide,
• si l’attribut est disponible pour le Store View donné,
• si le bloc CMS est actif et attribué au bon Store View,
• si le cache Magento a été rafraîchi.