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".

Alguns podem estar presentes apenas em alguns layouts (principalmente os da página inicial). Caso você precise entender quais são os layouts nativos da Nuvemshop, compartilhamos aqui uma lista.

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 principal
data-store="home-slider"
Incluído em todos os layouts
Banners de categorías

data-store="home-banner-categories"

Incluído em todos os layouts exceto Lifestyle
Banners promocionais
data-store="home-banner-promotional"
Incluído em todos os layouts exceto Idea, Atlántico e Base
Banners de novedades
data-store="home-banner-news"
Incluído apenas em layouts Río, Lima, Cali, Uyuni e Toluca
Banners em destaque
data-store="home-banner-featured"
Incluído apenas no layout Toluca
Banners com textos
data-store="home-banner-with-text"
Incluído apenas no layout Lifestyle
Banners com imagens
data-store="home-banner-with-image"
Incluído apenas no layout Silent
Banner horizontal
data-store="home-banner-with-image"
Incluído apenas em layouts Simple e Material
Banners de pagamento, frete e compra
data-store="banner-services"
Incluido em todos os layouts. Dependiendo del diseño, puede aparecer más de una vez en la página.
Módulos de imagem e texto
data-store="home-image-text-module"
Incluído apenas em layouts Simple, Trend, Cali, Morelia, Cubo, Bahia, Lifestyle e Base
Categorías principais (com imagens)
data-store="home-categories-featured"
Incluído apenas em layouts Río, Lima, Cali, Uyuni, Toluca e Morelia
Categorías principais (só links)
data-store="home-categories-featured"
Incluído apenas em layouts Simple, Trend, Lifestyle, Silent e Material
Mensagem de bienvenida
data-store="home-welcome-message"
Incluído apenas em layouts Amazonas, Idea, Lima, Cali,  Uyuni, Toluca e Morelia
Mensagem institucional
data-store="home-institutional-message"
Incluído apenas em layouts Simple, Cali, Uyuni, Toluca, Morelia, Lifestyle, Silent e Base
Produtos em destaque

data-store="home-products-featured"

Incluído em todos os layouts

Produtos novos
data-store="home-products-new"

Incluído apenas em layouts Amazonas, Río, Lima, Cali, Uyuni, Toluca, Morelia, Cubo, Lifestyle e Bahia

Produtos em oferta
data-store="home-products-sale"
Incluído apenas em layouts Amazonas, Simple, Río, Lima, Cali, Uyuni, Toluca, Morelia, Cubo, Lifestyle, Bahia, Silent e Atlántico
Produtos em promoção
data-store="home-products-promotion"
Incluído apenas em layouts Toluca e Morelia
Produtos mais vendidos
data-store="home-products-best-seller"
Incluído apenas no layout Toluca
Produtos em breve
data-store="home-products-coming-soon"Incluído apenas em layouts Toluca e Lifestyle
Produtos recentes
data-store="home-products-recent"
Incluído apenas no layout Lifestyle
Carrossel de produtos
data-store="home-products-slider"
Incluído apenas em layouts Material e Idea
Produto principal
data-store="home-product-main"
Incluído apenas em layouts Lima, Cali, Uyuni, Toluca e Morelia
Vídeodata-store=”home-video”Incluído em todos os layouts
Marcas
data-store="home-brands"
Incluído apenas em layouts Amazonas, Atlántico, Lima, Cali, Uyuni, Toluca e Morelia
Depoimentosdata-store="home-testimonials"
Incluído apenas em layouts Lima, Cali, Uyuni, Toluca e Morelia
Módulo de newsletterdata-store="home-newsletter"
Incluído apenas em layouts Amazonas, Idea, Trend, Lima, Cali, Uyuni, Toluca e Morelia
Feed de Instagramdata-store="home-instagram-feed"
Incluído em todos os layouts.
Página de Facebook
data-store="home-facebook-page"
Incluído apenas em layouts Simple, Trend, Lifestyle, Silent e Material
Feed de Twitterdata-store="home-twitter-feed"
Incluído apenas em layouts Simple, Material e Trend


Listagem de produtos

ElementoSelectorDescrição
Banner da página de categoría
data-store="category-banner"
Incluído em todos os layouts
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)
Labelsdata-store=”product-item-labels”Engloba ao grupo de labels que o produto tem
Label de preço promocionaldata-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

ElementoSelectorDescrição
Detalhes do produto
data-store="product-detail"
É o contêiner geral para informações do produto na página de detalhes
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.
Labelsdata-store=”product-item-labels”Engloba ao grupo de labels que o produto tem
Label de preço promocionaldata-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
Produtos relacionados
data-store="related-products"
É o contêiner para produtos relacionados


Carrinho de compras

ElementoSelectorDescrição
Página do carrinho
data-store="cart-page"
Contempla a página do carrinho (não sua versão pop-up)
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.

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