Pasta assets

A pasta assets possui os recursos externos que os templates podem precisar, como imagens, folhas de estilo e JavaScripts. A pasta está subdivida em três subpastas:

• images: pasta destinada aos arquivos de imagens utilizados no código.
• javascripts: arquivos com os códigos que executam ações na loja.
• sass: arquivos de estilizações baseadas no CSS.

Confira a seguir como utilizar os diretórios internos ao diretório assets.

assets > images

O subdiretório images é o local de armazenamento das imagens que são usadas em todo template. Para acessar as imagens do arquivo nos códigos utilize o filtro image_path, como no exemplo abaixo:

<img src="{{ 'logo.png' | image_path }}"/>

assets > sass

Quando os arquivos do diretório sass são modificados, um script automático compila esses arquivos em um CSS minificado e envia os arquivos para o diretório stylesheets.

Não altere diretamente os arquivos CSS, para isso, chame os arquivos CSS de um template com o filtro stylesheet_path. ​Veja a seguir a função das pastas existentes dentro de assets > sass.

• assets_above.scss: estilos de bibliotecas usadas acima da dobra. Esse arquivo contém os conteúdos que são visíveis na primeira vez que o usuário carrega a página, sem aplicação de scroll.
  Esse arquivo tem prioridade no carregamento da página para uma melhor performance do conteúdo primário da página.

• assets.scss: estilos de bibliotecas usadas abaixo da dobra.

• base:

  • _base.scss: estilos base usados em toda a loja.
  • _mixins.scss: funções do sass, usado principalmente para responsividade.
  • _normalize.scss: remove os estilos padrões dos navegadores.
  • _variables.scss: variáveis do sass, usado principalmente para cores e fontes.

• checkout.scss: arquivo para estilização do checkout.

• common:

  • cart_drawer.scss: estilo do componente de _popup de carrinho.
  • _footer.scss: estilo do rodapé da loja.
  • _header.scss: estilo do cabeçalho da loja.
  • popup_newsletter.scss: estilo do componente de _popup de newsletter.

• components:

  • footer:
    • banner.scss: estilo do _banner do rodapé.
    • _categories.scss: estilo dos menus do rodapé.
    • newsletter.scss: estilo da seção _newsletter do rodapé.
    • _paragraph.scss: estilo do paragrafo do rodapé.
    • _payment.scss: estilo da seção Meios de pagamento.
    • _signature.scss: estilo da assinatura de Vnda no rodapé.
    • _social.scss: estilo do menu de redes sociais do rodapé.
  • header:
    • _account.scss: estilo do ícone de minha conta.
    • _actions.scss: estilo da seção de ícones de ação do cabeçalho (Minha conta e Carrinho).
    • _cart.scss: estilo do ícone de carrinho.
    • _logo.scss: estilo do logo do cabeçalho.
    • _search.scss: estilo do formulário de busca.
    • _wrapper.scss: estilo geral do cabeçalho.
  • home:
    • categories:
    • _item.scss: estilo dos itens da seção de banners apoio.
    • _categories.scss: estilo da seção de banners apoio.
    • _category_banners.scss: estilo da seção de categorias da home.
    • full.scss: estilo da seção de _fullbanner/banner principal das páginas institucionais.
    • hightlights.scss: estilo da seção de destaques da página _default.
    • icons.scss: estilo da seção de ícones da _home.
    • instagram.scss: estilo da seção de Instagram da _home.
    • menu:
      • desktop.scss: estilo do _banner do menu de acesso viadesktop.
      • mobile.scss: estilo do _banner do menu de acesso via mobile.
    • rotative:
      • desktop.scss: estilo da seção de _fullbanner/banner principal da página home , para acesso via desktop.
      • mobile.scss: estilo da seção de _fullbanner/banner principal da página home para acesso via mobile.
    • rotative.scss: estilo da seção de _fullbanner/banner principal da página _home _geral.
    • _tabs_products.scss: estilo da seção de produtos com tabelas.
  • menu:
    • desktop.scss: estilo do menu do _header para visualização via desktop.
    • icon.scss: estilo de ícone de menu para visualização via _mobile.
    • mobile.scss: estilo do menu do _header mobile.
  • product:
    • _attributes.scss: estilo dos atributos do produto.
    • banner.scss: estilo do _banner do produto.
    • _buy_together.scss: estilo da seção de Compre junto.
    • _details.scss: estilo da seção de Tabela com informações do produto.
    • _form_notify.scss: estilo do formulário de Avise-me quando chegar.
    • _images.scss: estilo da galeria de imagens do produto.
    • _infos.scss: estilo das informações de compra do produto.
    • _price.scss: estilo do preço do produto.
    • _product_name_price.scss: do preço e nome do produto na página de produto.
    • _shipping.scss: estilo da seção de cálculo de envio do produto.
    • tag_flag.scss: estilo da _flag do bloco de produto nas listagens.
  • _product_block.scss: estilo do bloco de produto nas listagens e carrosséis.
  • products:
    • _carousel.scss: estilo dos carrosséis de produtos .
    • grid.scss: estilo dos _grids de produtos .
  • tag:
    • _breadcrumb.scss: estilo do caminho da página.
    • _empty.scss: estilo do texto de listagem sem produtos.
    • _filters.scss: estilo do componente de filtros de produtos.
    • _pagination.scss: estilo da paginação do produto.
  • top_bar.scss: estilo da barra do topo do _header.

