Utiliser l’éditeur avancé
L’éditeur avancé est l’endroit où vous façonnez l’apparence et le comportement de l’assistant, en direct et avec un retour immédiat. Il divise l’écran en trois zones : l’aperçu en direct de l’assistant à gauche, l’éditeur de code au centre et le navigateur de fichiers à droite.
Les trois panneaux
| Panneau | Rôle |
|---|---|
| Aperçu en direct (à gauche, ~35 %) | Une véritable instance de votre assistant qui s’exécute dans l’éditeur. À chaque enregistrement, elle redémarre automatiquement pour que vous voyiez les modifications immédiatement. |
| Éditeur de code (au centre) | Un éditeur basé sur Monaco avec coloration syntaxique pour Liquid (templates) et JavaScript (helpers). Il inclut l’autocomplétion des balises Liquid ({% if %}, {% for %}, {% include %}, etc.) et la validation en temps réel de l’équilibre des délimiteurs et de l’imbrication des blocs. |
| Navigateur de fichiers (panneau de droite, affichable) | Liste tous les templates et helpers par ordre alphabétique, regroupés en Layout Templates et Template Helpers. Cliquez sur l’un d’eux pour le charger dans l’éditeur. |
La barre d’outils de l’éditeur
La barre d’outils en haut de l’éditeur de code vous donne un accès rapide à toutes les actions :
| Action | Rôle |
|---|---|
| Save | Enregistre les modifications en cours dans la configuration de l’assistant et redémarre l’aperçu en direct. Activé uniquement en présence de modifications non enregistrées. |
| Add → Add Template | Crée un nouveau template Liquid nommé (ID alphanumérique). |
| Add → Add Template Helper | Crée une nouvelle fonction helper JavaScript. |
| Test code | (Helpers uniquement) Ouvre une saisie JSON où vous tapez des paramètres, puis exécute le helper et affiche la valeur renvoyée dans le panneau de débogage. |
| Delete / Return to default | Supprime votre surcharge du template ou du helper sélectionné et rétablit la version intégrée par défaut. |
| Toggle assistant (icône d’insecte) | Affiche ou masque le panneau d’aperçu en direct, pratique pour donner plus de place à l’éditeur. |
| Toggle files (icône de dossier) | Affiche ou masque le navigateur de fichiers. |
La barre d’outils de l’assistant
Au-dessus de l’aperçu en direct, une seconde barre d’outils pilote l’instance de l’assistant :
| Action | Rôle |
|---|---|
| Show debug info | Bascule le panneau d’aperçu en mode débogage : un visualiseur JSON qui affiche les erreurs d’exécution, les valeurs renvoyées par les helpers et l’état des templates. |
| Show assistant | Revient du mode débogage à l’assistant en direct. |
| Restart assistant | Redémarre manuellement l’assistant intégré sans enregistrer. |
| Clear debug | Efface la sortie de débogage. |
La méthode de travail
- Ouvrez la configuration de l’assistant et allez dans l’onglet Advanced editor.
- Ouvrez le navigateur de fichiers (icône de dossier) et choisissez un template ou un helper à modifier.
- Modifiez le code. L’éditeur valide le Liquid en temps réel : des marqueurs rouges signalent les blocs non fermés, les délimiteurs déséquilibrés ou les balises mal appariées.
- Cliquez sur Save : l’assistant redémarre dans le panneau d’aperçu avec vos modifications.
- En cas de problème, passez en mode débogage pour voir l’erreur, corrigez le code et enregistrez de nouveau.
- Pour les helpers, utilisez Test code pour exécuter la fonction avec des paramètres d’exemple et inspecter la valeur renvoyée dans le panneau de débogage.
Conseils
- Partez du template par défaut : ouvrez-le dans le navigateur de fichiers, copiez le Liquid dans une nouvelle surcharge et ne modifiez que ce dont vous avez besoin. Vous conservez tout le câblage (helpers, classes, attributs data) dont dépend l’assistant.
- Activez
isDebug: truelors de l’intégration en phase de développement : l’état complet des templates est alors journalisé dans la console. - L’éditeur ne fonctionne que sur les écrans d’ordinateur. Sur mobile ou sur des fenêtres étroites, il affiche un avertissement à la place.