Utilisation de modules dans les modèles
Les modules sont des zones modifiables des pages ou des e-mails HubSpot. Des instances de module peuvent être ajoutées aux modèles à l'aide de HubL. Lorsqu'il est défini dans un modèle, un module apparaît par défaut à cet emplacement dans le modèle. Si le module se trouve dans une zone modifiable, telle qu'une zone de glisser-déposer ou une colonne flexible, il peut être supprimé, déplacé et d'autres modules peuvent être ajoutés. Ce sont des instances de module.
Les définitions de module : les balises de module que vous pouvez ajouter aux modèles définissent l'état par défaut des instances de module.
Après la définition d'un module, si nécessaire, vous pouvez obtenir les valeurs de ses champs au niveau du modèle via content.widgets
.
Les balises de module sont constituées des éléments suivants :
- Un nom unique pour ce module : donne au module une identité unique dans le contexte du modèle.
- Chemin (en fonction de la balise) : définit l'emplacement du module dans le gestionnaire de conception.
/
désigne la racine du lecteur actuel../
désigne le répertoire actuel.../
désigne le parent du répertoire actuel.
- Paramètres : les paramètres supplémentaires pour l'instance du module. Des valeurs par défaut au niveau du modèle sont incluses pour les champs du module.
@hubspot/
suivi du type de module. Consultez l'exemple ci-dessous et la page des modules par défaut pour plus d'informations.
Les balises de module HubL sont délimitées par {%
et nécessitent de spécifier le type de module ainsi qu'un nom unique. Le nom unique doit être entre guillemets après le type de module. Les noms de module doivent utiliser des tirets bas au lieu d'espaces ou de tirets.
Ce nom unique est utilisé pour associer le contenu saisi avec l'éditeur de page/d'e-mail à la balise de module HubL correspondante. Par exemple, si vous codez une balise de module HubL avec le même nom dans deux zones différentes d'un modèle, les utilisateurs n'auront qu'un seul module à modifier dans l'éditeur, mais les modifications apportées à ce module s'appliqueront aux deux endroits.
Outre les deux composants obligatoires d'une balise de module, les modules HubL prennent en charge divers paramètres qui spécifient le comportement d'un module ainsi que son rendu. Les paramètres sont des paires (clé, valeur) séparées par des virgules. Les paramètres peuvent être de différents types : chaîne de caractères, booléen, entier, énumération et liste JSON. Les paramètres de type chaîne doivent avoir leur valeur entre guillemets*, tandis que les paramètres de type booléen n'ont pas besoin de guillemets autour de leur valeur true ou false. Vous trouverez ci-dessous un exemple de module de texte de base avec un libellé et une valeur spécifiés.
* Les valeurs des paramètres de type chaîne peuvent être saisies entre guillemets simples ou doubles. Dans cet exemple, le nom du module unique est entre guillemets doubles et les valeurs des paramètres sont entre guillemets simples. Cette syntaxe est utile lorsque les valeurs des paramètres comprennent des balises HTML avec plusieurs attributs. Les valeurs des paramètres de type booléen sont en majuscules pour plus de lisibilité.
Pour les modules dont les champs attendent des dictionnaires, vous pouvez les transmettre comme d'autres paramètres. Si cela vous permet une meilleure organisation ou si vous prévoyez de réutiliser les valeurs, vous pouvez définir le dictionnaire sur une variable et transmettre la variable au paramètre à la place.
Nous avons présenté dnd_area
et toutes les balises HubL que vous utilisez avec. Il est désormais possible d'avoir un champ de module avec le même nom qu'un paramètre dnd existant. Le gestionnaire de conception vous empêchera de créer de nouveaux champs qui utilisent l'un de ces noms de paramètre réservé, mais cela n'aide pas les anciens modules. Pour résoudre ce problème, nous avons ajouté un paramètre fields
. Tout comme vous transmettez des données de champ pour un groupe, vous pouvez transmettre le nom du champ en tant que clé de l'objet de champ. Sa valeur doit être conforme au format attendu par le type de champ.
Vous pouvez définir des valeurs par défaut au niveau du modèle pour les champs répétés en transmettant un tableau au paramètre du champ. Les éléments du tableau doivent avoir le format attendu en fonction du type de champ. Par exemple, un champ de texte simple n'attend qu'une chaîne de caractères, un champ répétiteur d'image attend l'objet d'un champ d'image. Ceci s'applique à tous les autres types de champs.
Les modules qui contiennent des groupes de champs répétés, comme ceux d'un module de diaporama ou d'un module de FAQ, peuvent avoir une valeur par défaut au niveau du modèle pour ces groupes. Pour ce faire, vous transmettez un tableau d'objets au paramètre de votre groupe de champs. Les paires (clé, valeur) de l'objet sont les noms des champs et leurs valeurs.
Alors que la plupart des modules ont des paramètres qui contrôlent le contenu par défaut, il peut y avoir des situations où vous devez ajouter d'importants blocs de code au contenu par défaut d'un module. Par exemple, vous souhaiterez peut-être inclure un important bloc HTML comme contenu par défaut d'un module de texte enrichi ou HTML. Plutôt que d'essayer d'écrire ce code dans un paramètre de valeur, vous pouvez utiliser la syntaxe de bloc HubL.
Avant la syntaxe module_block
, widget_block
était utilisé. Il suit le même modèle mais les balises d'ouverture étaient widget_block
et widget_attribute
. Les balises de fermeture étaient end_widget_attribute
et end_widget_block
.
Si la syntaxe widget_block
est obsolète, vous n'avez pas besoin de mettre à jour votre ancien code.
Le paramètre qui suit immédiatement module_block
ou widget_block
(obsolète) est le paramètre type_of_module
.
Dans presque toute notre documentation, vous noterez que nous utilisons module
. Les modules HubSpot de deuxième version sont des modules normaux, comme ceux que vous pouvez créer. Il n'est donc plus nécessaire d'utiliser un autre élément type_of_module
.
Alors que widget_block
est obsolète, vous devriez utiliser module_block
. Si vous héritez d'un site web d'un autre développeur, il peut contenir un ancien code utilisant widget_block
et type_of_module
.
type_of_module
prend en charge les noms de modules HubSpot de première version, par exemple rich_text
ou raw_html
. Des paramètres supplémentaires peuvent être ajoutés à la première ligne de HubL. La deuxième ligne définit le paramètre auquel le contenu du bloc sera appliqué. Par exemple, pour un module rich_text
, il s'agit du paramètre html. Pour un module raw_html
, il s'agirait du paramètre value (voir les deux exemples ci-dessous).
En plus de la syntaxe normale et de la syntaxe de bloc, il existe certains cas où vous souhaiterez spécifier un important bloc de contenu par défaut pour une variable de contenu prédéfinie. L'exemple le plus courant est la variable content.email_body. Cette variable imprime un corps d'e-mail standard qui peut être modifié dans l'éditeur de contenu. Comme il ne s'agit pas d'un module HubL standard, nous utilisons une balise content_attribute pour spécifier un bloc de contenu par défaut. L'exemple ci-dessous montre que la variable du corps de l'e-mail est renseignée avec un bloc de code de contenu par défaut.
Certains modules disposent de paramètres spéciaux, mais il existe aussi des paramètres pris en charge par tous les modules. Vous trouverez ci-dessous une liste des paramètres pris en charge par tous les modules.
Parameter | Type | Description | Default |
---|---|---|---|
label
| String | Définit le titre interne du module dans l'éditeur de contenu. Ce paramètre peut également être utilisé pour donner des instructions supplémentaires aux utilisateurs. | |
overrideable
| Boolean | Vérifie si le module peut être modifié ou non dans l'éditeur de contenu. Ce paramètre est l'équivalent de l'utilisation de la fonction de verrouillage du module dans l'interface utilisateur de l'outil de création de modèles. |
True
|
no_wrapper
| Boolean | En définissant no_wrapper=True, vous supprimez le balisage d'encadrement autour du contenu d'un module. La sortie du module sur la page est toujours encadrée dans un élément <div> avec des classes spéciales. Grâce à ce balisage, lorsque vous cliquez sur le module dans le volet de prévisualisation, l'éditeur défile vers ce module. Vous souhaiterez peut-être supprimer le wrapper, par exemple si vous souhaitez utiliser un module de texte pour renseigner la destination de l'attribut href d'une balise d'ancrage. |
False
|
extra_classes
| String | L'ajout d'un paramètre de classes supplémentaires ajoutera ces classes à l'encadrement du contenu du module. Vous pouvez ajouter plusieurs classes à la fois, en les séparant par des espaces (par exemple : extra_classes='full-width panel'). | |
export_to_template_context
| Boolean | Si la valeur est définie sur true, au lieu de rendre le HTML, les paramètres de ce widget seront disponibles dans le contexte du modèle. Comment utiliser ce paramètre et la balise widget_data |
False
|
unique_in_loop
| Boolean | Ce paramètre peut être utilisé lorsqu'un module est défini dans une boucle pour ajouter le nom unique du module à l'index de la boucle. Si la valeur est définie sur true, cela permet d'imprimer une version différente de ce module à chaque itération de la boucle. |
False
|
Pour voir une liste complète de tous les types de modules et de leurs paramètres, cliquez ici.
You can set the value of custom module fields using parameters.
Dans ce cas, faq_group_title
ne fait pas partie des paramètres disponibles pour tous les modules. faq_group_title
est spécifique à ce module personnalisé. Il s'agit du nom de variable pour un champ du module.
Certains champs sont simples et le paramètre attend simplement une chaîne de caractères, un nombre entier, un élément true/false. D'autres peuvent s'attendre à un objet. C'est à vous de fournir les valeurs dans le format correct, car il n'y a pas de validation des valeurs dans l'éditeur en fonction des paramètres que vous avez définis dans les paramètres de champ du module personnalisé. Exemple : Un module possède un champ numérique dont la valeur minimale est fixée à 1. Vous transmettez au paramètre la valeur 0. Il n'y a pas d'avertissement pour indiquer que votre valeur est non valide.
Lorsque vous créez des modèles avec des modules qui contiennent des champs de style, vous pouvez définir explicitement des valeurs par défaut pour les champs de style à l'aide du paramètre des styles.
Cela fonctionne comme les groupes normaux, le paramètre est le nom du groupe. Vous transmettez un objet à ce paramètre avec tous les champs que vous souhaitez définir.
Champ | Type | Exemple | Clés |
---|---|---|---|
Blog | ID de blog | 1234567890 | |
Booléen | true/false | false | |
Choix | Chaîne de valeur | "option_1" | |
Couleur | Objet |
|
|
CTA | Chaîne, ID de CTA |
|
|
Date | Horodatage |
|
|
Date et heure | Horodatage |
|
|
Adresse e-mail | Tableau de chaînes d'adresses e-mail |
|
|
Fichier | Chaîne URL vers fichier |
|
|
E-mail de suivi | ID d'e-mail de suivi |
|
|
Police | Objet avec clés et valeurs de police |
|
|
Formulaire | Objet contenant les clés et les valeurs du formulaire |
|
|
Tableau HubDB | ID de tableau HubDB | 123456789 |
|
Icône | Objet avec clés et valeurs d'icône |
|
|
Image | Objet avec des clés et des valeurs d'image |
|
|
Lien | Objet avec clés et valeurs de liaison |
|
|
Logo | Objet avec clés et valeurs du logo |
|
|
Réunion | Chaîne de l'URL du lien de la réunion | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
Menu | ID de menu | 123456789 |
|
Nombre | Entier | 1 |
|
Page | ID de page | 1234567890 |
|
Texte enrichi | Chaîne, peut contenir du HTML | "<h1>Hello, world!</h1>" |
|
Campagne Salesforce | Chaîne de caractères, ID de campagne Salesforce | "7016A0000005S0tQAE" |
|
Menu simple | Tableau d'objets d'éléments de menu |
|
|
Balise | ID de balise/slug (l'ID est recommandé) | 1234567890 |
|
Texte | Chaîne | "it's like any other string" |
|
URL | Objet avec clés et valeurs d'URL |
|
|
Merci d'avoir partagé votre avis.