• _fonts.scss: chamada das fontes utilizadas na loja.

• main.scss: estilos gerais da loja acima da borda.

• pages:

  • account.scss: estilos da página de minha conta.
  • homeabove.scss: estilos da _home acima da borda.
  • home.scss: estilos da home abaixo da borda.
  • institucional:
    • _about.scss: estilos da página de Sobre.
    • _contact.scss: estilos da página de atendimento/contato.
    • custom.scss: estilos da página _default.
    • _stores.scss: estilos da página de lojas.
  • institucional.scss: estilos das páginas institucionais.
  • login.scss: estilos da página de login.
  • product_above.scss: estilos da página de produto acima da borda.
  • product.scss: estilos da página de produto abaixo da borda.
  • tag_above.scss: estilos das listagens acima da borda.
  • tag.scss: estilos das listagens abaixo da borda.

• style.scss : estilos gerais da loja abaixo da borda.

• vendor:

  • zoom:
    • _zoom.scss: estilo da lib de zoom que usamos.

🚧

Atente-se que:

Os arquivos de estilos de páginas não iniciam com o caractere underscore (_).
Os arquivos de estilos de componentes iniciam com underscore(_) exceto no momento de importação de arquivos.

assets > javascrips

Arquivos Javascripts do BasicTemplate. Estão divididos em:

• common: pasta com os módulos comuns a páginas, ou componentes mais genéricos.

  • fixedHeader.js: arquivo js para deixar o header fixo no scroll.

• components: pasta de componentes específicos das páginas ou da loja.

  • footer.js: arquivo js específicos da seção footer do layout da loja.
  • header.js: arquivo js específicos da seção header do layout da loja.
  • product:
    • buyTogether.js: arquivo js para a seção Compre junto.
    • content:
      • info.js: responsável pelas funções para adição de produto ao carrinho.
      • notify.js: possui o envio do _webform _de Avise-me quando chegar, da página interna do produto.
      • shipping.js: responsável pelas funções para cálculo de frete na página de produto.
      • variants.js: executa as trocas de variante do produto, na página interna.
      • zoom.min.js: arquivo js do magic zoom, plugin de zoom.
  • product.js: códigos e importações específicos para a página interna de produto.
    • products
      • content
        • pagination.js: responsável pelas funções de scroll infinito.
  • vndaComponents.js: responsável pelos componentes em react.

• main.js: principal arquivo Javascript. Executa os módulos comuns a páginas e importa o código específico de cada página.

• pages: possui os códigos específicos para as páginas. A raiz desta pasta recebe arquivos SASS de cada página da loja.

  • home.js: códigos e importações específicos para a home.
  • institucional:
    • contact.js: códigos e importações específicos para a página de contato.
    • stores.js: códigos e importações específicos para a página de lojas.
  • login.js: códigos e importações específicos para a página de login.
  • main.js: chamada das funções usadas em todas as páginas.
  • product.js: chamada das funções para a página de produto.
  • search.js: códigos e importações específicos para a busca.
  • tag.js: códigos e importações específicos para a listagens.

• utils:

  • constants.js: arquivo de declaração de constantes.
  • formats.js: responsável por funções para formatar valores.
  • form.js: responsável por funções para formulários.
  • mobile.js: responsável por verificar se o acesso à vitrine é ou não via mobile.