Usa l’Advanced editor
L’Advanced editor è il luogo in cui definisci l’aspetto dell’assistente e il suo comportamento, dal vivo e con un riscontro immediato. Divide lo schermo in tre aree: l’anteprima live dell’assistente a sinistra, l’editor di codice al centro e il browser dei file a destra.
I tre pannelli
| Pannello | Cosa fa |
|---|---|
| Anteprima live (a sinistra, ~35%) | Un’istanza reale del tuo assistente in esecuzione dentro l’editor. Ogni volta che salvi si riavvia automaticamente, così vedi subito le modifiche. |
| Editor di codice (al centro) | Un editor basato su Monaco con evidenziazione della sintassi per Liquid (template) e JavaScript (helper). Include il completamento automatico dei tag Liquid ({% if %}, {% for %}, {% include %}, ecc.) e la validazione in tempo reale dei delimitatori bilanciati e dell’annidamento dei blocchi. |
| Browser dei file (pannello a destra, attivabile) | Elenca in ordine alfabetico tutti i template e gli helper, raggruppati in Layout Templates e Template Helpers. Fai clic su uno per caricarlo nell’editor. |
La barra degli strumenti dell’editor
La barra degli strumenti in cima all’editor di codice ti dà accesso rapido a ogni azione:
| Azione | Cosa fa |
|---|---|
| Save | Salva le modifiche correnti nella configurazione dell’assistente e riavvia l’anteprima live. È attivo solo quando ci sono modifiche non salvate. |
| Add → Add Template | Crea un nuovo template Liquid con nome (ID alfanumerico). |
| Add → Add Template Helper | Crea una nuova funzione helper JavaScript. |
| Test code | (Solo helper) Apre un campo JSON in cui digiti i parametri, poi esegue l’helper e mostra il valore restituito nel pannello di debug. |
| Delete / Return to default | Rimuove la tua sostituzione per il template o l’helper selezionato, ripristinando quello predefinito. |
| Toggle assistant (icona dell’insetto) | Mostra o nasconde il pannello dell’anteprima live, utile per dare più spazio all’editor. |
| Toggle files (icona della cartella) | Mostra o nasconde il browser dei file. |
La barra degli strumenti dell’assistente
Sopra l’anteprima live, una seconda barra degli strumenti controlla l’istanza dell’assistente:
| Azione | Cosa fa |
|---|---|
| Show debug info | Passa il pannello dell’anteprima in modalità debug: un visualizzatore JSON che mostra gli errori di runtime, i valori restituiti dagli helper e lo stato del template. |
| Show assistant | Torna dal debug all’assistente live. |
| Restart assistant | Riavvia manualmente l’assistente integrato senza salvare. |
| Clear debug | Cancella l’output di debug. |
Il flusso di lavoro
- Apri la configurazione dell’assistente e vai alla scheda Advanced editor.
- Apri il browser dei file (icona della cartella) e scegli un template o un helper da modificare.
- Modifica il codice. L’editor valida il Liquid in tempo reale: vedrai indicatori rossi per blocchi non chiusi, delimitatori non bilanciati o tag non corrispondenti.
- Fai clic su Save: l’assistente si riavvia nel pannello dell’anteprima con le tue modifiche.
- Se qualcosa si rompe, passa alla modalità debug per vedere l’errore, correggi il codice e salva di nuovo.
- Per gli helper, usa Test code per eseguire la funzione con parametri di esempio e controllare il valore restituito nel pannello di debug.
Consigli
- Parti dal template predefinito: aprilo nel browser dei file, copia il Liquid in una nuova sostituzione e cambia solo ciò che ti serve. Così mantieni tutti i collegamenti (helper, classi, attributi data) da cui dipende l’assistente.
- Attiva
isDebug: truequando integri l’assistente in fase di sviluppo: registra nella console lo stato completo del template. - L’editor funziona solo su schermi desktop. Su dispositivi mobili o finestre strette mostra invece un avviso.