Premiers pas avec les modules

​

Avant de commencer

• Créez un compte sandbox de développeur CMS Hub. Vous pouvez utiliser votre compte existant, mais le compte sandbox vous permettra de développer sans impacter les éléments de votre compte principal.
• Installez Node.js, qui active les outils de développement local de HubSpot. Les versions 10 ou ultérieures sont prises en charge.

1. Testimonial.module : le dossier contenant les fichiers qui composent le module personnalisé que vous allez créer dans le cadre du tutoriel.
2. homepage.html : le modèle que vous allez modifier pour inclure le module personnalisé.
3. images : le dossier contenant les photos de profil que vous utiliserez dans le module.

​

Configurer votre environnement de développement local

• Dans le terminal, exécutez la commande suivante pour installer l’ILC globalement. Pour installer l’ILC uniquement dans votre répertoire actuel, exécutez npm install @hubspot/cli.

npm install -g @hubspot/cli

• Dans le répertoire où vous stockerez vos fichiers de thème, authentifiez votre compte HubSpot afin de pouvoir interagir avec lui via l’ILC.

hs account auth

• Appuyez sur Entrée pour ouvrir la page de la clé d’accès personnelle dans votre navigateur.
• Sélectionnez le compte sur lequel vous souhaitez effectuer le déploiement, puis cliquez sur Continuer avec ce compte. Vous accéderez alors à la page de la clé d’accès personnelle du compte.
• À côté de Clé d’accès personnelle, cliquez sur Afficher pour révéler votre clé. Cliquez ensuite sur Copier pour la copier dans votre presse-papiers.
• Collez la clé dans le terminal, puis appuyez sur Entrée.
• Saisissez un nom unique pour le compte. Ce nom sera vu et utilisé uniquement par vous lors de l’exécution des commandes. Pour connecter les outils de développement locaux à votre compte, appuyez sur la touche Entrée.

​

Ajouter le boilerplate CMS à votre compte

• Exécutez la commande ci-dessous pour créer un nouveau thème nommé my-theme. Un dossier de thème intitulé my-theme sera alors créé dans votre répertoire de travail, contenant les éléments du boilerplate.

hs create website-theme my-theme

• Téléchargez les fichiers dans votre compte.

hs upload <src> <destination>

​

Créer un module dans HubSpot

• Connectez-vous à votre compte HubSpot, puis accédez au gestionnaire de conception en accédant à Marketing > Fichiers et modèles > Outils de conception.
• Dans la barre latérale gauche du gestionnaire de conception, ouvrez le dossier du thème que vous venez de télécharger.
• Dans le dossier du thème, ouvrez le dossier des modules.
• En haut à gauche, cliquez sur Fichier > Nouveau fichier pour créer un nouveau module dans ce dossier.
• Dans la boîte de dialogue, cliquez sur le menu déroulant, puis sélectionnez Module et Suivant.
• Sélectionnez la case à cocher Pages pour que le module soit disponible pour les sites web et les pages de destination.
• Nommez le module Témoignage, puis cliquez sur Créer.

​

Ajouter des champs au module

• Un champ de texte pour stocker le nom du client qui donne son témoignage.
• Un champ d’image qui stockera la photo de profil du client.
• Un champ de texte enrichi qui stockera le témoignage du client.

​

Ajouter le champ de texte pour le nom du client

• Dans la barre latérale droite, cliquez sur le menu déroulant Ajouter un champ, puis sélectionnez Texte.
• Dans la barre latérale de droite, cliquez sur l’icône Crayon dans l’angle supérieur droit pour nommer le champ. Pour ce tutoriel, saisissez le nom du client. Vous verrez alors le nom de la variable HubL changer pour customer_name.
• Définissez le texte par défaut sur Sally.

• Dans la barre latérale droite, cliquez sur l’icône du fil d’Ariane pour revenir au menu principal du module.

​

Ajouter le champ d’image pour la photo de profil du client

• Ajoutez un autre champ en utilisant la même méthode, en sélectionnant cette fois le type de champ Image.
• Intitulez le champ Image de profil, puis définissez le nom de la variable HubL sur profile_pic.
• Sous Image par défaut, sélectionnez la photo de profil fournie pour Sally dans le dossier d’images des fichiers de projet terminés.
• Définissez le texte alternatif sur Image de profil de Sally.

​

Ajouter le champ de texte enrichi pour le témoignage de Sally

• Ajoutez un autre champ en utilisant la même méthode, en sélectionnant cette fois le type de champ Texte enrichi.
• Intitulez le champ de texte enrichi Témoignage.
• Cliquez sur la zone Texte enrichi par défaut, puis saisissez “Je n’ai eu que de merveilleuses expériences avec cette entreprise.”

Jusqu’à présent, vous avez ajouté des données dans plusieurs champs de module. À ce stade, le module ne contient pas de code HTML pour restituer ces données. Dans l’éditeur de module, cela se traduit par l’état vide de la section module.html.

