Integración de Adobe Commerce / Magento Open Source#
Instala Room Visualizer a través de un módulo de Magento o tema personalizado y mapea la SKU del producto simple mostrada al catálogo de ideal.house.
Estado de verificación: documentación frontend de Adobe Commerce revisada el 7 de septiembre de 2026. No había ninguna instalación de comerciante disponible. Los temas Luma/Blank, Hyvä y PWA Studio usan stacks de JavaScript diferentes; el ejemplo concreto a continuación apunta a la tienda estándar de RequireJS.
Antes de cargar el SDK: Abre Panel de control → Configuración, añade el origen de tu tienda a Allowed Origins (CORS) y haz clic en Guardar. Incluye el hostname publicado y cualquier origen de vista previa o staging que uses; separa múltiples orígenes con comas. Consulta pasos de configuración.
Requisitos previos y alcance#
Prepara una instancia de desarrollo, un módulo personalizado o tema hijo, acceso de implementación, Shop ID, Publishable Key y SKUs de prueba importados. Nunca modifiques archivos bajo vendor/ o un tema base. Hyvä y PWA Studio requieren su propio adaptador Alpine/React y no deben copiar el código de RequireJS ciegamente.
Contrato mínimo del SDK#
<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 código de producto es la sku importada exacta, no el ID de entidad numérico de Magento.
Agregar un bloque de página de producto#
Crea un pequeño módulo o actualización de diseño de tema para catalog_product_view. Apunta un bloque a una plantilla .phtml posicionada cerca de las acciones del producto. La plantilla puede renderizar con seguridad la SKU inicial del producto:
<?php
/** @var \Magento\Catalog\Block\Product\View $block */
$product = $block->getProduct();
$sku = $product ? trim((string) $product->getSku()) : '';
?>
<div class="idealhouse-host">
<?php if ($sku !== ''): ?>
<div
data-idealhouse-button-container
data-product-code="<?= $block->escapeHtmlAttr($sku) ?>"
></div>
<?php endif; ?>
</div>
Para un producto configurable, la SKU inicial de la página suele ser la SKU principal. Si los activos de ideal.house pertenecen a productos simples secundarios, deja el contenedor vacío inicialmente y complétalo solo después de resolver el producto simple seleccionado.
Cargar el SDK una sola vez#
Agrega un inicializador RequireJS local en tu módulo o tema. El inicializador crea el script externo y aplica todos los atributos de datos requeridos antes de adjuntarlo:
define([], function () {
'use strict';
return function () {
if (document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) return;
var 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.appendChild(script);
};
});
Inicialízalo de forma declarativa desde la plantilla, siguiendo el mecanismo recomendado por Adobe de text/x-magento-init:
<script type="text/x-magento-init">
{
"*": {
"Vendor_Module/js/idealhouse-loader": {}
}
}
</script>
Esto produce el mismo elemento SDK que el contrato mínimo sin colocar credenciales en una URL de RequireJS. Usa solo la Publishable Key en el código de la tienda.
SKU configurable seleccionada#
El widget estándar de producto configurable expone el estado de selección a través del propio componente de Magento, pero las anulaciones del tema cambian su estructura. Implementa un mixin RequireJS o un oyente dentro de tu módulo en el punto donde el tema resuelve un ID de producto simple; relaciona ese ID con su SKU a partir de JSON proporcionado por el servidor y reemplaza el host:
function renderIdealhouseSku(host, sku) {
host.replaceChildren();
if (!sku || !sku.trim()) return;
var container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku.trim();
host.appendChild(container);
}
Ese mixin y los datos de ID a SKU son trabajo del adaptador del cliente. No infieras la SKU secundaria a partir de etiquetas de opciones, ni documentes un evento o método de ideal.house que no forme parte del contrato público del SDK.
Contenido dinámico y caches#
Vuelve a crear el contenedor después de cambios de muestra, recomendaciones cargadas por AJAX, vista rápida o contenido específico del cliente que reemplace su host. El evento contentUpdated de Magento inicializa componentes de Magento en contenido inyectado; por sí mismo no proporciona una SKU seleccionada, por lo que tu adaptador aún debe resolver y renderizar el código correcto.
Después de los cambios de código, ejecuta los pasos de implementación apropiados para el entorno, limpia las caches de diseño/página completa/bloques y vuelve a implementar el contenido estático. Prueba con bundling/minificación de producción y con Varnish/CDN habilitados.
Importar datos del producto#
Mapea los SKUs de producto simple e hijos a sku de ideal.house. Usa Carga de producto, incluyendo importar, estado del trabajo, listado, actualizaciones, eliminación y guía de reintentos. Las exportaciones de Magento, llamadas de Admin API, trabajos cron y webhooks son adaptadores del cliente.
Verificar y eliminar#
Prueba los casos de producto simple, configurable, con SKU faltante, hijo deshabilitado y SKU desconocida. Confirma una única solicitud SDK, el mapeo exacto de SKU después de cada cambio de muestra/opción, comportamiento limpio en vista rápida y recomendaciones, diseño móvil, aciertos de cache, páginas de grupo de clientes y controles de consentimiento. Verifica que ninguna credencial secreta aparezca en el código fuente ni en los activos estáticos.
Para eliminar, deshabilita/desinstala el módulo personalizado o elimina los archivos de diseño/plantilla/RequireJS del tema hijo, vuelve a implementar el contenido estático, limpia las caches y verifica que la URL y los contenedores del SDK estén ausentes.