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.