Saltar al contenido principal
El editor de código te da control total sobre una plantilla. Las plantillas son HTML y CSS con Liquid, el mismo lenguaje de plantillas que usa Shopify: {{ order_name }} imprime el nombre del pedido y {% for line_item in line_items %} se repite para cada artículo. Las variables de pedido de Foliant siguen las de Shopify Order Printer, así que las plantillas escritas para esa app suelen funcionar tal cual. El editor de código está disponible en todos los planes.

Abrir el editor de código

Abre la plantilla en el editor y haz clic en la pestaña Código. Las plantillas de código se abren ahí directamente. En una plantilla visual, primero ves el código compilado; haz clic en Editar código para cambiarlo. Consulta Cambiar entre Visual y Código. El panel izquierdo tiene tres pestañas: El panel derecho es la vista previa en directo. Se actualiza poco después de que dejas de escribir.

Insertar un campo

  1. Coloca el cursor donde debe ir el campo.
  2. Haz clic en Insertar campo.
  3. Busca el campo (por ejemplo, “tracking” o “SKU”) en Buscar campos y haz clic en él.
Foliant inserta su Liquid en la posición del cursor, por ejemplo {{ shipping_address.city }}. Los campos de artículos, como {{ line_item.sku }}, solo funcionan dentro del bucle de artículos: inserta Artículos de línea para añadir el propio bucle.

Buscar en el código

Haz clic en el botón de búsqueda junto a Insertar campo (o pulsa ⌘F / Ctrl+F en el código) para encontrar texto en la plantilla.

Errores de código

El editor revisa tu código mientras escribes y marca los problemas en el margen:
  • Los errores impiden guardar y pausan la vista previa. Un {{ o {% sin cerrar es un error. Aparecen en un aviso Errores de Código encima del editor, cada uno con Ir a la línea.
  • Las advertencias señalan cosas que pueden estar mal, pero no impiden guardar; por ejemplo, un filtro, etiqueta u objeto de Liquid desconocido, una etiqueta HTML o propiedad CSS desconocida, o una etiqueta HTML sin cerrar.
Al guardar, Foliant también revisa la plantilla: el Liquid debe poder leerse, las etiquetas HTML deben estar equilibradas y el SVG insertado solo puede contener elementos de dibujo. Si algo falla, no se guarda y un aviso Error al actualizar muestra hasta cinco problemas, con su número de línea cuando se conoce. Si la plantilla se guarda pero la vista previa no se puede generar, un aviso muestra el mensaje de Liquid y la línea, cuando se conoce.

Escribir buenas plantillas

  • Los importes están en céntimos: imprímelos siempre con un filtro de dinero, como {{ total_price | money }}. Consulta Dinero y moneda en las plantillas.
  • Usa | escape en el texto que escriben los clientes, como notas y direcciones: {{ note | escape }}.
  • Usa {{ 'subtotal' | t }} para textos que siguen el idioma del documento. Consulta Fechas, idiomas y traducciones.
  • Usa los fragmentos integrados de Foliant para el IVA: {% include 'vat_breakdown' %} imprime la tabla de desglose del IVA y {% include 'legal_notes' %} las notas legales (inversión del sujeto pasivo, exportación, IOSS…).

Conviene saber

  • Si una plantilla numerada (factura, nota de crédito o presupuesto) no imprime document_number en ningún sitio, Foliant añade una pequeña línea con el número al final del documento. Consulta Números de documento en las plantillas.
  • Los números de página y los encabezados de tabla repetidos de las plantillas de código están en la página de ajustes de la plantilla, en Diseño de página.
  • Para traer una plantilla de Shopify Order Printer u Order Printer Pro, usa Importar una plantilla en la página Plantillas. Consulta Importar una plantilla de Order Printer.

Artículos relacionados