Arquivos e subarquivos

Cada componente possui um ou mais arquivos autorais. Os tipos permitidos são Liquid, SCSS e JavaScript; consulte o guia do tipo escolhido para saber quais são obrigatórios.

Arquivo principal

Para cada tipo de arquivo usado, exista exatamente um arquivo principal:

• Liquid monta o markup.
• SCSS define os estilos.
• JavaScript adiciona comportamento.

logicalName é o identificador técnico de um arquivo dentro do componente. O principal usa o nome interno do componente como logicalName. Arquivos auxiliares usam outro nome em snake_case, sem espaços, hífens, maiúsculas ou extensão.

Alguns tipos usam nomes visíveis fixos, como header, footer, barra de informações e bloco de produto. O editor e a API identificam o principal pelo tipo e por isMain: true; siga sempre o guia específico.

Referenciar auxiliares

O principal pode chamar auxiliares do mesmo tipo:

{% partial 'item_banner', item: item, settings: settings %}

@import-partial 'tokens';

@import-partial 'events';

O partial Liquid pode receber os valores que o auxiliar precisa, como item e settings. @import-partial de SCSS e JavaScript não recebe parâmetros.

Auxiliares podem chamar outros auxiliares somente do mesmo componente e do mesmo tipo de arquivo. Eles não podem chamar o principal, importar um auxiliar de outro componente, referenciar arquivo inexistente ou formar ciclos.

JavaScript

Em todo tipo com JavaScript, exceto top_bar, o principal deve exportar um objeto com init():

const MeuComponente = {
  init() {},
};

export default MeuComponente;

Arquivos JavaScript auxiliares referenciados também devem exportar um objeto com init(). A única exceção é o arquivo principal de top_bar, que exporta uma função direta. Veja Barra de informações.

Checklist

• Cada arquivo ativo tem um único principal.
• Nenhum logicalName se repete dentro do mesmo tipo de arquivo.
• Todo partial ou @import-partial aponta para um auxiliar existente, do mesmo componente e do mesmo tipo de arquivo.
• Não há ciclos entre auxiliares.
• O JavaScript segue o contrato do tipo.

Consulte Troubleshooting para erros de arquivos e referências.