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
| 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 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ídeo | data-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 |
| Depoimentos | data-store="home-testimonials" | Incluído apenas em layouts Lima, Cali, Uyuni, Toluca e Morelia |
| Módulo de newsletter | data-store="home-newsletter" | Incluído apenas em layouts Amazonas, Idea, Trend, Lima, Cali, Uyuni, Toluca e Morelia |
| Feed de Instagram | data-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 Twitter | data-store="home-twitter-feed" | Incluído apenas em layouts Simple, Material e Trend |
Listagem de produtos
| Elemento | Selector | Descrição |
|---|---|---|
| Banner da página de categoría | data-store="category-banner" | Incluído em todos os layouts |
| 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 |
|---|---|---|
| Detalhes do produto | data-store="product-detail" | É o contêiner geral para informações do produto na página de detalhes |
| 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 |
| Produtos relacionados | data-store="related-products" | É o contêiner para produtos relacionados |
Carrinho de compras
| Elemento | Selector | Descriçã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.
| 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 |