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

Elemento
SelectorDescriçã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


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 principal
data-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ídeo
data-store=”video-home”
n/a
Feed do instagram
data-store=”instagram-feed”
n/a


Listagem de produtos

ElementoSelectorDescriçã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)


Detalle del producto

ElementoSelectorDescriçã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.


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.