Integración de OpenCart#
Agrega Room Visualizer a través de una extensión de OpenCart 4 o un tema personalizado y asigna un código de producto de tienda estable al catálogo de ideal.house.
Estado de verificación: La documentación de la extensión de OpenCart 4 fue revisada el 7 de septiembre de 2026. No había una tienda de prueba disponible. Las extensiones de OpenCart 3 y los temas de terceros utilizan diferentes rutas y convenciones de eventos; adapta esta guía a la versión mayor instalada.
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.
Requisitos previos y elección de código#
Prepara una tienda de staging, acceso para desarrollo de extensión/tema, Shop ID, Publishable Key, y registros de prueba importados. El núcleo de OpenCart comúnmente expone model en plantillas de producto, mientras que SKU puede requerir trabajo de controlador/extensión dependiendo de la versión y el tema. Elige un valor y úsalo consistentemente como ideal.house sku.
No edites archivos de catálogo del núcleo directamente. Empaqueta los cambios como una extensión de OpenCart 4 o mantén los cambios en un tema personalizado con control de versiones.
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 Product Code debe ser igual al catálogo ideal.house sku caracter por caracter.
Renderiza el contenedor del producto#
Extiende la plantilla de producto activa a través de tu extensión. Si decides mapear el campo OpenCart model al ideal.house sku, coloca esto cerca de las acciones del producto:
{% if model %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ model }}">
</div>
</div>
{% endif %}
El autoescape de Twig depende de la configuración del entorno; asegúrate de que el valor elegido tenga escape de atributo HTML. Si eliges el campo SKU real, agrega ese valor sanitizado a los datos de plantilla del controlador en tu extensión y renderízalo en lugar de model.
Carga el SDK una sola vez#
Agrega un activo de storefront JavaScript a través del mecanismo de extensión/tema. Debería crear un script con los atributos requeridos:
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);
}
Guarda los dos valores públicos en la configuración de la extensión y renderízalos de forma segura. Nunca coloques un ideal.house Client Secret en JavaScript, Twig, registros de extensión, o HTML en caché.
Opciones, variantes y renderizado dinámico#
Las opciones de OpenCart no tienen una correspondencia universal uno-a-uno con variantes que contengan SKU. Si tu tienda utiliza una extensión de opción/variante, integra con el callback de variante resuelta documentado y el modelo de datos de esa extensión. Reemplaza el host solo cuando este proporcione el código seleccionado exacto:
function renderIdealhouseCode(host, productCode) {
host.replaceChildren();
const code = String(productCode || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Este es código adaptador del cliente; no hay un evento universal de variante de OpenCart en esta guía. Para búsquedas AJAX, filtros de categoría, popups y vista rápida, renderiza contenedores limpios en las plantillas de la extensión o llama al puente desde su callback de finalización documentado. Nunca copies hijos producidos por el SDK.
Importar productos#
Exporta el OpenCart model/SKU elegido para cada elemento visualizable y asignalo al ideal.house sku. Usa Carga de productos y luego sigue las guías de Importar productos, Estado del trabajo, Listar productos, Actualizar productos, Eliminar producto y Errores y reintentos.
Las llamadas de la API de Admin de OpenCart, exportaciones programadas, listeners de eventos y webhooks son trabajo de integración del cliente.
Verificar y eliminar#
Prueba productos simples, cada combinación de opciones soportada, códigos faltantes y duplicados, SKUs de ideal.house desconocidos, páginas de categoría/búsqueda, vista rápida, navegación con Back/Forward del navegador, diseño móvil, múltiples tiendas, idiomas/monedas, consentimiento y minificación/caché de producción. Confirma exactamente una solicitud de SDK y una coincidencia exacta del código.
Para eliminar, desactiva/desinstala la extensión o elimina la sobrescritura del tema personalizado y el activo, refresca las modificaciones/eventos de OpenCart, limpia las cachés del tema/CDN y verifica que la solicitud de SDK y los contenedores estén ausentes.