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.
- footer:
-
_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.
- zoom:
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.
- fixedHeader.js: arquivo
-
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çãoCompre 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.
- buyTogether.js: arquivo
- 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.
- content
- products
- vndaComponents.js: responsável pelos componentes em react.
- footer.js: arquivo
-
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.
Updated about 2 months ago