Os layouts da Nuvemshop possuem seletores HTML projetados para que aplicativos ou agentes externos possam ser ancorados ao design de cada loja sem ter que adaptar seu código com base em cada layout.
Esses componentes são representados pelo atributo "data-store", cujo valor dependerá do elemento que representa. Por exemplo, se for o carrossel principal da loja, o atributo é data-store="slider-main".
No caso de ter um seletor que não seja único, por exemplo, um item na lista de produtos, o seletor é data-store=”product-item-”
Pontos importantes ao trabalhar com esses seletores:
Componentes opcionais. A presença de alguns seletores pode ser condicionada por componentes opcionais para a loja. Por exemplo, uma loja pode não usar o carrossel principal. No entanto, alguns sempre estão presentes. Por exemplo, a navegação, o rodapé, o item da lista de produtos (especialmente dentro de uma categoria), o formulário do produto ou o carrinho.
Os seletores são encontrados em todos os layouts atuais da Nuvemshop, mas não há garantia de que sejam encontrados em lojas que fizeram alterações personalizadas em seus FTPs
Não use outros tipos de atributos ou seletores para ancorar em uma loja. Por exemplo, um atributo de ID ou uma classe (mesmo aqueles que começam com o prefixo "js-"). Este tipo de seletor é utilizado apenas pelo código de cada template, caso necessite de um novo seletor, pode entrar em contato conosco pelo e-mail storefronts@tiendanube.com, onde analisaremos cada pedido.
Navegação e título da página
| Elemento | Selector | Descrição |
|---|---|---|
| Cabeçalho da loja | data-store=”head” | n/a |
| Cabeçalho desktop | data-store=”head-desktop” | Dependendo da configuração do layout Simple (codename: newlinked_man), assim como Trend (codename: style) e Silent (codename: zen) ao invés de ter um único seletor, existe um para mobile e outro para desktop. |
| Cabeçalho mobile | data-store=”head-mobile” | Aplica ao mesmos casos que o atributo data-store=”head-desktop” |
| Navegação | data-store="navigation" | Aplica-se ao componente que tem os links de navegação |
| Links para contas | data-store="account-links" | É o componente que contém os links em relação ao gerenciamento de contas: Criar conta, Minha conta, etc. |
| Título da página | data-store=”page-title” | Aponta para o componente que abrange o título e não para o texto do título em si. |
| Rodapé | data-store=”footer” | n/a |
| Formulário do Newsletter | data-store=”newsletter-form” | Aponta para os form para inscrição ao newsletter. Pode aparecer no rodapé como em um modal. |
Página de início
Todos os componentes da página inicial são opcionais, embora provavelmente sejam, o vendedor pode optar por não exibi-los, incluindo produtos em destaque (isso é muito raro).
Por outro lado, considere que no layout Lite (usado pelo plano básico da Nuvemshop) apenas os produtos apresentados são mostrados e o resto dos componentes não se aplicam por se tratar de um layout sem customização.
| Elemento | Selector | Descrição |
|---|---|---|
| Carrossel de fotos principal | data-store=”slider-main” | Incluído em todos os layouts, exceto Minimal. |
| Banner principal | data-store="banner-main" | Isso só é encontrado no Layout Minimal, como um substituto para o carrossel principal |
| Banners informativos | data-store=”banner-services” | Dependendo do layout, pode aparecer mais de uma vez na página. |
| Banners de categorias | data-store=”banner-home-categories” | É o componente que abrange os banners da categoria. |
| Produtos destacados | data-store=”products-home-featured” | Contempla o grid de produtos em destaque. |
| Vídeo | data-store=”video-home” | n/a |
| Feed do instagram | data-store=”instagram-feed” | n/a |
Listagem de produtos
| Elemento | Selector | Descrição |
|---|---|---|
| Grid de produtos em uma categoria | data-store=”category-grid-” | n/a |
| Filtros e categorias | data-store=”filters-nav” | Esta funcionalidade pode ou não estar presente no layout, pois é opcional para o vendedor. É o componente pai de todos os filtros em uma loja. |
| Filtros | data-store=”filters-group” | Representa cada grupo de filtros, por exemplo, todos os filtros de “cor”. |
| Item de produto | data-store=”product-item-” | Este componente se aplica ao item de produtos em cada categoria, como em qualquer parte do layout em que se encontra (página inicial, produtos relacionados, etc) |
| Nome do item do produto | data-store=”product-item-name-” | n/a |
| Preço do item do produto | data-store=”product-item-price-” | Contempla o pai que engloba tanto o preço quanto o preço promocional |
| Imagem do item do produto | data-store=”product-item-image-” | n/a |
| Descrição geral do item do produto | data-store=”product-item-info-” | Inclui as informações do produto na lista (deixando de fora a imagem) |
| Labels | data-store=”product-item-labels” | Engloba ao grupo de labels que o produto tem |
| Label de preço promocional | data-store=”product-item-offer-label” | Representa ao label de desconto pelo preço promocional |
| Label de promoções | data-store=”product-item-promotion-label” | Representa ao label de promoções |
Detalhe do produto
| Elemento | Selector | Descrição |
|---|---|---|
| Imagem do produto | data-store=”product-image-" | Contempla o contêiner para todas as imagens de produtos (incluindo miniaturas de desktop) |
Informação do produto | data-store=”product-info-” | É o componente que contém todas as informações sobre o produto, exceto a imagem (nome, preço, forma, calculadora de remessa) |
Nome do produto | data-store=”product-name-” | n/a |
| Preço do produto | data-store=”product-price-” | n/a |
| Estoque do produto | data-store="stock-product-- | É o estoque do produto, pode ser 0 se não houver estoque, maior que 0 se tiver estoque limitado ou "infinite" se for infinito. Inicialmente é o estoque geral do produto, mas ao alterar as variantes é atualizado para cada uma delas. |
| Formulário de produto | data-store=”product-form-” | Este componente agrupa as variantes, o botão para adicionar o produto ao carrinho e a calculadora de frete. |
| Descrição do produto | data-store="product-description-" | Contém a descrição de cada produto adicionado pelo vendedor. Dependendo do layout, ele pode estar no componente de informações do produto. |
| Produtos relacionados | data-store=”related-products” | É o contêiner da lista de produtos relacionados na parte inferior da página. |
| Labels | data-store=”product-item-labels” | Engloba ao grupo de labels que o produto tem |
| Label de preço promocional | data-store=”product-item-offer-label” | Representa ao label de desconto pelo preço promocional |
| Label de promoções | data-store=”product-item-promotion-label” | Representa ao label de promoções |
| Informações de promoções | data-store=”product-promotion-info” | Representa às informações de uma promoção que é exibida no produto |
Carrinho de compras
| Elemento | Selector | Descrição |
|---|---|---|
| Formulário do carrinho | data-store=”cart-form” | Contempla o formulário do carrinho tanto em sua versão dentro de um modal quanto em sua própria página. |
Item do carrinho | data-store=”cart-item-” | O ID usado corresponde ao ID do produto e não a um ID específico apenas para o carrinho. |
Calculador de frete | data-store=”shipping-caculator” | Também se aplica à calculadora nos detalhes do produto. Inclui a calculadora e seus resultados. |
| Opções de envio | data-store=”shipping-caculator-item-” | n/a |
| Lojas físicas | data-store=”branches” | Também se aplica às lojas físicas nos detalhes do produto. |
| Opções de lojas físicas | data-store=”branch-item-” | n/a |
| Subtotal do carrinho | data-store=”cart-subtotal” | É o componente que inclui tanto o texto "Subtotal" quanto o valor do subtotal do carrinho. |
| Total do carrinho | data-store=”cart-total” | É o componente que inclui tanto o texto "Total" quanto o valor do total do carrinho. |
Conta de usuário
Inclui pontos de ancoragem para o registro, login, lista de pedidos e página de detalhes do pedido.
| Elemento | Selector | Descrição |
|---|---|---|
| Formulário de login | data-store=”account-login” | É o formulário com o qual é feito o inicio de sessão |
Formulário de cadastro | data-store=”account-register” | É o formulário com o qual é feito o cadastro de uma conta |
Pedidos | data-store=”account-orders” | É o contêiner que engloba os pedidos gerados |
| Pedido na lista | data-store=”account-order-item-” | Cada pedido na página "Minha conta" |
| Pedido no detalhe | data-store=”account-order-detail-” | É o contêiner das informações sobre os detalhes de um pedido |
Contato
| Elemento | Selector | Descrição |
|---|---|---|
| Formulário do contato | data-store=”contact-form” | Contempla os forms de contato |