Integración con el tema

Optical Form funciona en cualquier tema de Shopify sin desarrollador. Esta página resume la capa de integración para quien quiera personalizarla. Para los ajustes visuales del bloque y del embed, ver Botón y carrito (tema).

Resolución de variante (agnóstica al tema)

El drawer y el botón son web components independientes que no se re-renderizan al cambiar de variante. Por eso Optical Form resuelve la variante actual de forma perezosa (al abrir y al añadir al carrito), con esta cadena de prioridad:

1. Hook del comerciante: window.OpticalFormHooks.getVariantId(triggerEl)
2. Selector configurable en el bloque (setting Variant input selector)
3. Input estándar del formulario de producto [name="id"] (Dawn/Horizon y la mayoría)
4. Parámetro de URL ?variant=
5. Fallback al valor renderizado por el servidor

Hooks (sin forkear la app)

window.OpticalFormHooks = {
  // Devuelve el id de la variante seleccionada (máxima prioridad).
  getVariantId(triggerEl) { return /* id de variante */; },
  // Opcional: sobrescribe el precio (en céntimos) de una variante.
  getVariantPrice(variantId, triggerEl) { return undefined; },
  // Opcional: desactiva la agrupación de bundle en el carrito.
  disableCartGrouping: false,
};

Agrupación en el carrito

Los addons y accesorios se añaden como líneas separadas con parent_id (bundle nativo de Shopify — necesario para el borrado en cascada, el checkout y los emails de pedido). Como los temas las pintan como líneas sueltas, CartBridge las anida bajo el producto principal y oculta sus controles, imitando cómo se ve el bundle en el checkout.

Los selectores del carrito y el comportamiento tras añadir se ajustan en el app embed — ver Botón y carrito. CartBridge autodetecta los patrones de la mayoría de temas; solo hace falta sobrescribir selectores en temas no estándar.

Referencia completa

El detalle técnico (resolver, CartBridge, selectores) vive en INTEGRATION.md, dentro de la extensión de la app: extensions/optical-form-ext/INTEGRATION.md.