Organização dos arquivos

Como os arquivos da pasta do projeto estão organizados.

O desenvolvedor de loja Vnda customiza uma loja utilizando o BasicTemplate. Os arquivos desse template base estão na pasta do projeto. Essa pasta contém os arquivos que compõem o template da loja, e é importante que o time de desenvolvimento saiba como os esses arquivos são estruturados e organizados. Esse tutorial explica organização dos arquivos da pasta do projeto.

De maneira geral os arquivos do projeto estão divididos de acordo com as linguagens e componentizações adotadas. Essa divisão facilita a implementação da loja: reutilizando de trechos de código, padronização e legibilidade do código.

Para conferir os arquivos abra a pasta do projeto no seu editor de código. Na tabela abaixo está descrito as principais pastas e a função de cada uma.

Arquivo/Subpasta

Conteúdo

Função na vitrine

assets

Pasta com os códigos em linguagem Sass (Syntactically Awesome Style Sheets), JavaScript e as imagens e fontes estáticas utilizadas no projeto.

Possui os recursos externos que os templates de página podem utilizam (como imagens, folhas de estilo e JavaScripts).

liquids

Pasta com os códigos em linguagem Liquid (linguagem criada pela Shopify e escrita em Ruby).

Contém os arquivos que estruturam o layout da vitrine de loja.

package.json

Arquivo JSON (JavaScript Object Notation)

É responsável por deixar disponíveis os comandos do ambiente de trabalho e gerenciar as dependências externas do projeto.

Há outras subpastas no arquivo do projeto, no entanto aqui será abordado os arquivos principais e o direcionamentos dos seus conteúdos para sua customização.

🚧

Atente-se para o termo "template"

  • Quando estamos citando o modelo padrão de template de Vnda utilizamos o termo BasicTemplate; e quando utilizamos os termos templates de página ou template de página, estamos referindo aos arquivos de template de cada página.
  • Os arquivos de template de cada página (templates de página) são os códigos que estruturam o layout de cada página da sua vitrine, e estão estão em basictemplate > liquids.

Did this page help you?