Puntos de anclaje para aplicaciones

Las plantillas de Tiendanube tienen selectores de HTML pensados para que aplicaciones o agentes externos puedan anclarse al diseño de cada tienda sin tener que adaptar su código en base a cada plantilla.

Estos componentes están representados por el atributo “data-store”, cuyo valor va a depender del elemento al cual representa. Por ejemplo si es el carrusel principal de la tienda, el atributo es data-store="home-slider".

Algunos pueden estar presentes sólo en algunas plantillas (principalmente los del a página de inicio).  En caso de necesitar entender cuales son las plantillas nativas de Tiendanube, compartimos acá un listado .

En caso de tener un selector que no es único, por ejemplo un ítem en el listado de producto, el selector es data-store=”product-item-”

Puntos importantes a la hora de trabajar con estos selectores:

  • Componentes opcionales: La presencia de algunos selectores puede estar condicionada por componentes que son opcionales para la tienda. Por ejemplo, puede que una tienda no use el carrusel principal.
    Sin embargo, otros siempre van a estar. Por ejemplo la navegación, el footer, el item del listado de productos (sobretodo dentro de una categoría), el formulario de producto o el carrito.

  • Los selectores se encuentran en todas las plantillas de Tiendanube actuales pero no hay seguridad de que lo estén en tiendas que hicieron cambios a medida en sus FTPs

No usar otro tipo de atributos o selectores para anclarse en una tienda. Por ejemplo un atributo ID o una clase (incluso las que comienzan con el prefijo “js-”).

Este tipo de selectores es usado sólo por el código propio de cada plantilla, en caso de necesitar un selector nuevo, podés contactarte a storefronts@tiendanube.con, donde vamos a analizar cada pedido.

Navegación, pie y título de página

ElementoSelectorDescripción
Encabezadodata-store=”head”n/a
Encabezado desktop 

data-store=”head-desktop”

