Integración de Shopware 6#
Añade Room Visualizer a través de un plugin Shopware 6 o tema personalizado y usa el número de producto del canal de ventas seleccionado como el código de producto de ideal.house.
Estado de verificación: documentación de storefront de Shopware revisada el 7 de septiembre de 2026. No había una tienda de cliente disponible. Esta vía apunta al storefront Twig estándar de Shopware 6; los storefronts headless/componibles necesitan su adaptador específico del framework.
Antes de cargar el SDK: abre Panel de control → Configuración, añade tu origen de tienda en línea a Allowed Origins (CORS) y haz clic en Save. Incluye el hostname publicado y cualquier origen de vista previa o staging que utilices; separa varios orígenes con comas. Consulta pasos de configuración.
Requisitos previos#
Prepara una tienda de desarrollo, acceso al código fuente del plugin/tema, un canal de ventas de staging, Shop ID, Publishable Key y números de producto importados. Trabaja en un plugin o tema hijo en lugar de modificar el núcleo de Storefront o un tema de proveedor.
Contrato mínimo de 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>
Mapea exactamente el productNumber de Shopware al sku de ideal.house. El SDK no consulta la Store API de Shopware.
Extender la plantilla de producto#
En tu plugin, extiende la plantilla/bloque Twig usado cerca del widget de compra en tu versión instalada de Shopware. Renderiza un host usando el producto actual del canal de ventas:
{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}
{% block buy_widget_buy_container %}
{{ parent() }}
{% if page.product.productNumber %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ page.product.productNumber|escape }}">
</div>
</div>
{% endif %}
{% endblock %}
Los nombres de bloque y el contexto pueden cambiar entre versiones y temas de Shopware. Inspecciona la plantilla de la versión activa, escoge el bloque de extensión más restringido y confirma que page.product esté disponible allí. Para una tarjeta de producto, usa el contexto de producto de la tarjeta.
Cargar el SDK#
Los plugins de Shopware pueden agregar JavaScript de storefront y sobrescribir plantillas. Añade una entrada local de storefront que cree el script SDK una sola vez:
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);
}
Compila los activos de storefront y activa el plugin/tema usando el proceso para tu versión de Shopware. Usa valores de configuración para las credenciales en un plugin reutilizable; renderiza solo el Publishable Key seguro para el navegador.
Variantes y contenido dinámico#
Shopware a menudo representa variantes comprables como productos distintos con su propio productNumber y URL canónico. En una navegación completa, el Twig renderizado en el servidor emite naturalmente el nuevo código. Si tu tema cambia variantes sin recargar la página, conecta su callback de finalización documentado a:
function replaceIdealhouseProduct(host, productNumber) {
host.replaceChildren();
const code = String(productNumber || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Este puente es de propiedad del cliente porque los temas y los plugins de variantes de terceros difieren. Las listas cargadas a través de filtros/componentes off-canvas deben renderizar o recrear contenedores limpios después de que llegue el nuevo DOM. No clones hijos generados por el SDK.
Importación de producto#
Exporta cada productNumber de producto/variante de Shopware como sku de ideal.house. Importa mediante Carga de productos, luego usa Importar productos, Estado del trabajo, Listar productos, Actualizar productos, Eliminar producto y Errores y reintentos.
Cualquier sincronización de Store API/Admin API, tarea programada o integración de Flow Builder/webhook es código separado del cliente.
Verificar y quitar#
Prueba un producto padre, cada variante visualizable, números de producto faltantes y desconocidos, listas, filtros, off-canvas/vista rápida, Back/Forward del navegador, diseño móvil, comportamiento de caché/proxy y todos los canales de ventas/dominios relevantes. Confirma una solicitud SDK y coincidencia exacta de productNumber/SKU.
Para quitarlo, desactiva/desinstala el plugin o elimina el Twig del tema hijo y el JavaScript, reconstruye los activos de storefront, vacía las cachés y verifica que no quede ninguna solicitud SDK ni contenedor.