Ideal House
Saltar al contenido

Integración de SHOPLINE#

Integra Room Visualizer con una tienda online de SHOPLINE a través de una extensión de app de tema o un bloque de tema personalizado controlado.

Estado de verificación: La documentación del tema de Online Store 2.x/3.0 de SHOPLINE fue revisada el 7 de septiembre de 2026. No había una app de partner o tienda de prueba de merchant disponible. La sintaxis de plantilla y los tipos de extensión soportados varían según la generación de Online Store, así que valida contra la versión exacta de la tienda.

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

Elige una superficie de integración#

  • Para una app pública reutilizable en Online Store 2.0/2.1, SHOPLINE recomienda una Theme App Extension con un App Block y un App Embed Block opcional.
  • Los temas de Online Store 3.0 proporcionan bloques reutilizables con activos de JavaScript opcionales y App Blocks.
  • Las API de Script Tag/Asset son legadas o dependen de la versión/tipo de app; no las elijas sin consultar la tabla de compatibilidad de SHOPLINE.
  • Para una personalización de tema de una sola tienda, usa la estructura de bloque/plantilla y activo de la versión activa.

Prepara una tienda de desarrollo, acceso a extensión/tema, Shop ID, Publishable Key, y códigos de variante importados.

Contrato mínimo del SDK#

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 con el catálogo ideal.house sku. Esta documentación no afirma que exista una app instalable de ideal.house SHOPLINE.

Construye el bloque del tema#

Crea un App Block o bloque de tema público que renderice un host en las páginas de detalle de producto. Usa el objeto de producto/variante exacto y los helpers de escape documentados para tu generación de Online Store. El HTML final del storefront debe ser:

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

En el código fuente de la plantilla, reemplaza CHAIR-OAK-01 con la expresión de variante seleccionada actual SKU/código. No pegues una expresión de Liquid de Shopify en plantillas Handlebars de SHOPLINE 3.0; estos son lenguajes y contratos de objetos diferentes.

Para un App Block, agrégalo a la sección de producto en Theme Editor. Para un App Embed, úsalo para cargar el SDK globalmente sin UI visible. Los App Blocks generalmente requieren que el merchant los habilite/coloque después de la instalación.

Carga el SDK una sola vez#

En el activo de JavaScript de la extensión/tema, crea el script con las dos configuraciones públicas antes de agregarlo:

js
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

Usa configuración de extensión/parámetros dinámicos para credenciales multi-merchant. Solo expone el Publishable Key; mantén los secretos de la app en tu servidor.

Variantes seleccionadas y secciones dinámicas#

Conecta el callback de selección de producto documentado del tema activo a un adaptador del cliente:

js
function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Los temas de SHOPLINE son personalizables, así que esta guía no inventa un evento universal de variante del storefront. Online Store 3.0 documenta eventos de sección/bloque del theme-editor, pero estos son eventos del ciclo de vida del editor, no eventos de selección de variante del shopper.

Cuando secciones, filtros, paginación, vista rápida o preview del theme-editor vuelvan a renderizar un nodo de producto, crea un contenedor fresco. Limpia los listeners cuando un bloque se descargue en Theme Editor. Los botones de tarjeta de producto necesitan un SKU a nivel de elemento; omite el control cuando no se conozca una variante final.

Importar productos#

Exporta datos de producto y variante de SHOPLINE, y asigna el código de storefront seleccionado al ideal.house sku. Usa Carga de productos y las guías aprobadas para Importación, Estado del trabajo, Listado, Actualizaciones, Eliminación y Gestión de reintentos.

La sincronización de API de Admin de SHOPLINE, webhooks, OAuth de app y distribución en app-store son trabajo del adaptador del cliente.

Verificar y eliminar#

Prueba instalación y habilitación de bloque por el merchant, un producto simple, cada variante, códigos faltantes/desconocidos, tarjetas, vista rápida, filtros, navegación estilo SPA, móvil, consentimiento, preview del theme editor y cada versión de Online Store soportada. Confirma una solicitud de SDK y una asignación exacta de código/SKU.

Para eliminar, deshabilita el App Block/Embed y desinstala la extensión, o elimina el bloque personalizado y el activo. Publica el tema limpio, limpia las cachés y verifica que no quede ningún markup de SDK URL o data-idealhouse-*.

Referencias oficiales de la plataforma#