Skip to main content

CHAPITRE 18 — Annoter un template avec des slots

Le slot est l'unité de base du module. Ce chapitre vous montre comment transformer un HTML statique en HTML annoté, prêt à être édité par le client. Il s'agit de l'opération la plus fréquente dans votre travail d'intégrateur.

Le principe en deux phrases

  1. Vous écrivez votre HTML normalement, comme vous le feriez sans le module.
  2. Aux endroits que vous voulez rendre éditables, vous remplacez le contenu en dur par un token {{slot:...}}.

C'est tout. Le module se charge du reste : détection automatique, persistance, rendu, interface d'édition.

Premier exemple complet

Avant — page non éditable
<section class="hero">
    <h1>Bienvenue chez Keatic</h1>
    <p>Votre partenaire numérique de confiance depuis 2010.</p>
    <a href="/contact" class="btn">Nous contacter</a>
</section>
Après — page éditable via le Studio
<section class="hero">
    <h1>{{slot:hero_title|type=text|default=Bienvenue chez Keatic|label=Titre du hero|group=hero}}</h1>
    <p>{{slot:hero_lead|type=textarea|default=Votre partenaire numérique de confiance depuis 2010.|label=Accroche|group=hero}}</p>
    <a href="{{slot:hero_cta_url|type=url|default=/contact|label=URL du bouton|group=hero}}" class="btn">
        {{slot:hero_cta_label|type=text|default=Nous contacter|label=Libellé du bouton|group=hero}}
    </a>
</section>

Résultat — Le client voit dans le Studio un panneau « Hero » comportant quatre champs (titre, accroche, URL du bouton, libellé du bouton). Aucun HTML à modifier de son côté.

Anatomie d'un token de slot

{{slot:<identifiant>|type=<type>|attribut1=valeur1|attribut2=valeur2}}

Élément

Obligatoire

Description

{{slot:

Oui

Préfixe fixe qui déclare un slot.

Identifiant

Oui

Unique par page. Caractères acceptés : minuscules, chiffres, tiret bas. 64 caractères maximum.

type=

Oui

text, textarea, richtext, image, url, number, select, bool, icon, color.

default=

Recommandé

Valeur de repli si le slot n'est pas encore édité.

label=

Recommandé

Libellé affiché à l'éditeur dans le Studio.

group=

Facultatif

Regroupe les slots dans une section de l'interface.

help=

Facultatif

Aide affichée sous le champ.

maxlength=

Facultatif

Limite de caractères pour text et textarea.

options=

Si type=select

Liste CSV des valeurs possibles.

Conseil — La grammaire complète est détaillée au Chapitre 19.

Où placer un slot

Un slot peut être placé à de nombreux endroits dans votre HTML.

Dans le contenu d'une balise (cas le plus fréquent)
<h1>{{slot:title|type=text|default=Bienvenue}}</h1>
Dans un attribut HTML
<img src="{{slot:hero_image|type=image|default=/medias/hero.jpg}}" alt="...">
<a href="{{slot:cta_url|type=url|default=/contact}}">...</a>
<section style="background-color:{{slot:bg_color|type=color|default=#19052d}}">
Dans une chaîne de classes CSS
<i class="fa-solid {{slot:hero_icon|type=text|default=fa-rocket}}"></i>

À ne pas faire — Ne placez pas un slot dans un commentaire HTML, dans un bloc <script>, ou dans du JSON intégré. Le scanner détecte tous les tokens et peut générer des slots fantômes.

Convention de nommage des identifiants

L'identifiant est libre, mais une convention claire facilite la maintenance.

Schéma recommandé

<section>_<champ> ou <page>_<section>_<champ>

Bon

À éviter

hero_title

title

(trop générique, risque de collision)

features_grid_card_3_label

truc3

(incompréhensible)

footer_copyright

FooterCopyright

(les majuscules sont rejetées par le scanner)

Recommandé — Si votre site comporte cinq sections (hero, features, stats, testimonials, footer), préfixez tous vos slots par leur section. Le client retrouvera ainsi plus rapidement ce qu'il cherche dans le Studio.

Utiliser le groupe pour structurer l'interface

L'attribut group détermine sous quelle section le slot apparaît dans le panneau « Contenu de la page » du Studio.

{{slot:hero_title|type=text|group=hero|...}}
{{slot:hero_lead|type=textarea|group=hero|...}}
{{slot:hero_image|type=image|group=hero|...}}

{{slot:features_card_1_title|type=text|group=features|...}}
{{slot:features_card_2_title|type=text|group=features|...}}
{{slot:features_card_3_title|type=text|group=features|...}}

{{slot:footer_copyright|type=text|group=footer|...}}

Dans le Studio, ces slots seront regroupés visuellement sous trois sections : Hero, Features et Footer.

Le rescan après ajout

Ajouter un slot dans un fichier tpl.php ne suffit pas : le module doit le détecter et l'enregistrer en base. Pour cela, lancez un rescan.

Méthode A — Via l'interface Studio
  1. Outils → InfraSStudio → Contenu des pages.
  2. Sélectionnez votre site.
  3. Cliquez sur Rescanner en haut.
  4. Le module parcourt tous les fichiers tpl.php et synchronise les slots.
Méthode B — En ligne de commande
php htdocs/custom/infrasstudio/scripts/rescan_slots.php <ref-du-site> --entity=<N>

Sortie typique :

Rescanning website #1 — monsite (entity 2)
Pages scanned   : 22
Slots added     : 3
Slots updated   : 40
Slots orphaned  : 0

Mode de validation — Ajoutez l'option --lint pour détecter les erreurs de syntaxe avant de les valider :
php rescan_slots.php <ref> --lint
Le code de sortie est 0 en l'absence d'erreur, 1 en présence d'avertissements, 2 en cas d'erreurs. Cette commande peut être intégrée dans un crochet de pré-commit.

Slots orphelins

Lorsque vous supprimez un slot d'un fichier tpl.php, son enregistrement en base passe au statut « orphelin ». Le module le conserve pendant 30 jours avant de le supprimer automatiquement (via une tâche planifiée).

Cette politique présente un avantage : si vous restaurez le slot dans le HTML pendant cette période, sa valeur précédente est récupérée.

Note — Pour forcer la purge immédiate des slots orphelins :
php rescan_slots.php <ref> --purge-orphans

Liste de contrôle d'annotation

Avant de livrer une page annotée :

  • Chaque slot possède un type explicite.
  • Chaque slot possède une valeur default, garantissant la lisibilité de la page si la base venait à se vider.
  • Chaque slot possède un label en français clair, destiné à l'éditeur.
  • Les slots sont regroupés par section avec group.
  • Les identifiants suivent la convention <section>_<champ>.
  • Le rescan a été lancé sans avertissement ni erreur.
  • Vous avez ouvert la page dans le Studio et vérifié la présence de tous les slots.

Le chapitre suivant détaille la grammaire complète des slots, avec tous les types et leurs comportements.

Back to top