O Theme expõe dois pontos de extensão para que as apps de plataforma possam injetar conteúdo ou adicionar comportamento sem necessidade de modificar o código do Theme. Nenhum desses pontos deve ser removido ou renomeado — as apps de terceiros dependem deles, e sua remoção silencia integrações instaladas.
Nube SDK slots
O Nube SDK permite que as apps renderizem conteúdo em slots nomeados dentro do storefront. Quando nenhuma app aponta para um slot, nada é renderizado; quando uma ou mais apps o apontam, seu conteúdo é injetado naquele ponto de ancoragem.
Há dois tipos de slots:
Slots de shopping UX (emitidos pelo Theme)
São escritos explicitamente nos arquivos .tpl do Theme em pontos bem conhecidos da experiência de compra. São emitidos com o componente nubesdk-slot:
{{ component('nubesdk-slot', { type: "before_main_content" }) }}
Slots emitidos pelo Theme:
Layout (layouts/layout.tpl, sections/footer.tpl):
| Slot | Posição |
|---|---|
before_main_content | Início do <body>, antes de todo o conteúdo. |
after_header | Entre o header e o conteúdo da página. |
before_footer | Imediatamente antes do markup do footer. |
Página de produto (snippets/product/*, blocks/description.tpl, sections/product-description.tpl):
| Slot | Posição |
|---|---|
before_product_detail_name / after_product_detail_name | Antes/depois do nome do produto. |
before_product_detail_price / after_product_detail_price | Antes/depois do preço. |
before_product_detail_add_to_cart / after_product_detail_add_to_cart | Antes/depois do botão de adicionar ao carrinho. |
after_product_description | Depois da descrição do produto. |
product_detail_image | Na galeria de imagens do produto. |
Grade de produtos — por item (snippets/product-list/*):
| Slot | Posição |
|---|---|
before_product_grid_item_name / after_product_grid_item_name | Antes/depois do nome do produto na grade. |
before_product_grid_item_price / after_product_grid_item_price | Antes/depois do preço na grade. |
product_grid_item_image | Na imagem do item de grade. |
Carrinho (snippets/cart/*, sections/main-cart.tpl):
| Slot | Posição |
|---|---|
before_line_items / after_line_items | Antes/depois dos itens do carrinho. |
after_cart_summary | Depois do resumo do carrinho. |
before_go_to_checkout / after_go_to_checkout | Antes/depois do botão de ir para o checkout. |
Ao adicionar um novo ponto de ancoragem ao Theme, inclua uma chamada nubesdk-slot com um type descritivo para que as apps possam apontá-lo.
Slots de seção (emitidos pela plataforma)
As apps também podem apontar para qualquer instância de section renderizada em uma página através de um par de slots que a plataforma emite automaticamente ao redor de cada section dinâmica produzida pelo renderer, independentemente do código do Theme:
| Slot | Posição |
|---|---|
before_dynamic_section | Imediatamente antes da section renderizada. |
after_dynamic_section | Imediatamente depois da section renderizada. |
A plataforma passa section_type, section_id e section_index ao slot para que as apps possam restringir-se a uma section específica. Não é necessário adicionar nada no Theme — o backend renderer os injeta automaticamente.
Atributos data-store
Os atributos data-store são hooks estáveis para apps de plataforma que não usam o Nube SDK. Identificam elementos bem conhecidos do DOM — o botão de adicionar ao carrinho, o nó de preço, itens do carrinho, formulários de conta, etc. — para que as apps possam encontrá-los e manipulá-los com seletores CSS.
Exemplos do 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" …>
Os blocks adicionados a partir do editor também expõem um data-store para que as apps possam apontar instâncias individuais:
<div class="heading-block …" {{ block | block_attributes }} data-store="heading-block-{{ block.id }}">
Regras
- Não se removem atributos
data-storede markup existente. Se um elemento for envolvido por outro, o atributo permanece no nó original. data-component(quando presente) cumpre o mesmo papel para hooks de comportamento — também não se remove.- Ao introduzir elementos bem conhecidos novos, siga o padrão existente: kebab-case em minúsculas, descritivo, com o id da entidade quando aplicável (ex.
data-store="product-name-{{ product.id }}",data-store="cart-item-{{ item.product.id }}").