Atelier Lumière veut mettre en avant trois engagements sur sa page d'accueil : « Fabriqué à la main », « Cire végétale », « Sans emballage superflu ». Plutôt qu'une section figée à trois éléments, vous allez construire une section « Nos engagements » avec des blocks : le marchand pourra en ajouter, en retirer, ou en réordonner librement, sans jamais toucher au code.

Créer la section

Créez un fichier sections/nos-engagements.liquid. Cette fois, le balisage doit parcourir une liste de blocks plutôt que d'afficher un seul réglage fixe :

Le tag {% for block in section.blocks %}, vu au guide 12, parcourt ici tous les blocks ajoutés par le marchand, un par un. {{ block.shopify_attributes }} est une expression spéciale, propre aux blocks, qui ajoute automatiquement les attributs nécessaires pour que l'éditeur de thème puisse identifier et sélectionner ce block précis : ne l'oubliez jamais sur l'élément conteneur d'un block, sous peine de rendre son édition visuelle moins fiable.

Déclarer le type de block dans le schema

Ajoutez le bloc {% schema %}, cette fois avec une entrée "blocks" en plus de "settings" :

Chaque entrée de "blocks" définit un type de block possible, avec ses propres réglages. Ici, un seul type existe, engagement, avec un titre et une description. "max_blocks": 6 limite le nombre de blocks que le marchand peut ajouter à cette section, une limite raisonnable pour ce type de contenu.

Ajouter les trois engagements d'Atelier Lumière

Depuis l'éditeur de thème, ajoutez la section « Nos engagements » à la page d'accueil, puis ajoutez-y trois blocks « Engagement », en remplissant à chaque fois un titre et une description : « Fabriqué à la main », « Cire végétale », « Sans emballage superflu », avec une phrase courte pour chacun. Réordonnez-les par glisser-déposer directement dans l'éditeur, pour vérifier que cette manipulation fonctionne sans aucune intervention sur le code.

Ce que vous devriez voir

Dans l'aperçu local, les trois engagements doivent s'afficher dans l'ordre choisi dans l'éditeur. Ajoutez un quatrième block : il doit apparaître automatiquement dans la liste, sans aucune modification du fichier Liquid. C'est exactement l'intérêt des blocks par rapport à des réglages fixes : le nombre d'éléments devient une décision du marchand, pas une contrainte du code.

Vérifiez que vous avez compris

Le marchand d'Atelier Lumière ajoute un septième block « Engagement » à cette section. Que va-t-il se passer, sachant que "max_blocks" est fixé à 6 ?

L'éditeur de thème empêchera l'ajout d'un septième block, en indiquant que la limite maximale de blocks pour cette section est atteinte. Cette limite, définie dans le schema, protège la section contre un nombre d'éléments qui dépasserait ce que sa mise en page a été pensée pour accueillir proprement.

Chapitre terminé