Les modules et les thèmes HubSpot prennent en charge la personnalisation par les créateurs de contenu grâce à des champs. Les développeurs créent et organisent les champs via un fichier fields.json.
fields.json
, qui sera ensuite traduit vers les éditeurs de thème et de contenu.
fields.json
d’un module localement par le biais du ILC HubSpot et dans l’éditeur de module présent dans l’application. Pour ajouter des champs à un thème, vous devez mettre à jour le fichier fields.json
du thème en utilisant l’ILC.
fields.json
situé dans le dossier du module ou du thème. Pour les modules, ce fichier est automatiquement créé lors de l’utilisation de la commande hs create module
. Toutes les options de champ disponibles dans l’éditeur de module sont disponibles sous forme de propriétés que vous pouvez ajouter ou modifier dans le fichier fields.json
. Cela comprend les champs, les groupes et les conditions des répéteurs. L’un des avantages de l’édition locale est qu’elle facilite l’inclusion de vos modules dans les systèmes de contrôle de version tels que git.
display_width
aux champs dans le fichier fields.json
avec la valeur half_width
.
display_width
de half_width
apparaîtra en demi-largeur dans l’éditeur de contenu. Lorsque le champ situé au-dessus ou en dessous de ce champ dans le fichier fields.json
est défini sur half_width
, ils sont placés côte à côte.
fields.json
avec l’élément type
de "group"
. Ensuite, incluez un tableau children
pour contenir les champs que vous souhaitez regrouper.
"group"
dans le premier paramètre children
. Ensuite, construisez le groupe de champs de la même manière que ci-dessus, en utilisant children
pour contenir les champs. Vous pouvez imbriquer des groupes de champs jusqu’à une profondeur de trois.
Paramètre | Type | Description |
---|---|---|
display | String | Le style d’affichage du groupe de champs. Peut être l’un des suivants :
|
icon | Objet | Ajoute une icône à gauche du libellé. Contient les paramètres suivants :
|
expanded | Booléen | indique si le groupe de champs est développé par défaut. |
group_occurrence_meta
dans la configuration du groupe de champs. Cette propriété contient les propriétés suivantes :
featured_enabled
: défini sur true
pour activer les éléments phares.featured_limit
: le nombre maximum d’éléments phares à autoriser.occurrence
.
hs_meta
. Le code ci-dessous utilise une boucle for pour vérifier les éléments de groupe de champs qui sont définis comme phares, puis affiche le titre de chacun sous forme d’en-tête h3
.
{{ repeated_group_item.hs_meta.occurrence.featured }}
fields.json
d’un module ou d’un thème. Celui-ci permet aux créateurs de contenu de contrôler le style d’un module ou d’un thème dans l’éditeur de page et de thème. Découvrez ci-dessous comment ajouter des champs de style à un module ou à un thème. Découvrez les meilleures pratiques pour utiliser et organiser les champs de style.
fields.json
d’un module, vous les ajoutez dans un groupe de styles. Ce groupe, cependant, peut contenir plusieurs groupes en son sein, comme indiqué ci-dessous :
fields.json
d’un module.
fields.json
d’un thème seront ajoutés à la barre latérale gauche de l’éditeur de thème. Il n’est pas nécessaire de les placer dans un groupe de styles, comme illustré ci-dessous :
fields.json
d’un thème.
fields.json
peut entraîner la perte des données des instances de module existantes. Ajoutez de nouveaux champs de style ou créez une nouvelle liste dans laquelle les champs sont regroupés de manière appropriée. Cela permet d’éviter que vos mises à jour ne constituent des changements brusques pour les clients qui utilisent vos thèmes. Pour mettre en place la migration à partir des anciens modules, consultez le forum des idées HubSpot..css
générée :
Paramètre | Type | Description | Par défaut |
---|---|---|---|
max | Entier | Nombre maximum d’occurrences de ce groupe. Empêche le créateur de contenu d’ajouter plus que ce nombre d’éléments dans l’interface utilisateur. | null |
min | Entier | Nombre minimum d’occurrences de ce groupe de champs. Empêche le créateur de contenu d’avoir moins de ce nombre d’éléments dans l’interface utilisateur. | null |
sorting_label_field | Chaîne | Il s’agit de l’identifiant du champ dont il faut extraire le texte pour l’afficher dans l’interface utilisateur sur les cartes à glisser. Par défaut, il s’agit du premier champ du groupe. |
inherited_value
peut être configurée pour qu’un champ hérite de sa valeur par défaut d’autres champs. Pour définir la valeur par défaut d’un champ à partir de la valeur d’un autre champ, définissez default_value_path
comme chemin d’accès au nom du champ cible. Lorsque default_value_path
est défini, il ignorera tout default
défini sur le champ.
Pour accéder aux valeurs d’autres champs, les chemins doivent inclure module.
au début, comme lorsque vous accédez à la valeur dans le code HubL du module.
font
et font_set
, vous devez inclure les deux pour l’héritage des champs de police. Découvrez-en davantage sur le champ de police.property_value_path
. Tous les chemins référencés dans inherited_value
peuvent également inclure des clés provenant de la valeur d’un champ pour les champs complexes.
Par exemple, les champs de couleur ont des valeurs d’objet qui contiennent la couleur du champ ainsi que son opacité. Ainsi, pour obtenir la valeur réelle d’une couleur sans son opacité, le chemin d’accès doit se terminer par .color
. Par exemple, un champ de police ne peut hériter sa couleur que d’un champ de couleur distinct :
default_value_path
et de property_value_paths
pour hériter d’une valeur par défaut d’un champ tout en héritant d’une valeur de propriété spécifique d’un champ différent :
default_value_path
ou property_value_paths
n’affecteront plus la valeur de ce champ.
visibility
au champ dans le fichier fields.json
. Par exemple, vous pouvez définir un module de formulaire pour afficher une zone de texte enrichi lorsque le message de remerciement est sélectionné, mais un sélecteur de page lorsqu’une redirection est sélectionnée.
Vous pouvez définir la visibilité en fonction de la valeur de controlling_field_path
ou d’une propriété spécifique dans ce champ à l’aide du paramètre property
. Vous pouvez également appliquer la visibilité à un champ individuel ou à un groupe de champs pour contrôler la visibilité de tous les éléments du groupe.
Paramètre | Type | Description |
---|---|---|
controlling_field_path | Chaîne | Le chemin du champ qui contrôle la condition d’affichage.
|
controlling_value_regex | Chaîne | L’expression régulière dans le champ de contrôle qui doit être présente pour que le champ s’affiche. L’expression régulière doit correspondre à la chaîne entière (et non à un sous-ensemble) et est exécutée en fonction de la casse. |
operator | Chaîne | L’opérateur qui définit la manière dont la valeur controlling_value_regex doit être respectée. Opérateurs possibles :
|
property | Chaîne | Définit la visibilité en fonction d’une propriété spécifique du champ cible. Par exemple, vous pouvez activer la visibilité lorsque la propriété src d’un champ d’image est égale à une valeur spécifique. Par défaut, si aucune valeur n’est fournie pour ce champ, la visibilité est basée sur la valeur de chaîne de controlling_value_regex . |
occurrence_options
à l’intérieur de l’objet visibility
pour cibler le nombre de valeurs d’un champ répété. Cet objet doit inclure count
pour la comparaison et une définition operator
. Par exemple, pour afficher un champ de texte uniquement lorsqu’un autre champ répété comporte au moins deux éléments, vous pouvez définir visibility
comme suit :
operater
:
"NOT_EQUAL"
"EQUAL"
"EMPTY"
"NOT_EMPTY"
"GREATER_THAN"
"GREATER_THAN_OR_EQUAL"
"LESS_THAN"
"LESS_THAN_OR_EQUAL"
visibility
ne peut prendre en charge qu’un seul critère à la fois. Pour inclure plusieurs critères avec plusieurs opérateurs ainsi que l’ordre des opérations, vous pouvez utiliser advanced_visibility
.
Paramètre | Type | Description |
---|---|---|
visibility_rules | Chaîne | Par défaut, cette valeur est définie sur SIMPLE . Pour utiliser advanced_visibility , définissez sur ADVANCED . |
boolean_operator | Chaîne | L’opérateur booléen pour les critères conditionnels. Peut être AND ou OR . |
criteria | Tableau | Un tableau d’objets de visibilité qui définit les critères conditionnels qui doivent être remplis pour que le champ s’affiche. |
controlling_field_path | Chaîne | Le chemin du champ qui contrôle la condition d’affichage.
|
controlling_value_regex | Chaîne | La valeur dans le champ de contrôle qui doit être respectée pour afficher le champ. Lors de l’utilisation de l’opérateur MATCHES_REGEX , l’expression régulière doit correspondre à la chaîne entière (et non à un sous-ensemble) et est exécutée en fonction de la casse. Un champ avec controlling_field_path , mais sans controlling_value_regex est visible si le champ de contrôle a une valeur non-nulle et non vide. |
operator | Chaîne | L’opérateur qui définit la manière dont la valeur controlling_value_regex doit être respectée. Opérateurs possibles :
MATCHES_REGEX . |
fields.json
du module.
payment
) est un champ obligatoire (menu déroulant) qui permet au créateur de contenu de sélectionner un lien de paiement spécifique. Dans HubSpot, un créateur de contenu verra les éléments suivants lors du premier ajout du module à la page :checkout_location
, button_text
, et icon
) s’affichent. En effet, les champs ont un attribut visibility
contrôlé par le champ de payment
et nécessitant une valeur d’ID dans le paramètre id
du champ de paiement.icon
lui-même utilise advanced_visibility
pour apparaître uniquement lorsqu’un lien de paiement est présent dans le champ payment
ET lorsque la case à cocher add_icon
est sélectionnée.
En plus de définir la visibilité dans fields.json
, vous pouvez définir la visibilité dans le gestionnaire de conception en modifiant les options Conditions d’affichage d’un champ.
visibility
dans le fichier fields.json
du module.
disabled_controls
du champ. Les conditions pour rendre un champ modifiable sont définies dans l’objet rules
, qui suit le même format que advanced_visibility.
Le code ci-dessous montre à la fois une mise en œuvre simple et avancée des critères rules
:
simple_page
inclut une logique pour désactiver le champ si le champ text_field
est défini sur testing
.fancy_page
inclut une logique pour désactiver le champ si text_field
ou text_field_2
est défini sur une valeur non égale à testing
et testing2
respectivement.Paramètre | Type | Description |
---|---|---|
message | Chaîne | Le message à afficher dans l’éditeur de contenu lorsque le champ est désactivé. |
rules | Objet | Les conditions d’activation du champ pour modification. |
criteria | Tableau | Un tableau d’objets de condition qui définit les critères qui doivent être remplis pour que le champ s’affiche. Ce tableau peut contenir plusieurs objets de condition séparés par une logique AND ou OR via le paramètre boolean_operator . |
boolean_operator | Chaîne | L’opérateur booléen pour les critères conditionnels. Peut être AND ou OR . Lorsqu’il n’est pas spécifié, la valeur par défaut est AND . |
controlling_field_path | Chaîne | Le chemin du champ qui contrôle la condition d’affichage.
|
controlling_value_regex | Chaîne | La valeur dans le champ de contrôle qui doit être respectée pour afficher le champ. Lors de l’utilisation de l’opérateur MATCHES_REGEX , l’expression régulière doit correspondre à la chaîne entière (et non à un sous-ensemble) et est exécutée en fonction de la casse. Un champ avec controlling_field_path , mais sans controlling_value_regex est visible si le champ de contrôle a une valeur non-nulle et non vide. |
operator | Chaîne | L’opérateur qui définit la manière dont la valeur controlling_value_regex doit être respectée. Opérateurs possibles :
MATCHES_REGEX . |
editor-preview.json
dans le répertoire racine du thème pour mapper les champs de thème à une liste de sélecteurs CSS. Dans le fichier, vous inclurez un tableau pour chaque champ de style que vous souhaitez mettre en évidence contenant les sélecteurs CSS pertinents, en utilisant le format suivant :
editor-preview.json
du thème Growth par défaut.
Paramètre | Description |
---|---|
theme-directory-path | Le chemin d’accès au répertoire du thème. |
editor-preview.json
pour vous assurer que les champs et les sélecteurs sont mappés correctement. Si la commande generate-selectors fera une supposition rudimentaire sur les champs qui affectent les sélecteurs, vous devrez apporter des corrections en fonction de la façon dont votre thème est construit. Par exemple, cette commande ne peut pas détecter si des modules remplacent le style ou si vous utilisez des macros.
Pour tester ces mappages, téléchargez le thème sur un compte, puis consultez l’éditeur de thème de ce compte (**Paramètres ** > Site web > Thèmes > Afficher le thème).