Pontos de ancoragem para aplicações

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

ElementoSelectorDescrição
Cabeçalho da lojadata-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çãodata-store="navigation"Aplica-se ao componente que tem os links de navegação
Links para contasdata-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.

ElementoSelectorDescrição
Carrossel de fotos principaldata-store=”slider-main”

Incluído em todos os layouts, exceto Minimal.

Banner principaldata-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ídeodata-store=”video-home”n/a
Feed do instagramdata-store=”instagram-feed”n/a


Listagem de produtos

ElementoSelectorDescrição
Grid de produtos em uma categoriadata-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 produtodata-store=”product-item-price-”Contempla o pai que engloba tanto o preço quanto o preço promocional
Imagem do item do produtodata-store=”product-item-image-”n/a
Descrição geral do item do produtodata-store=”product-item-info-”Inclui as informações do produto na lista (deixando de fora a imagem)


Detalle del producto

ElementoSelectorDescrição
Imagem do produtodata-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 produtodata-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 produtodata-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 relacionadosdata-store=”related-products”É o contêiner da lista de produtos relacionados na parte inferior da página.


Carrinho de compras

ElementoSelectorDescriçã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
Total do carrinho
data-store=”cart-total”
Es el componente que engloba tanto el texto “total” como el valor del total del carrito.


Conta de usuário

Inclui pontos de ancoragem para o registro, login, lista de pedidos e página de detalhes do pedido.

ElementoSelector
Descrição
Formulário de logindata-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

ElementoSelectorDescrição
Formulário do contato
data-store=”contact-form”Contempla os forms de contato