Pasta assets

Organização dos arquivos da 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 borda.

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

  • 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.
    • home_above.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 calculo 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.
    No caso de um código de cada página, utilizamos import assíncrono, como no exemplo a seguir.

const page = document.querySelector('body').getAttribute('data-page');

if (page == 'home') {
  import('./pages/home')
    .then(({ default: Home }) => { Home.init() })
    .catch(error => { console.error(error) })
}
  • 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.

Did this page help you?