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
| 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 | data-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 |
| Video | data-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 newsletter | data-store="home-newsletter" | Incluido sólo en las plantillas Amazonas, Idea, Trend, Lima, Cali, Uyuni, Toluca y Morelia |
| Feed de Instagram | data-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 Twitter | data-store="home-twitter-feed" | Incluido sólo en las plantillas Simple, Material y Trend |
Listado de productos
| Elemento | Selector | Descripció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ía | data-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 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 |
|---|---|---|
| Detalle del producto | data-store="product-detail" | Es el contenedor general de la información de producto en la página de detalle |
| 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 |
| Productos relacionados | data-store="related-products" | Es el contenedor de los productos relacionados |
Carrito de compras
| Elemento | Selector | Descripción |
|---|---|---|
| Página del carrito | data-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.
| 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 |