Silverstripe OpenImmo Immobilien-Übertragung

Wenn Sie Ihre Website mit Silverstripe CMS betreiben, können Sie WP-ImmoMakler trotzdem als vollwertiges Immobilien-Plugin nutzen — durch eine iFrame-Integration. WP-ImmoMakler läuft dabei auf einer separaten WordPress-Installation, und die Immobilienansicht wird als iFrame in Ihre Silverstripe-Seite eingebettet.

Voraussetzungen

Sie benötigen eine WordPress-Installation, auf der WP-ImmoMakler läuft und Ihre Immobilien importiert werden. Diese Installation kann auf demselben Server wie Ihre Silverstripe-Website liegen oder auf einem separaten Host.

Für die Einbindung in Silverstripe brauchen Sie außerdem Zugriff auf die Templates Ihres Themes. Anders als in vielen anderen CMS fügen Sie den Code in Silverstripe nicht im Editor ein, sondern in einem Template — dazu gleich mehr unter Warum nicht über den Editor?. Wenn eine Agentur Ihre Silverstripe-Website betreut, geben Sie diese Anleitung am besten an sie weiter.

WP-ImmoMakler bringt für diesen Fall einen eigenen iFrame-Modus mit. Sie binden also kein selbst geschriebenes <iframe>-Tag ein, sondern aktivieren den Modus in den Einstellungen und übernehmen den Code, den WP-ImmoMakler Ihnen dort fertig anzeigt.

Schritt 1: iFrame-Modus aktivieren

Einstellungen öffnen

Öffnen Sie im Backend Ihrer WordPress-Installation (wp-admin) WP-ImmoMakler → Einstellungen → Darstellung.
iFrame-Modus aktivieren

Setzen Sie den Haken bei iFrame-Modus. Die Listen- und Detailansichten Ihrer Immobilien werden dann als iFrame-Inhalt bis zum Rand ausgegeben — ohne Header, Menü und Footer der WordPress-Installation. Bildergalerien öffnen sich in diesem Modus automatisch im Vollbild, damit sie nicht auf die Höhe des iFrames beschränkt bleiben.
iFrame-aufrufende Basis-URL eintragen

Tragen Sie unter iFrame-aufrufende Basis-URL die vollständige Basis-URL Ihrer Silverstripe-Website ein — also die Adresse der Website, in der das iFrame eingebunden wird, zum Beispiel https://www.example.com ohne Unterseite. Aus Sicherheitsgründen (CORS) funktioniert die automatische Anpassung der iFrame-Größe erst, wenn diese Angabe hinterlegt ist.
Speichern

Speichern Sie die Einstellungen.

WP-ImmoMakler Einstellungen: iFrame-Modus und iFrame-aufrufende Basis-URL

Schritt 2: Einbindungs-Code kopieren

Direkt unter der Option iFrame-Modus zeigt WP-ImmoMakler den fertigen Einbindungs-Code an — bereits mit den URLs Ihrer eigenen Installation. Ein Klick in das Feld markiert den gesamten Code, sodass Sie ihn kopieren können.

Der Code hat diesen Aufbau:

<style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
<iframe id="wp-immomakler-iframe" src="https://ihre-wordpress-domain.de/immobilien/" allowfullscreen></iframe>
<script type="module">import { initialize } from "https://ihre-wordpress-domain.de/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>

Er besteht aus drei Teilen: einem kleinen Stylesheet, das dem iFrame die volle Breite gibt, dem iFrame selbst und einem JavaScript-Modul, das die Höhe des iFrames laufend an den Inhalt anpasst. Dadurch entsteht kein zweiter Scrollbalken, und beim Wechsel von der Liste in die Detailansicht stellt sich die Höhe automatisch um.

Schritt 3: Einbindung in Silverstripe

Warum nicht über den Editor?

Silverstripe bereinigt den Inhalt des Editors beim Speichern und lässt nur ausdrücklich erlaubte HTML-Elemente stehen. <iframe>, <style> und <script> gehören standardmäßig nicht dazu — alle drei sind aber Teil des Einbindungs-Codes. Fügen Sie den Code in den Editor einer Seite ein, entfernt Silverstripe ihn beim Speichern ganz oder teilweise, und auf der Seite erscheint nichts oder ein iFrame ohne automatische Höhenanpassung.

