Integración de PrestaShop#
Usa un pequeño módulo PrestaShop para cargar Room Visualizer y renderizar un botón a partir de la referencia de producto o combinación actual.
Estado de verificación: documentación de módulo, hook y activo de PrestaShop 8/9 revisada el 7 de septiembre de 2026. No había una tienda de comercio disponible. El ejemplo usa hooks documentados comunes a Classic y Hummingbird, pero los temas de terceros pueden moverlos u omitirlos.
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 y mapeo#
Prepara una tienda de staging, acceso a desarrollo de módulos, Shop ID, Publishable Key y SKUs importados. Decide si el código de ideal.house proviene del reference del producto base o del reference de la combinación seleccionada. Cada combinación visualizable debe tener una referencia única y no vacía.
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>
El código de producto debe coincidir exactamente con el sku importado de ideal.house. Los IDs de PrestaShop no son intercambiables con las referencias.
Crear un punto de inserción de módulo#
Registra displayProductAdditionalInfo para colocar contenido en las páginas de producto y actionFrontControllerSetMedia para cargar tu adaptador local. Tanto Classic como Hummingbird documentan el hook de visualización en las plantillas de producto y vista rápida.
public function install()
{
return parent::install()
&& $this->registerHook('displayProductAdditionalInfo')
&& $this->registerHook('actionFrontControllerSetMedia');
}
public function hookActionFrontControllerSetMedia($params)
{
$this->context->controller->registerJavascript(
'module-' . $this->name . '-adapter',
'modules/' . $this->name . '/views/js/adapter.js',
array('position' => 'bottom', 'priority' => 200)
);
}
En el callback del hook de visualización, obtén el producto presentado, elige su referencia, asígnalo a Smarty y renderiza una plantilla de módulo. Escapa el valor en esa plantilla:
<div class="idealhouse-host">
{if $idealhouse_product_code}
<div
data-idealhouse-button-container
data-product-code="{$idealhouse_product_code|escape:'html':'UTF-8'}">
</div>
{/if}
</div>
No copies el módulo de PHP resumido como un módulo de producción completo: añade metadatos de módulo normales, compatibilidad de versiones, almacenamiento de configuración, comprobaciones de permisos y limpieza en el desinstalado.
Cargar el SDK una sola vez#
En adapter.js, crea el elemento SDK exacto después de leer los dos valores públicos desde la configuración de storefront sanificada de tu módulo:
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 = window.idealhousePublicConfig.shopId;
script.dataset.publishableKey = window.idealhousePublicConfig.publishableKey;
document.head.append(script);
}
Exponer idealhousePublicConfig con el mecanismo de definición/configuración de JavaScript soportado por PrestaShop. Nunca expongas un Client Secret.
Cambios de combinación y páginas dinámicas#
El ciclo de vida de actualización de producto del tema y los módulos de combinación de terceros varían. En el punto donde el tema activo haya resuelto la combinación seleccionada, pasa su referencia a este puente del cliente:
function renderIdealhouseCombination(host, reference) {
host.replaceChildren();
const code = String(reference || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
No adivines a partir de etiquetas mostradas. La vista rápida está incluida en ubicaciones de hook documentadas, pero verifica que el tema activo realmente renderice el hook. Para filtros AJAX o fragmentos de producto refrescados, deja que el hook cree un nuevo host o invoque el puente después del callback de actualización documentado del tema.
Importar datos de producto#
Mapea el reference de producto/combinación de PrestaShop al sku de ideal.house. Usa Carga de productos y las guías de Importación, Estado del trabajo, Listado, Actualizaciones, Eliminación y Errores y reintentos. Cualquier exportación de PrestaShop Webservice, cron o sincronización basada en hook es implementación del cliente.
Verificar y quitar#
Prueba un producto simple, cada combinación, referencias faltantes/duplicadas, un SKU de ideal.house desconocido, vista rápida, listas, navegación facetada, historial del navegador, móvil, contextos de venta por idioma/moneda, consentimiento y caché de producción. Confirma una solicitud SDK y igualdad exacta de reference/SKU.
Desinstala o deshabilita el módulo, asegura que sus hooks/configuración/activos se eliminen, vacía las cachés de Smarty y storefront, y verifica que la URL de SDK y el marcado data-idealhouse-* estén ausentes.