Skip to main content

CHAPITRE 18 — Annoter un template avec des slots

🏷️ Chapitre 18 — Annoter un template avec des slots

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

🎯

Le principe en 2deux lignes

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

C'est tout. Le module faitse lecharge du reste (scanner,: détection automatique, persistance, rendu, édition).interface d'édition.

📝

Premier exemple complet

Avant — page hardcodée
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 Résultat— — Le client voit dans le Studio un panneau « Hero » aveccomportant 4quatre champs (titre, accroche, URL du bouton, libellé du bouton). Aucun HTML à éditermodifier pourde lui.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, underscore.tiret Maxbas. 64.64 caractères maximum.

type=

✅Oui

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

default=

Recommandé

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

label=

Recommandé

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

group=

OptionnelFacultatif

GroupeRegroupe les slots dans une section UI.de l'interface.

help=

OptionnelFacultatif

Aide affichée sous le champ.

maxlength=

OptionnelFacultatif

Limite de caractères pour text/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é presqueà n'importede où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 PASpas faire — — Ne placez pas un slot dans un commentaire HTML, dans un bloc <script>, ou dans du JSON inline.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.

Pattern

Schéma recommandé

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

Bon

MauvaisÀ éviter

hero_title

title

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

features_grid_card_3_label

truc3

(incompréhensible)

footer_copyright

FooterCopyright

(les majuscules sont rejetées par le scanner)

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

📂

Utiliser le groupe pour structurer l'UI

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

🔄

Le rescan après ajout

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

Méthode A — Via l'UIinterface 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 — ViaEn CLI
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 lintde validation — —Ajoutez Ajoutezl'option --lint pour détecter les erreurs de syntaxe slot avant de les commettrevalider :
php rescan_slots.php <ref> --lint
ExitLe code :de sortie est 0 =en clean,l'absence d'erreur, 1 =en warnings,présence d'avertissements, 2 = errors. Utilisable en pre-commitcas hook.d'erreurs. Cette commande peut être intégrée dans un crochet de pré-commit.

🪦

Slots orphelins

QuandLorsque vous supprimez un slot d'un fichier tpl.php, son entréeenregistrement en base passe enau statut orphan« orphelin ». Le module lale conserve pendant 30 jours avant de lale purgersupprimer automatiquement (via cron)une tâche planifiée).

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

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

Liste

📋de Checklistcontrôle d'annotation

✅ Avant de livrer une page annotée :

  • Chaque slot apossède un type explicite.
  • Chaque slot apossède une valeur default, (pourgarantissant quela lisibilité de la page reste lisible si la base venait à se vide).vider.
  • Chaque slot apossède un label en français clairclair, (vudestiné parà l'éditeur).éditeur.
  • Les slots sont groupésregroupés par section avec group.
  • Les identifiants suivent la convention <section>_<champ>.
  • Le rescan a été lancé sans warningavertissement ni erreur.
  • Vous avez ouvert la page dans le Studio et constatévérifié quela présence de tous les slots sont là.slots.

AuLe prochainchapitre chapitre,suivant on plonge dansdétaille la grammaire complète des slotsslots, avec tous les types et leurs comportements.

Back to top