Man könnte diese Elemente in der Editor-Konfiguration freischalten. Davon raten wir ab: Die Freigabe gilt dann für alle Redakteure und alle Seiten, und gerade <script> im Editor ist ein Sicherheitsrisiko. Die Einbindung über ein Template ist sauberer und lässt sich nicht versehentlich beim Bearbeiten einer Seite zerstören.

Den Code als Include anlegen

Legen Sie in Ihrem Theme ein Include-Template mit dem kopierten Code an, zum Beispiel unter themes/<ihr-theme>/templates/Includes/ImmoMaklerIframe.ss:

<style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
<iframe id="wp-immomakler-iframe" src="https://ihre-wordpress-domain.de/immobilien/" allowfullscreen></iframe>
<script type="module">import { initialize } from "https://ihre-wordpress-domain.de/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>

Ersetzen Sie dabei beide https://ihre-wordpress-domain.de-Adressen durch die Werte aus Ihren Einstellungen — am einfachsten, indem Sie den Code direkt aus den WP-ImmoMakler-Einstellungen einfügen.

Dieses Include können Sie nun auf zwei Arten ausgeben.

Variante A: Eigener Seitentyp für die Immobilienseite (empfohlen)

Mit einem eigenen Seitentyp legen Ihre Redakteure die Immobilienseite wie jede andere Seite im Seitenbaum an, und Silverstripe gibt das iFrame darauf automatisch aus.

Seitentyp anlegen

Legen Sie die Datei app/src/ImmobilienPage.php an:

<?php

class ImmobilienPage extends Page
{
    private static $table_name = 'ImmobilienPage';

    private static $singular_name = 'Immobilienseite';

    private static $description = 'Zeigt die Immobilien aus WP-ImmoMakler an.';
}

Layout-Template anlegen

Legen Sie das passende Layout-Template unter themes/<ihr-theme>/templates/Layout/ImmobilienPage.ss an. Am einfachsten kopieren Sie dafür das Layout-Template Page.ss Ihres Themes und ergänzen an der gewünschten Stelle das Include:
```
<h1>$Title</h1>
$Content
<% include ImmoMaklerIframe %>
```
So bleibt der Text, den Redakteure im Editor über der Immobilienliste eintragen, weiterhin sichtbar.
Datenbank aktualisieren

Bauen Sie die Datenbank neu auf und leeren Sie den Template-Cache — in Silverstripe CMS 6 mit vendor/bin/sake db:build --flush, in Silverstripe CMS 5 über den Aufruf von /dev/build?flush=1 im Browser.
Seite anlegen

Erstellen Sie im Silverstripe-Backend eine neue Seite vom Typ Immobilienseite und veröffentlichen Sie sie.

Variante B: Include in ein bestehendes Template einfügen

Soll das iFrame auf einer bestimmten, bereits vorhandenen Seite erscheinen, können Sie das Include auch direkt in das Template dieses Seitentyps schreiben:

<% include ImmoMaklerIframe %>

Laden Sie danach die Seite mit dem Parameter ?flush=1 neu, damit Silverstripe das geänderte Template einliest. Beachten Sie, dass das iFrame dann auf allen Seiten dieses Seitentyps erscheint.

Wenn die Höhe nicht automatisch angepasst wird

Bleibt das iFrame auf der Anfangshöhe stehen oder erscheint ein zweiter Scrollbalken, liegt es fast immer an einer dieser Ursachen:

Der Code wurde in den Editor statt in ein Template eingefügt, und Silverstripe hat das <script type="module"> beim Speichern entfernt. Prüfen Sie die Ausgabe im Quelltext der fertigen Seite.
Die iFrame-aufrufende Basis-URL ist leer, enthält einen Tippfehler oder eine Unterseite. Eingetragen gehört ausschließlich die Basis-URL inklusive https://.
Die eingetragene Basis-URL passt nicht zur tatsächlich aufgerufenen Adresse, etwa https://example.com statt https://www.example.com.
Ihre Silverstripe-Website sendet eine Content Security Policy, die Skripte oder iFrames von der Domain Ihrer WordPress-Installation nicht zulässt. Ergänzen Sie die Domain in diesem Fall unter script-src und frame-src.

Hosting-Optionen

Sie können das iFrame selbst einrichten oder von Ihrer Agentur konfigurieren lassen. Alternativ bieten wir einen Einrichtungsservice an, der die optische Integration des Plugins in das Layout Ihrer Silverstripe-Website übernimmt. Das iFrame kann auf Ihrem eigenen Server oder auf unserem Server betrieben werden.

Bei Fragen zur Einrichtung wenden Sie sich an unser Support-Team.