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="slider-main".

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 principal de fotosdata-store=”slider-main”Incluido en todas las plantillas excepto Minimal
Banner principaldata-store="banner-main"Este solo se encuentra en la plantilla Minimal, como reemplazo del carrusel principal.
Banners informativos

data-store=”banner-services”

Dependiendo del diseño, puede aparecer más de una vez en la página.
Banners de categorías

data-store=”banner-home-categories”

Contempla el componente que engloba a los banners de categorías.
Productos destacados

data-store=”products-home-featured”

Contempla a la grilla de productos destacados.

Videodata-store=”video-home”n/a
Feed de instagramdata-store=”instagram-feed”n/a


Listado de productos

ElementoSelectorDescripción
Grilla de productos en una categoríadata-store=”category-grid-”n/a
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
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


Carrito de compras

ElementoSelectorDescripción
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