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
| Elemento | Selector | Descripción |
|---|---|---|
| Encabezado | data-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ón | data-store="navigation" | Aplica al componente que engloba los links de navegación |
| Links para cuentas | data-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ágina | data-store=”footer” | n/a |
| Formulario de Newsletter | data-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.
| Elemento | Selector | Descripción |
|---|---|---|
| Carrusel principal de fotos | data-store=”slider-main” | Incluido en todas las plantillas excepto Minimal |
| Banner principal | data-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. |
| Video | data-store=”video-home” | n/a |
| Feed de instagram | data-store=”instagram-feed” | n/a |
Listado de productos
| Elemento | Selector | Descripción |
|---|---|---|
| Grilla de productos en una categoría | data-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 producto | data-store=”product-item-image-” | n/a |
| Descripción en general del ítem de producto | data-store=”product-item-info-” | Engloba a la información del producto en el listado (dejando afuera la imagen) |
| Carteles | data-store=”product-item-labels” | Engloba al grupo de carteles que tiene el producto |
| Cartel de precio promocional | data-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
| Elemento | Selector | Descripción |
|---|---|---|
| Imagen del producto | data-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 producto | data-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 producto | data-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 relacionados | data-store=”related-products” | Es el contenedor de la grilla de productos relacionados al pie de la página. |
| Carteles | data-store=”product-item-labels” | Engloba al grupo de carteles que tiene el producto |
| Cartel de precio promocional | data-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
| Elemento | Selector | Descripció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.
| Elemento | Selector | Descripción |
|---|---|---|
| Formulario de login | data-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
| Elemento | Selector | Descripción |
|---|---|---|
| Formulario de contacto | data-store=”contact-form” | Aplica a los form de contacto |