​

Ajouter HubL pour afficher les données des champs

<!-- module.html -->
{{module.customer_name}}
<img src={{module.profile_pic.src}} alt="{{module.profile_pic.alt}}">
{{module.testimonial}}

• Une fois le HubL ajouté à votre module, vous pouvez cliquer sur Aperçu en haut à droite pour voir à quoi ressemble le module jusqu’à présent.

• Puis, dans l’angle supérieur droit, cliquez sur Publier les modifications.

​

Consulter et modifier le module localement

• Dans le terminal, exécutez la commande : hs fetch <hs_src> <destination> :
  • <hs_src> représente le chemin du fichier du module dans HubSpot. Pour obtenir le chemin du fichier, vous pouvez effectuer un clic droit sur le module dans la barre latérale gauche du gestionnaire de conception, puis sélectionner Copier le chemin.
  • <destination> représente le chemin d’accès au répertoire local où se trouve votre thème. S’il est omis, il s’agira par défaut de votre répertoire de travail actuel.

hs fetch my-theme/modules/testimonial.module

​

Ouvrir le dossier du module dans votre environnement local

​

Consulter le fichier fields.json du module

//fields.json

[
  {
    "label": "Customer Name",
    "name": "customer_name",
    "id": "2a025cd5-7357-007f-ae2f-25ace762588e",
    "type": "text",
    "required": true,
    "locked": false,
    "validation_regex": "",
    "allow_new_line": false,
    "show_emoji_picker": false,
    "default": "Sally"
  },
  {
    "label": "Profile Picture",
    "name": "profile_pic",
    "id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f",
    "type": "image",
    "required": false,
    "locked": false,
    "responsive": true,
    "resizable": true,
    "default": {
      "src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg",
      "alt": "Sally Profile Picture",
      "width": 100,
      "height": 100,
      "max_width": 100,
      "max_height": 100
    }
  },
  {
    "label": "Testimonial",
    "name": "testimonial",
    "id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa",
    "type": "richtext",
    "required": false,
    "locked": false,
    "default": "<p>I’ve had nothing but wonderful experiences with this company.</p>"
  }
]

• name : nom du champ
• label : libellé du champ
• default : valeur par défaut du champ

​

Consulter le fichier module.html du module

<div class="testimonial">
  <h1 class="testimonial__header"> {{ module.customer_name }} </h1>
  <img class="testimonial__picture" src={{ module.profile_pic.src }} alt={{ module.profile_pic.alt }}>
  {{ module.testimonial }}
</div>

​

Consulter le fichier module.css du module

.testimonial {
  text-align: center;
}

.testimonial__header {
  font-weight: bold;
}

.testimonial__picture {
  display: block;
  margin: auto;
}

​

Transférer vos modifications locales vers votre compte HubSpot

• Accédez à votre terminal et assurez-vous que vous êtes dans le bon répertoire.
• Exécutez la commande watch pour transférer les modifications vers HubSpot lors de la sauvegarde : hs watch <src> <destination>.

hs watch my-theme my-theme

​

Prévisualiser vos modifications locales dans HubSpot

• Dans votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
• Dans la barre latérale gauche, accédez au thème que vous avez créé, puis ouvrez le dossier des modules et sélectionnez le module Témoignage.
• Le module étant ouvert, vous devriez maintenant voir vos modifications dans les volets module.html et module.css.
• Dans l’angle supérieur droit, cliquez sur Aperçu. Un nouvel onglet s’ouvrira pour afficher l’aperçu du module.

• Créé un module dans HubSpot
• Transféré ce module dans votre environnement local
• Apporté des modifications au HTML + HubL et aux CSS en utilisant vos outils de développement locaux

​

Ajouter le module à un modèle

Pour cette partie du tutoriel, vous travaillerez principalement avec les dossiers modules et templates dans vos fichiers de thème locaux.

• Dans votre éditeur de code, ouvrez le dossier templates, puis ouvrez le fichier home.html.
• Dans le fichier home.html, accédez au dernier élément dnd_section, qui débute vers la ligne 28. C’est dans cette section que vous ajouterez votre nouveau module.
• Dans dnd_section, au-dessus des autres éléments dnd_modules, copiez et collez la balise de module HubL suivante :

{% dnd_module
 path= “../modules/Testimonial.module”,
 offset=0,
 width=4
%}
{% end_dnd_module %}

• Le CMS de HubSpot utilise un système de grille à 12 colonnes. Par conséquent, pour espacer ce module uniformément avec les deux autres, vous devrez mettre à jour chaque module dans dnd_section pour avoir une largeur de 4.
• Ensuite, le premier dnd_module dans le groupe (testimonial) aura un décalage de 0 pour le positionner en premier.
• Le second dnd_module (linked_image) aura un décalage de 4 pour le positionner en second.
• Le troisième dnd_module (rich_text) aura un décalage de 8 pour le positionner en troisième.

