data-store contracts

Purpose

data-store attributes identify canonical store elements for apps that do not use Nube SDK — stable DOM selectors across theme patch versions.

Examples

<h1 data-store="product-name-{{ product.id }}">…</h1>
<div data-store="product-price-{{ product.id }}">…</div>
<input type="submit" data-store="product-buy-button" … />
<div data-store="cart-item-{{ item.product.id }}">…</div>

Editor blocks

<div {{ block | block_attributes }} data-store="heading-block-{{ block.id }}">

Rules

1. Do not remove existing data-store attributes.
2. When wrapping a node, keep the attribute on the original element.
3. New hooks: lower-kebab-case + entity id when applicable.
4. data-component (when present) follows the same rules.

js-* classes

Contract with theme/static/js/store.js — renaming breaks behavior without a visible error. Treat js-* with the same care as data-store.