Pular para o conteúdo principal
O editor de código dá a você controle total sobre um modelo. Os modelos são HTML e CSS com Liquid, a mesma linguagem de modelos que o Shopify usa: {{ order_name }} imprime o nome do pedido, {% for line_item in line_items %} se repete para cada item. As variáveis de pedido do Foliant seguem as do Order Printer do Shopify, então os modelos escritos para ele funcionam, na maioria dos casos, sem alterações. O editor de código está disponível em todos os planos.

Abrir o editor de código

Abra o modelo no editor e clique na aba Código. Os modelos de código abrem diretamente nela. Em um modelo visual, você vê primeiro o código compilado; clique em Editar código para alterá-lo. Consulte Alternar entre Visual e Código. O painel esquerdo tem três abas: O painel direito é a pré-visualização ao vivo. Ela é atualizada logo depois que você para de digitar.

Inserir um campo

  1. Coloque o cursor onde o campo deve ficar.
  2. Clique em Inserir campo.
  3. Procure o campo (por exemplo, “tracking” ou “SKU”) em Pesquisar campos e clique nele.
O Foliant insere o Liquid correspondente no cursor, por exemplo {{ shipping_address.city }}. Os campos de item de linha, como {{ line_item.sku }}, só funcionam dentro do loop de itens de linha: insira Itens de linha para adicionar o próprio loop.

Pesquisar no código

Clique no botão de pesquisa ao lado de Inserir campo (ou pressione ⌘F / Ctrl+F no código) para encontrar um texto no modelo.

Erros de código

O editor verifica o seu código enquanto você digita e marca os problemas na margem:
  • Erros impedem que você salve e pausam a pré-visualização. Um {{ ou {% não fechado é um erro. Eles aparecem em um banner Erros de Código acima do editor, cada um com Ir para a linha.
  • Avisos indicam coisas que podem estar erradas, mas não impedem que você salve, por exemplo um filtro, tag ou objeto Liquid desconhecido, uma tag HTML ou propriedade CSS desconhecida, ou uma tag HTML não fechada.
Quando você salva, o Foliant também verifica o modelo: o Liquid precisa ser legível, as tags HTML precisam estar balanceadas, e o SVG inline só pode conter elementos de desenho. Se algo estiver errado, o salvamento falha e um banner Falha ao atualizar lista até cinco problemas, com os números das linhas quando conhecidos. Se o modelo for salvo, mas a pré-visualização não puder ser gerada, um banner mostra a mensagem do Liquid e a linha, quando ela é conhecida.

Escrever bons modelos

  • Os valores monetários estão em centavos: sempre imprima-os com um filtro de dinheiro, como {{ total_price | money }}. Consulte Dinheiro e moeda nos modelos.
  • Use | escape em textos digitados pelos clientes, como observações e endereços: {{ note | escape }}.
  • Use {{ 'subtotal' | t }} para textos que acompanham o idioma do documento. Consulte Datas, idiomas e traduções.
  • Use os snippets integrados do Foliant para o IVA: {% include 'vat_breakdown' %} imprime a tabela de detalhamento do IVA, e {% include 'legal_notes' %} as notas legais (autoliquidação, exportação, IOSS…).

Bom saber

  • Se um modelo numerado (fatura, nota de crédito ou orçamento) não imprimir document_number em nenhum lugar, o Foliant adiciona uma pequena linha com o número no final do documento. Consulte Números de documento nos modelos.
  • Os números de página e os cabeçalhos de tabela repetidos dos modelos de código ficam na página de configurações do modelo, em Layout da página.
  • Para trazer um modelo do Order Printer ou do Order Printer Pro do Shopify, use Importar um modelo na página Modelos. Consulte Importar um modelo do Order Printer.

Artigos relacionados