Skip to main content

Annoter un template avec des slots

🏷️ Chapitre 18 — Annoter un template avec des slots

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

🎯 Le principe en 2 lignes

  1. Vous écrivez votre HTML normalement, comme vous le feriez sans le module.
  2. Là où vous voulez rendre du contenu éditable, vous remplacez le contenu en dur par un token {{slot:...}}.

C'est tout. Le module fait le reste (scanner, persistance, rendu, édition).

📝 Premier exemple complet

Avant — page hardcodée

<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 » avec 4 champs (titre, accroche, URL bouton, libellé bouton). Aucun HTML à éditer pour lui.

📐 Anatomie d'un token slot

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

Élément

Obligatoire

Description

{{slot:

✅

Préfixe fixe qui déclare un slot.

Identifiant

✅

Unique par page. Caractères : minuscules, chiffres, underscore. Max 64.

type=

✅

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

default=

Recommandé

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

label=

Recommandé

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

group=

Optionnel

Groupe les slots dans une section UI.

help=

Optionnel

Aide affichée sous le champ.

maxlength=

Optionnel

Limite pour text/textarea.

options=

Si type=select

Liste CSV des valeurs possibles.

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

📍 Où placer un slot ?

Un slot peut être placé presque n'importe où 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 inline. 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.

Pattern recommandé

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

Bon

Mauvais

hero_title

title

(trop générique, collision sur d'autres sections)

features_grid_card_3_label

truc3

(incompréhensible)

footer_copyright

FooterCopyright

(les majuscules sont rejetées par le scanner)

✅ Bonne pratique — Si votre site a 5 sections (hero, features, stats, testimonials, footer), préfixez tous vos slots par leur section. Le client retrouve plus vite ce qu'il cherche dans le Studio.

📂 Utiliser le groupe pour structurer l'UI

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 groupés visuellement sous trois sections : Hero, Features, Footer.

🔄 Le rescan après ajout

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

Méthode A — Via l'UI Studio

  1. Outils → InfraSStudio → Contenu des pages.
  2. Sélectionnez votre site.
  3. Cliquez sur « Rescanner » en haut.
  4. Le module parcourt tous les tpl.php et synchronise les slots.

Méthode B — Via CLI

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 lint — Ajoutez --lint pour détecter les erreurs de syntaxe slot avant de les commettre :
php rescan_slots.php <ref> --lint
Exit code : 0 = clean, 1 = warnings, 2 = errors. Utilisable en pre-commit hook.

🪦 Slots orphelins

Quand vous supprimez un slot d'un tpl.php, son entrée en base passe en statut orphan. Le module la conserve 30 jours avant de la purger automatiquement (via cron).

Avantage : si vous restaurez le slot dans le HTML, sa valeur précédente est récupérée.

ℹ️ Forcer la purge immédiate — php rescan_slots.php <ref> --purge-orphans

📋 Checklist d'annotation

✅ Avant de livrer une page annotée :

  • Chaque slot a un type explicite.
  • Chaque slot a une valeur default (pour que la page reste lisible si la base se vide).
  • Chaque slot a un label en français clair (vu par l'éditeur).
  • Les slots sont groupés par section avec group.
  • Les identifiants suivent la convention <section>_<champ>.
  • Le rescan a été lancé sans warning ni erreur.
  • Vous avez ouvert la page dans le Studio et constaté que tous les slots sont là.

Au prochain chapitre, on plonge dans la grammaire complète des slots avec tous les types et leurs comportements.

Back to top