Integración con el tema

Optical Form funciona en cualquier tema con Online Store 2.0 —los que permiten añadir bloques desde el editor de temas— y no necesita desarrollador para instalarse. Está verificado en Dawn y Horizon; para temas a medida hay adaptadores y los hooks de abajo. 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 reordena para que cada hija quede justo debajo de su línea principal y las marca con ofd-bundle-parent / ofd-bundle-child.

Ahí acaba: no oculta la cantidad ni el botón de eliminar de las hijas, y la app no envía ni una regla de CSS al carrito. Esconder un control no impide la acción —la línea se puede cambiar y borrar igual por la API— y esa misma fila la comparten otras apps (garantías, seguros de envío), así que taparles la papelera dejaría al comprador con un cargo de un tercero que no puede quitar. Mantener el pedido coherente es trabajo del servidor, no del CSS.

Para afinar cómo se ve hay dos palancas en el app embed: la casilla Compactar las líneas de complementos (cart_tidy_addons, apagada por defecto) y el campo CSS personalizado. Ver Diseño y carrito.

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.