El Theme expone dos puntos de extensión para que las apps puedan inyectar contenido o adjuntar comportamiento sin necesidad de modificar el código del Theme. No se deben eliminar ni renombrar ninguno de estos puntos — las apps de terceros dependen de ellos, y su remoción silencia integraciones instaladas.
Nube SDK slots
El Nube SDK permite a las apps renderizar contenido en slots nombrados dentro del storefront. Cuando ninguna app apunta a un slot, no se renderiza nada; cuando una o más apps lo apuntan, su contenido se inyecta en ese punto de anclaje.
Hay dos tipos de slots:
Slots de shopping UX (emitidos por el Theme)
Se escriben explícitamente en los archivos .tpl del Theme en puntos bien conocidos de la experiencia de compra. Se emiten con el componente nubesdk-slot:
{{ component('nubesdk-slot', { type: "before_main_content" }) }}
Slots emitidos por el Theme:
Layout (layouts/layout.tpl, sections/footer.tpl):
| Slot | Posición |
|---|---|
before_main_content |
Inicio de <body>, antes de todo el contenido. |
after_header |
Entre el header y el contenido de la página. |
before_footer |
Justo antes del markup del footer. |
Página de producto (snippets/product/*, blocks/description.tpl, sections/product-description.tpl):
| Slot |
Posición |
|---|---|
before_product_detail_name / after_product_detail_name |
Antes/después del nombre del producto. |
before_product_detail_price / after_product_detail_price |
Antes/después del precio. |
before_product_detail_add_to_cart / after_product_detail_add_to_cart |
Antes/después del botón de agregar al carrito. |
after_product_description |
Después de la descripción del producto. |
product_detail_image | En la galería de imágenes del producto. |
Grilla de productos — por ítem (snippets/product-list/*):
| Slot | Posición |
|---|---|
before_product_grid_item_name / after_product_grid_item_name |
Antes/después del nombre del producto en la grilla. |
before_product_grid_item_price / after_product_grid_item_price |
Antes/después del precio en la grilla. |
product_grid_item_image |
En la imagen del ítem de grilla. |
Carrito (snippets/cart/*, sections/main-cart.tpl):
| Slot |
Posición |
|---|---|
before_line_items / after_line_items |
Antes/después de los ítems del carrito. |
after_cart_summary |
Después del resumen del carrito. |
before_go_to_checkout / after_go_to_checkout |
Antes/después del botón de ir al checkout. |
Al agregar un nuevo punto de anclaje al Theme, se incluye una llamada nubesdk-slot con un type descriptivo para que las apps puedan apuntarlo.
Slots de sección (emitidos por la plataforma)
Las apps también pueden apuntar a cualquier instancia de section renderizada en una página a través de slots que la plataforma emite automáticamente alrededor de cada section dinámica producida por el renderer, independientemente del código del Theme:
| Slot |
Posición |
|---|---|
before_dynamic_section |
Inmediatamente antes de la section renderizada. |
after_dynamic_section |
Inmediatamente después de la section renderizada. |
La plataforma pasa section_type, section_id y section_index al slot para que las apps puedan acotarse a una section específica. No se necesita agregar nada en el Theme — el backend renderer los inyecta automáticamente.
Atributos data-store
Los atributos data-store son hooks estables para apps que no usan el Nube SDK. Identifican elementos bien conocidos del DOM — el botón de agregar al carrito, el precio, ítems del carrito, formularios de cuenta, etc. — para que las apps puedan encontrarlos y manipularlos con selectores CSS.
Ejemplos del Theme:
<!-- Página de producto -->
<h1 data-store="product-name-{{ product.id }}">{{ product.name }}</h1>
<div data-store="product-price-{{ product.id }}">…</div>
<form data-store="product-form-{{ product.id }}" …>
<input type="submit" data-store="product-buy-button" data-component="product.add-to-cart" … />
<!-- Carrito -->
<div data-store="cart-item-{{ item.product.id }}" data-component="cart.line-item">…</div>
<!-- Cuenta -->
<form data-store="account-login" …>
<form data-store="account-register" …>
Los blocks agregados desde el editor también exponen un data-store para que las apps puedan apuntar instancias individuales:
<div class="heading-block …" {{ block | block_attributes }} data-store="heading-block-{{ block.id }}">
Reglas
- No se eliminan atributos
data-storede markup existente. Si se envuelve un elemento, el atributo permanece en el nodo original. data-component(cuando está presente) cumple el mismo rol para hooks de comportamiento — tampoco se elimina.- Al introducir elementos bien conocidos nuevos, se sigue el patrón existente: kebab-case en minúsculas, descriptivo, con el id de la entidad cuando aplica (ej.
data-store="product-name-{{ product.id }}",data-store="cart-item-{{ item.product.id }}").