PrestaShop-Integration#
Verwenden Sie ein kleines PrestaShop-Modul, um Room Visualizer zu laden und eine Schaltfläche anhand der aktuellen Produkt- oder Kombinationsreferenz zu rendern.
Überprüfungsstatus: PrestaShop 8/9-Modul, Hook und Asset-Dokumentation geprüft am 7. September 2026. Kein Händler-Shop war verfügbar. Das Beispiel verwendet dokumentierte Hooks, die für Classic und Hummingbird gemeinsam sind, aber Drittanbieter-Themes können diese verschieben oder weglassen.
Vor dem Laden des SDK: Öffnen Sie Dashboard → Einstellungen, fügen Sie den Origin Ihres Onlineshops zu Allowed Origins (CORS) hinzu und klicken Sie auf Speichern. Berücksichtigen Sie den veröffentlichten Hostnamen sowie alle verwendeten Vorschau- oder Staging-Origins; trennen Sie mehrere Origins durch Kommas. Siehe Konfigurationsschritte.
Voraussetzungen und Zuordnung#
Bereiten Sie einen Staging-Shop, Modul-Entwicklungszugriff, Shop ID, Publishable Key sowie importierte SKUs vor. Entscheiden Sie, ob der ideal.house-Code aus der Basisprodukt-reference oder der ausgewählten Kombination-reference stammt. Jede visualisierbare Kombination sollte eine eindeutige, nicht-leere Referenz besitzen.
Minimale SDK-Schnittstelle#
<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>
Der Product Code muss exakt mit dem importierten ideal.house-sku übereinstimmen. PrestaShop-IDs sind nicht austauschbar mit Referenzen.
Eine Modul-Einfügungsstelle erstellen#
Registrieren Sie displayProductAdditionalInfo, um Inhalte auf Produktseiten zu platzieren, und actionFrontControllerSetMedia, um Ihren lokalen Adapter zu laden. Sowohl Classic als auch Hummingbird dokumentieren den Display-Hook in Produkt- und Schnellansichtsvorlagen.
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)
);
}
Rufen Sie im Callback des Anzeige-Hooks das präsentierte Produkt ab, wählen Sie dessen Referenz, weisen Sie sie Smarty zu und rendern Sie eine Modulvorlage. Maskieren Sie den Wert in dieser Vorlage:
<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>
Übernehmen Sie den verkürzten PHP-Code nicht als vollständiges Produktionsmodul. Ergänzen Sie die üblichen Modulmetadaten, Versionskompatibilität, Konfigurationsspeicherung, Berechtigungsprüfungen und Bereinigung bei der Deinstallation.
Laden Sie das SDK einmalig#
Erstellen Sie in adapter.js das exakte SDK-Element, nachdem Sie die beiden öffentlichen Werte aus der gesäuberten Storefront-Konfiguration Ihres Moduls gelesen haben:
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);
}
Stellen Sie idealhousePublicConfig mit dem von PrestaShop unterstützten JavaScript-Definition/Konfigurationsmechanismus bereit. Geben Sie niemals ein Client Secret frei.
Kombinationsänderungen und dynamische Seiten#
Der Produkt-Refresh-Lebenszyklus des Themes sowie Drittanbieter-Kombinationsmodule variieren. Übergeben Sie an dem Punkt, an dem das aktive Theme die ausgewählte Kombination aufgelöst hat, dessen Referenz an diese Kundenbridge:
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);
}
Leiten Sie den Wert nicht aus angezeigten Beschriftungen ab. Die dokumentierten Hook-Positionen umfassen Schnellansichten; prüfen Sie aber, dass das aktive Theme den Hook tatsächlich rendert. Lassen Sie bei AJAX-Filtern oder aktualisierten Produktfragmenten den Hook ein neues Hostelement erstellen oder rufen Sie die Anbindung nach dem dokumentierten Aktualisierungs-Callback des Themes auf.
Produktdaten importieren#
Ordnen Sie PrestaShop Produkt-/Kombinations-reference zu ideal.house sku zu. Verwenden Sie Produktimport sowie die Anleitungen für Import, Auftragsstatus, Auflisten, Aktualisierungen, Löschen und Fehler und Wiederholungsversuche. Jeder PrestaShop Webservice-Export, Cronjob oder die Hook-basierte Synchronisation ist Kundenimplementierung.
Überprüfung und Entfernen#
Testen Sie ein einfaches Produkt, jede Kombination, fehlende/doppelte Referenzen, eine unbekannte ideal.house-SKU, Schnellansicht, Listen, facettenreiche Navigation, Browserverlauf, Mobilgeräte, Sprach-/Währungs-Verkaufskontexte, Zustimmung sowie Produktions-Caching. Bestätigen Sie eine einzelne SDK-Anfrage sowie exakte reference/SKU-Gleichheit.
Deinstallieren oder deaktivieren Sie das Modul, stellen Sie sicher, dass seine Hooks/Konfiguration/Assets entfernt sind, löschen Sie Smarty- und Storefront-Caches und vergewissern Sie sich, dass das SDK-URL sowie data-idealhouse-*-Markup fehlen.