Integración de Wix#

Integra el Room Visualizer con Wix Stores a través de la superficie de extensión de Wix que coincida con tu tipo de sitio. Wix Editor y Wix Studio requieren enfoques diferentes.

Estado de verificación: Documentación de la extensión Wix revisada el 7 de septiembre de 2026. No se disponía de credenciales de cliente ni de sitio Wix ni de app, por lo que no está certificada de extremo a extremo. El SDK debe compartir el DOM de la storefront con su contenedor; un iframe HTML no es un sustituto.

Antes de cargar el SDK: Abre Panel de control → Configuración, añade el origen de tu storefront a Allowed Origins (CORS) y haz clic en Save. Incluye el nombre de host publicado y cualquier origen de previsualización o staging que utilices; separa múltiples orígenes con comas. Consulta los pasos de configuración.

Elige la ruta correcta de Wix#

Storefront	Ruta de inserción recomendada	Limitación
Sitio de Wix Editor, un merchant	Custom Code del sitio más un elemento de página de producto o app personalizada	Los datos de página aún necesitan un bridge de cliente
App de Wix para Wix Editor Stores	Extensión de Script Embebido y marcadores de posición de Wix Stores	Los Scripts Embebidos para Wix Stores no soportan Wix Studio
Sitio de Wix Studio	Slot de plugin de sitio de Wix Stores	Requiere un proyecto de app/extensión de Wix
Storefront headless de Wix	Añade el SDK en tu frontend propio React/Vue	Sigue la guía del framework correspondiente

Wix documenta que los Scripts Embebidos de Stores no están disponibles en Wix Studio y dirige a las apps a una extensión de plugin de sitio. No instales una solución de script embebido de Editor y reclames cobertura de Studio.

Requisitos previos#

Prepara un sitio de prueba de Wix con Wix Stores, permiso para publicar custom code o una extensión de app, Shop ID y Publishable Key de ideal.house, y un SKU de prueba importado. Decide si la variante Wix seleccionada tiene su propio SKU. Mantén todos los app secrets y las API keys del backend fuera de la página del navegador.

Marcado mínimo del SDK#

Donde Wix permite que tu código se ejecute en el documento de la storefront, el marcado soportado de ideal.house es:

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

El Product Code debe coincidir exactamente con el ideal.house sku importado.

Wix Editor: instalar para un sitio#

En el dashboard de Wix, añade la etiqueta del SDK mediante Settings → Custom Code, colócala en el body/final del body y selecciona las páginas de producto que la necesiten. Publica el sitio; el modo preview no es suficiente para una verificación de producción.

Luego añade un custom element de página de producto o un punto de extensión de Wix Stores que produzca el contenedor en el mismo documento de nivel superior. Evita Wix HTML Embed para el botón: se ejecuta dentro de un iframe, por lo que un script en el documento padre no puede descubrir su contenedor y un script en el iframe no puede controlar la página de producto.

El elemento colocable debe exponer una operación en tu propio código:

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Llámalo solo después de que Wix informe un producto/variante completo y actual a través de la API disponible para tu página o extensión. Este es un código adaptador del cliente; intencionalmente no nombra un evento de página Wix no verificado.

App de Wix: Script Embebido para Wix Editor Stores#

Wix Stores proporciona ubicaciones details-placeholder y bottom-placeholder para Embedded Script Extensions. Añade un host a uno de esos marcadores de posición; no reemplaces su contenido porque otras apps pueden compartirlo. Configura el script del SDK como un fragmento embebido separado o créalo programáticamente con los atributos src, data-shop-id y data-publishable-key exactos.

La API Site de Wix disponible para scripts embebidos creados por CLI puede leer el contexto de storefront. Resuelve el SKU de la variante actual a través de la API de Stores soportada por Wix, luego llama a tu puente setIdealhouseSku(). Mantén el marcador de posición vacío hasta que exista un SKU completo.

Wix Studio: plugin de sitio#

Crea un plugin de sitio de Wix Stores apuntando a un slot documentado de página de producto. Renderiza el contenedor desde la UI del plugin y carga el SDK en el documento del sitio renderizado por Wix. El plugin debe pasar su SKU de variante actual resuelta al contenedor DOM. Los nombres de slots de Wix Studio y las APIs de componentes pueden evolucionar; selecciónalos desde la referencia CLI/API actual al generar la extensión en lugar de copiar un nombre de esta guía.

No uses un slot de plugin que renderice el control dentro de un iframe aislado: el SDK y su visor no han sido certificados para ese límite. Elige un punto de extensión de Wix que coloque el contenedor en el documento de la storefront, o utiliza un storefront headless donde controles el documento.

Mapeo de producto y navegación#

Mapea el sku del producto o variante de Wix al sku de ideal.house. No uses automáticamente el ID del producto de Wix como alternativa, porque un ID generado no coincidirá con un SKU del catálogo a menos que lo hayas importado intencionalmente.

Las páginas de producto de Wix pueden reemplazar contenido durante la selección de opciones o la navegación del cliente. En cada callback de producto/selección documentada:

limpia el contenedor renderizado previamente;
resuelve la variante seleccionada completa;
inserta un contenedor nuevo con su SKU;
mantén el host vacío cuando no exista un SKU completo o visualizable.

Para galerías y repeaters, cada elemento necesita su propio SKU a nivel de elemento. Los productos de vista rápida y modal requieren el mismo puente de ciclo de vida en el slot modal.

Importar productos#

Wix Stores no sincroniza automáticamente con ideal.house. Exporta los campos de producto y variante de Wix, establece cada SKU deseado de Wix como sku, y utiliza Carga de productos. Consulta Importar productos, Estado del trabajo, Listar productos, Actualizar productos, Eliminar producto y Errores y reintentos.

Un sync automatizado de Wix a ideal.house, un flujo de instalación de app o un procesador de webhook de Wix es trabajo de propiedad del cliente; esta guía no promete ninguno.

Verificar antes de publicar#

Prueba el sitio publicado en una ventana de navegador privada en escritorio y móvil.
Confirma que el SDK carga una sola vez en el mismo documento que el contenedor.
Compara el Product Code del DOM con el SKU importado exactamente.
Cambia cada opción hasta seleccionar una variante final; confirma que el contenedor antiguo se elimina y aparece uno nuevo.
Ejercita la navegación cliente de Wix, páginas de galería/repeater de producto, vista rápida, Back/Forward del navegador, configuraciones de consentimiento y modos miembro/desconectado.
Confirma que un SKU desconocido o en blanco no deje ningún control visualizer roto.
Para una app, prueba instalación, habilitación, deshabilitación y desinstalación en sitios de prueba separados de Wix Editor y Studio según lo soportado.

Eliminar la integración#

Elimina o deshabilita la entrada Custom Code de Wix y quita el elemento de página de producto. Para una app, elimina la extensión Embedded Script o site plugin y desinstálala del sitio de prueba. Publica y luego confirma que la petición del script y todos los nodos data-idealhouse-* han desaparecido.