Usa el Advanced editor
El Advanced editor es donde defines cómo se ve el asistente y cómo se comporta, en directo y con respuesta inmediata. Divide la pantalla en tres zonas: la vista previa en directo del asistente a la izquierda, el editor de código en el centro y el explorador de ficheros a la derecha.
Los tres paneles
| Panel | Qué hace |
|---|---|
| Live preview (izquierda, ~35%) | Una instancia real de tu asistente ejecutándose dentro del editor. Cada vez que guardas, se reinicia automáticamente para que veas los cambios al momento. |
| Code editor (centro) | Un editor basado en Monaco con resaltado de sintaxis para Liquid (plantillas) y JavaScript (helpers). Incluye autocompletado de etiquetas Liquid ({% if %}, {% for %}, {% include %}, etc.) y validación en tiempo real de delimitadores equilibrados y anidamiento de bloques. |
| File browser (panel derecho, desplegable) | Lista todas las plantillas y helpers por orden alfabético, agrupados en Layout Templates y Template Helpers. Haz clic en uno para cargarlo en el editor. |
La barra de herramientas del editor
La barra de herramientas de la parte superior del editor de código te da acceso rápido a todas las acciones:
| Acción | Qué hace |
|---|---|
| Save | Guarda los cambios actuales en la configuración del asistente y reinicia la vista previa en directo. Solo está activo cuando hay cambios sin guardar. |
| Add → Add Template | Crea una nueva plantilla Liquid con nombre (ID alfanumérico). |
| Add → Add Template Helper | Crea una nueva función helper de JavaScript. |
| Test code | (Solo helpers) Abre una entrada JSON donde escribes los parámetros; luego ejecuta el helper y muestra el valor devuelto en el panel de depuración. |
| Delete / Return to default | Elimina tu sobrescritura de la plantilla o el helper seleccionado y vuelve a la versión integrada por defecto. |
| Toggle assistant (icono de bicho) | Muestra u oculta el panel de vista previa en directo; útil para dar más espacio al editor. |
| Toggle files (icono de carpeta) | Muestra u oculta el explorador de ficheros. |
La barra de herramientas del asistente
Encima de la vista previa en directo, una segunda barra de herramientas controla la instancia del asistente:
| Acción | Qué hace |
|---|---|
| Show debug info | Cambia el panel de vista previa al modo de depuración: un visor JSON que muestra los errores en tiempo de ejecución, los valores devueltos por los helpers y el estado de las plantillas. |
| Show assistant | Vuelve del modo de depuración al asistente en directo. |
| Restart assistant | Reinicia manualmente el asistente integrado sin guardar. |
| Clear debug | Borra la salida de depuración. |
El flujo de trabajo
- Abre la configuración del asistente y ve a la pestaña Advanced editor.
- Abre el explorador de ficheros (icono de carpeta) y elige una plantilla o un helper para editar.
- Edita el código. El editor valida el Liquid en tiempo real: verás marcas rojas en los bloques sin cerrar, los delimitadores desequilibrados o las etiquetas que no coinciden.
- Haz clic en Save: el asistente se reinicia en el panel de vista previa con tus cambios.
- Si algo se rompe, cambia al modo de depuración para ver el error, corrige el código y vuelve a guardar.
- Para los helpers, usa Test code para ejecutar la función con parámetros de ejemplo e inspeccionar el valor devuelto en el panel de depuración.
Consejos
- Parte de la plantilla por defecto: ábrela en el explorador de ficheros, copia el Liquid en una nueva sobrescritura y cambia solo lo que necesites. Así conservas todo el cableado (helpers, clases, atributos de datos) del que depende el asistente.
- Activa
isDebug: trueal integrarlo durante el desarrollo: registra en la consola el estado completo de la plantilla. - El editor solo funciona en pantallas de escritorio. En móviles o ventanas estrechas muestra un aviso en su lugar.