Solo la plantilla Simple, dependiendo su configuración;  así cómo Trend y Silent (codename: zen
Encabezado mobile 

data-store=”head-mobile”

Aplica a los mismos casos que el atributo data-store=”head-desktop”
Navegacióndata-store="navigation"Aplica al componente que engloba los links de navegación
Links para cuentasdata-store="account-links"Es el componente que contiene los links en relación al manejo de cuentas: Crear cuenta, Mi cuenta, etc.
Título de página

data-store=”page-title”

No aplica al detalle del producto
Pie de páginadata-store=”footer”n/a
Formulario de Newsletterdata-store=”newsletter-form”
Aplica a los form para suscripción al newsletter. Puede aparecer en el footer como en un modal.


Página de inicio

Todos los componentes de la página de inicio son opcionales, si bien es muy probable que estén, el vendedor puede optar por no mostrarlos, incluso a los productos destacados (esto es muy raro).
Por otro lado, considerar que en la plantilla Lite (usada por el plan básico de Tiendanube) sólo se muestran productos destacados y no aplica el resto de los componentes ya que es una plantilla sin personalización.

ElementoSelectorDescripción
Carrusel principaldata-store="home-slider"
Incluido en todas las plantillas
Banners de categorías

data-store="home-banner-categories"

Incluido en todas las plantillas excepto Lifestyle
Banners promocionales
data-store="home-banner-promotional"
Incluido en todas las plantillas excepto Idea, Atlántico y Base
Banners de novedades
data-store="home-banner-news"
Incluido sólo en las plantillas Río, Lima, Cali, Uyuni y Toluca
Banners destacados
data-store="home-banner-featured"
Incluido sólo en la plantilla Toluca
Banners con textos
data-store="home-banner-with-text"
Incluido sólo en la plantilla Lifestyle
Banners con imágenes
data-store="home-banner-with-image"
Incluido sólo en la plantilla Silent
Banner horizontal
data-store="home-banner-with-image"
Incluido sólo en las plantillas Simple y Material
Banners de pagos, envíos y compra
data-store="banner-services"
Incluido en todas las plantillas. Dependiendo del diseño, puede aparecer más de una vez en la página.
Módulos de imagen y texto
data-store="home-image-text-module"
Incluido sólo en las plantillas Simple, Trend, Cali, Morelia, Cubo, Bahia, Lifestyle y Base
Categorías principales (con imágenes)
data-store="home-categories-featured"
Incluido sólo en las plantillas Río, Lima, Cali, Uyuni, Toluca y Morelia
Categorías principales (sólo links)
data-store="home-categories-featured"
Incluido sólo en las plantillas Simple, Trend, Lifestyle, Silent y Material
Mensaje de bienvenida
data-store="home-welcome-message"
Incluido sólo en las plantillas Amazonas, Idea, Lima, Cali,  Uyuni, Toluca y Morelia
Mensaje institucional
data-store="home-institutional-message"
Incluido sólo en las plantillas Simple, Cali, Uyuni, Toluca, Morelia, Lifestyle, Silent y Base
Productos destacados

data-store="home-products-featured"

Incluído en todas las plantillas

Productos nuevos
data-store="home-products-new"

Incluido sólo en las plantillas Amazonas, Río, Lima, Cali, Uyuni, Toluca, Morelia, Cubo, Lifestyle y Bahia

Productos en oferta
data-store="home-products-sale"
Incluido sólo en las plantillas Amazonas, Simple, Río, Lima, Cali, Uyuni, Toluca, Morelia, Cubo, Lifestyle, Bahia, Silent y Atlántico
Productos en promoción
data-store="home-products-promotion"
Incluido sólo en las plantillas Toluca y Morelia
Productos más vendidos
data-store="home-products-best-seller"
Incluido sólo en la plantilla Toluca
Productos próximamente
data-store="home-products-coming-soon"Incluido sólo en las plantillas Toluca y Lifestyle
Productos recientes
data-store="home-products-recent"
Incluido sólo en la plantilla Lifestyle
Carrusel de productos
data-store="home-products-slider"
Incluido sólo en las plantillas Material e Idea
Producto principal
data-store="home-product-main"
Incluido sólo en las plantillas Lima, Cali, Uyuni, Toluca y Morelia
Videodata-store=”home-video”Incluido en todas las plantillas
Marcas
data-store="home-brands"
Incluido sólo en las plantillas Amazonas, Atlántico, Lima, Cali, Uyuni, Toluca y Morelia
Testimonios
data-store="home-testimonials"
Incluido sólo en las plantillas Lima, Cali, Uyuni, Toluca y Morelia
Módulo de newsletterdata-store="home-newsletter"
Incluido sólo en las plantillas Amazonas, Idea, Trend, Lima, Cali, Uyuni, Toluca y Morelia
Feed de Instagramdata-store="home-instagram-feed"
Incluido en todas las plantillas
Página de Facebook
data-store="home-facebook-page"
Incluido sólo en las plantillas Simple, Trend, Lifestyle, Silent y Material
Feed de Twitterdata-store="home-twitter-feed"
Incluido sólo en las plantillas Simple, Material y Trend


Listado de productos

ElementoSelectorDescripción
Banner en la página de categoría
data-store="category-banner"
Incluído en todas las plantillas
Grilla de productos en una categoríadata-store=”category-grid-”Incluído en todas las plantillas
Filtros y categorías

data-store=”filters-nav”

Esta funcionalidad puede estar o no presente en el diseño ya que es opcional para el vendedor.
Es el componente padre de todos los filtros en una tienda.
Filtros

data-store=”filters-group”

Representa a cada grupo de filtros, por ejemplo todos los filtros de “color”.
Item de producto

data-store=”product-item-”

Este componente aplica al ítem de productos en cada categoría, cómo en cualquier parte de la plantilla en la cual se encuentre (página de inicio, productos relacionados, etc)
Nombre Ítem de producto

data-store=”product-item-name-”

n/a

Precio del ítem de producto data-store=”product-item-price-”Contempla al padre que engloba tanto precio cómo precio promocional
Imagen del ítem de productodata-store=”product-item-image-”n/a
Descripción en general del ítem de productodata-store=”product-item-info-”Engloba a la información del producto en el listado (dejando afuera la imagen)
Cartelesdata-store=”product-item-labels”Engloba al grupo de carteles que tiene el producto
Cartel de precio promocionaldata-store=”product-item-offer-label”Representa al cartel de descuento por precio promocional
Cartel de promociones
data-store=”product-item-promotion-label”Representa al cartel de promociones


Detalle del producto

ElementoSelectorDescripción
Detalle del productodata-store="product-detail"
Es el contenedor general de la información de producto en la página de detalle
Imagen del productodata-store=”product-image-"Contempla al padre que contiene todas las imágenes de producto (incluidas las miniaturas en desktop)

Información del producto


data-store=”product-info-”

Es el componente padre que contiene toda la información del producto que no es la imagen (nombre, precio, formulario, calculador de envíos)

Nombre del producto

data-store=”product-name-”

n/a
Precio del producto

data-store=”product-price-”

n/a
Stock del productodata-store="stock-product--Es el stock del producto, puede ser 0 si no tiene stock, mayor a 0 si tiene stock limitado o "infinite" si es infinito. Inicialmente es el stock general del producto pero al cambiar variantes se actualiza a cada una de estas.
Formulario de producto

data-store=”product-form-”

Este componente agrupa las variantes, el botón para agregar el producto al carrito y el calculador de envíos.

Descripción del productodata-store="product-description-"Contiene la descripción propia de cada producto agregada por el vendedor. Dependiendo la plantilla puede estar dentro del componente de información de producto.
Productos relacionadosdata-store=”related-products”Es el contenedor de la grilla de productos relacionados al pie de la página.
Cartelesdata-store=”product-item-labels”Engloba al grupo de carteles que tiene el producto
Cartel de precio promocionaldata-store=”product-item-offer-label”Representa al cartel de descuento por precio promocional
Cartel de promociones
data-store=”product-item-promotion-label”Representa al cartel de promociones
Información de promociones
data-store=”product-promotion-info”Representa a la información de una promoción que se muestra en el producto
Productos relacionados
data-store="related-products"
Es el contenedor de los productos relacionados


Carrito de compras

ElementoSelectorDescripción
Página del carritodata-store="cart-page"
Contempla la página del carrito (no su versión de popup)
Formulario del carrito
data-store=”cart-form”
Contempla al formulario tanto del carrito en su versión dentro de un modal como en su página propia.

Item del carrito

data-store=”cart-item-”

El ID utilizado responde al ID del producto y no a un ID específico sólo del carrito.

Calculador de envíos

data-store=”shipping-caculator”

También aplica al calculador en el detalle de producto. Engloba tanto al calculador como a sus resultados.
Opciones de envío

data-store=”shipping-caculator-item-”

n/a
Locales

data-store=”branches”

También aplica a los locales en el detalle de producto

Opciones de locales
data-store=”branch-item-”
Contiene la descripción propia de cada producto agregada por el vendedor. Dependiendo la plantilla puede estar dentro del componente de información de producto.
Subtotal del carrito
data-store=”cart-subtotal”
Es el componente que engloba tanto el texto “Subtotal” como el valor del subtotal del carrito.
Total del carrito
data-store=”cart-total”
Es el componente que engloba tanto el texto “Total” como el valor del total del carrito.


Cuenta de usuarios

Incluye puntos de anclaje para las páginas de registro, login, listado de ordenes y detalle de una orden.

ElementoSelectorDescripción
Formulario de logindata-store=”account-login”Contempla al formulario con el cual se inicia sesión.

Formulario de registro

data-store=”account-register”

Contempla al formulario con el cual se registra una cuenta.

Órdenes 

data-store=”account-orders”

Es el contenedor que engloba a las órdenes generadas
Orden en el listado

data-store=”account-order-item-”

Es cada orden dentro de la página de "Mi cuenta"
Orden en el detalle

data-store=”account-order-detail-”

Es el contenedor de la información sobre una orden en el detalle de la misma


Contacto

ElementoSelectorDescripción
Formulario de contactodata-store=”contact-form”Aplica a los form de contacto