Silverstripe OpenImmo : transfert de biens immobiliers

Si vous exploitez votre site web avec Silverstripe CMS, vous pouvez tout de même utiliser WP-ImmoMakler comme plugin immobilier à part entière — grâce à une intégration via iFrame. WP-ImmoMakler fonctionne alors sur une installation WordPress distincte, et la vue immobilière est intégrée sous forme d’iFrame dans votre page Silverstripe.

Prérequis

Vous avez besoin d’une installation WordPress sur laquelle WP-ImmoMakler fonctionne et dans laquelle vos biens immobiliers sont importés. Cette installation peut se trouver sur le même serveur que votre site Silverstripe ou sur un hébergement distinct.

Pour l’intégration dans Silverstripe, vous avez également besoin d’un accès aux templates de votre thème. Contrairement à beaucoup d’autres CMS, dans Silverstripe le code ne s’insère pas dans l’éditeur, mais dans un template — nous y revenons ci-dessous, dans Pourquoi l’éditeur ne convient pas. Si une agence s’occupe de votre site Silverstripe, le mieux est de lui transmettre ce guide.

Pour ce cas de figure, WP-ImmoMakler dispose de son propre mode iFrame. Vous n’écrivez donc pas vous-même une balise <iframe> : vous activez le mode dans les paramètres et reprenez le code que WP-ImmoMakler y affiche, prêt à l’emploi.

Étape 1 : activer le mode iFrame

Ouvrir les paramètres

Dans le back-office de votre installation WordPress (wp-admin), rendez-vous dans WP-ImmoMakler → Paramètres → Affichage.
Activer le mode iFrame

Cochez Mode iFrame. Les vues liste et détail de vos biens immobiliers sont alors affichées comme contenu d’iFrame jusqu’au bord, sans l’en-tête, le menu ni le pied de page de l’installation WordPress. Dans ce mode, les galeries d’images s’ouvrent automatiquement en plein écran afin de ne pas être limitées par la hauteur de l’iFrame.
Saisir l’URL de base appelant l’iFrame

Dans le champ URL de base appelant l’iFrame, indiquez l’URL de base complète de votre site Silverstripe, c’est-à-dire l’adresse du site dans lequel l’iFrame est intégré, par exemple https://www.example.com sans sous-page. Pour des raisons de sécurité (CORS), l’adaptation automatique de la taille de l’iFrame ne fonctionne qu’une fois cette information enregistrée.
Enregistrer

Enregistrez les paramètres.

Paramètres WP-ImmoMakler : mode iFrame et URL de base appelant l'iFrame

Étape 2 : copier le code d’intégration

Juste en dessous de l’option Mode iFrame, WP-ImmoMakler affiche le code d’intégration prêt à l’emploi, contenant déjà les URL de votre propre installation. Un clic dans le champ sélectionne l’ensemble du code, que vous pouvez alors copier.

Le code se présente ainsi :

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

Il se compose de trois parties : une petite feuille de style qui donne à l’iFrame toute sa largeur, l’iFrame lui-même et un module JavaScript qui adapte en continu la hauteur de l’iFrame à son contenu. Aucune seconde barre de défilement n’apparaît donc, et la hauteur s’ajuste automatiquement lors du passage de la liste à la vue détaillée.

Étape 3 : intégration dans Silverstripe

Pourquoi l’éditeur ne convient pas

Silverstripe nettoie le contenu de l’éditeur à l’enregistrement et ne conserve que les éléments HTML expressément autorisés. <iframe>, <style> et <script> n’en font pas partie par défaut — or les trois composent le code d’intégration. Si vous collez le code dans l’éditeur d’une page, Silverstripe le supprime en tout ou en partie à l’enregistrement, et la page n’affiche rien, ou un iFrame sans adaptation automatique de la hauteur.

On pourrait autoriser ces éléments dans la configuration de l’éditeur. Nous le déconseillons : l’autorisation vaudrait alors pour tous les rédacteurs et toutes les pages, et <script> dans l’éditeur représente un risque de sécurité. L’intégration via un template est plus propre et ne peut pas être détruite par mégarde lors de la modification d’une page.

Créer le code sous forme d’include

Dans votre thème, créez un template d’include contenant le code copié, par exemple dans themes/<votre-theme>/templates/Includes/ImmoMaklerIframe.ss :

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

Remplacez les deux adresses https://votre-domaine-wordpress.fr par les valeurs figurant dans vos paramètres — le plus simple est de coller le code directement depuis les paramètres de WP-ImmoMakler.

Vous pouvez désormais afficher cet include de deux manières.

Variante A : un type de page dédié pour la page des biens immobiliers (recommandée)

Avec un type de page dédié, vos rédacteurs créent la page des biens immobiliers comme n’importe quelle autre page de l’arborescence, et Silverstripe y affiche automatiquement l’iFrame.

Créer le type de page

Créez le fichier app/src/ImmobilienPage.php :

<?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.';
}

Créer le template de mise en page

Créez le template de mise en page correspondant dans themes/<votre-theme>/templates/Layout/ImmobilienPage.ss. Le plus simple est de copier le template de mise en page Page.ss de votre thème et d’ajouter l’include à l’endroit souhaité :
```
<h1>$Title</h1>
$Content
<% include ImmoMaklerIframe %>
```
Le texte que les rédacteurs saisissent dans l’éditeur au-dessus de la liste des biens immobiliers reste ainsi visible.
Mettre à jour la base de données

Reconstruisez la base de données et videz le cache des templates — dans Silverstripe CMS 6 avec vendor/bin/sake db:build --flush, dans Silverstripe CMS 5 en appelant /dev/build?flush=1 dans le navigateur.
Créer la page

Dans le back-office de Silverstripe, créez une nouvelle page de type Immobilienseite et publiez-la.

Variante B : ajouter l’include à un template existant

Si l’iFrame doit apparaître sur une page précise déjà existante, vous pouvez aussi écrire l’include directement dans le template de ce type de page :

<% include ImmoMaklerIframe %>

Rechargez ensuite la page avec le paramètre ?flush=1 pour que Silverstripe prenne en compte le template modifié. Notez que l’iFrame apparaîtra alors sur toutes les pages de ce type.

Si la hauteur n’est pas adaptée automatiquement

Si l’iFrame reste à sa hauteur initiale ou qu’une seconde barre de défilement apparaît, la cause est presque toujours l’une des suivantes :

Le code a été collé dans l’éditeur au lieu d’un template, et Silverstripe a supprimé le <script type="module"> à l’enregistrement. Vérifiez le rendu dans le code source de la page publiée.
L’URL de base appelant l’iFrame est vide, contient une faute de frappe ou une sous-page. Seule l’URL de base, https:// compris, doit y figurer.
L’URL de base saisie ne correspond pas à l’adresse réellement appelée, par exemple https://example.com au lieu de https://www.example.com.
Votre site Silverstripe envoie une Content Security Policy qui n’autorise pas les scripts ou iFrames du domaine de votre installation WordPress. Ajoutez alors le domaine sous script-src et frame-src.

Options d’hébergement

Vous pouvez configurer l’iFrame vous-même ou en confier la configuration à votre agence. Nous proposons également un service d’installation qui prend en charge l’intégration visuelle du plugin dans la mise en page de votre site Silverstripe. L’iFrame peut fonctionner sur votre propre serveur ou sur le nôtre.

Pour toute question sur l’installation, adressez-vous à notre équipe d’assistance.