{% dnd_section
    background_color="#f8fafc",
    vertical_alignment="MIDDLE"
  %}

    {% dnd_module
      path= “../modules/Testimonial.module”,
      offset=0,
      width=4
    %}
    {% end_dnd_module %}

    {% dnd_module
      path="@hubspot/linked_image",
      img={
        "alt": "Stock placeholder image with grayscale geometrical mountain landscape",
        "loading": "lazy",
        "max_height": 451,
        "max_width": 605,
        "size_type": "auto_custom_max",
        "src": get_asset_url("../images/grayscale-mountain.png")
      },
      offset=4,
      width=4
    %}
    {% end_dnd_module %}
    {% dnd_module
      path="@hubspot/rich_text",
      html="<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>"
      offset=8,
      width=4
    %}
    {% end_dnd_module %}
  {% end_dnd_section %}

​

Prévisualiser vos modifications dans HubSpot

• Si vous n’avez pas exécuté la commande watch pour suivre votre travail automatiquement, exécutez à nouveau hs watch <src> <dest>. Assurez-vous que cette commande continue d’être exécutée pendant que vous effectuez les étapes suivantes.
• Dans votre compte HubSpot, ouvrez le gestionnaire de conception (Marketing > Fichiers et modèles > Outils de conception).
• Dans la barre latérale gauche du gestionnaire de conception, sélectionnez le fichier home.html.
• En haut à droite, cliquez sur Aperçu, puis sélectionnez Aperçu en ligne avec options d’affichage pour ouvrir l’aperçu du modèle dans une nouvelle fenêtre.

• Dans le nouvel onglet, affichez l’aperçu du modèle, qui doit contenir votre module de témoignage nouvellement ajouté.

​

Personnaliser le module dans le modèle localement

• Retournez dans votre éditeur de code, puis ouvrez le fichier home.html.
• Ajoutez les paramètres suivants à la balise du module de témoignage :

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
 offset=0,
 width=4
%}
{% end_dnd_module %}

• customer_name : ce paramètre transmet le nom Mary au champ du nom du client, remplaçant la valeur initiale Sally.
• profile_pic : ce paramètre est un objet qui contient deux propriétés.
  • La propriété src utilise la fonction HubL get_asset_url pour récupérer l’URL de la photo de profil. Notez que le chemin du fichier de l’image est relatif à votre répertoire de travail. Vous devez d’abord ajouter cette image au dossier images dans vos fichiers de thème locaux. Vous pouvez trouver l’image dans le dossier images des fichiers de projet terminés.
  • La propriété alt permet d’attribuer le texte alternatif de l’image.
• testimonial : ce paramètre permet de transmettre un nouveau texte dans le champ de témoignage.

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 offset=0,
 width=4
%}
 {% module_attribute "testimonial" %}
   Wow, what a product! I can't wait to recommend this to all my family and friends!
 {% end_module_attribute %}
{% end_dnd_module %}

​

Ajouter deux autres modules de témoignage au modèle

• Accédez à votre éditeur de code, puis ouvrez le fichier home.html.
• Sous le module de témoignage que vous avez ajouté précédemment, ajoutez une autre instance du module en copiant et collant le code de ce module. Dans le nouveau module de témoignage, spécifiez les détails suivants en suivant les mêmes étapes que ci-dessus :
  • Le nom du client est Ollie.
  • Le témoignage d’Ollie est le suivant : I can't believe that I ever conducted business without the use of this product!
  • Pour la photo d’Ollie, ajoutez le chemin d’accès relatif du fichier dans le dossier images. Vous pouvez obtenir l’image elle-même à partir des fichiers de projet terminés. Puis, donnez à l’image d’Ollie l’attribut alt de Ollie Profile Picture.
  • Pour conserver l’espacement, définissez offset sur 4 et width sur 4.
• Sous le deuxième module de témoignage, ajoutez-en un troisième avec les détails suivants :
  • Le nom du client est Erin.
  • Le témoignage d’Erin est le suivant : My business has nearly tripled since I began to use this product! Don't wait, start now!
  • Pour la photo d’Erin, ajoutez le chemin d’accès relatif du fichier dans le dossier images. Puis, donnez à l’image d’Erin l’attribut alt de Erin Profile Picture.
  • Pour conserver l’espacement, définissez offset sur 8 et width sur 4.
• Enregistrez vos modifications.

​

Modifier le nom du thème

// example theme.json

{
  "name": "my_first_theme",
  "label": "My first theme"
}

​

Étapes suivantes

• Configurer un module
• Utilisation de modules dans les modèles
• Modules par défaut

​

Autres tutoriels

• Premiers pas avec les thèmes
• Démarrer avec les fonctions sans serveur
• Créer un workflow de développement efficace
• Premiers pas avec l’accessibilité
• Utiliser les infrastructures JavaScript sur CMS Hub
• Comment utiliser des composants web dans des modules personnalisés
• Comment construire un module basé sur un composant web de bloc de code