Joomla OpenImmo : transfert de biens immobiliers

Si vous exploitez votre site web avec Joomla, 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 Joomla.

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 Joomla ou sur un hébergement distinct.

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 Joomla, 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 Joomla

Via l’éditeur d’articles de Joomla (TinyMCE)

Ouvrir l’article

Dans le back-office de Joomla, ouvrez l’article ou la page souhaitée.
Passer en vue code source

Passez en vue code source de l’éditeur (bouton Code source ou </> dans l’éditeur TinyMCE).
Insérer le code

Collez le code copié depuis les paramètres de WP-ImmoMakler.
Enregistrer et publier

Enregistrez et publiez l’article.

Via un module HTML personnalisé

Vous pouvez également utiliser un module HTML personnalisé :

Créer le module

Dans le back-office de Joomla, allez dans Extensions → Modules et créez un nouveau module de type HTML personnalisé.
Insérer le code

Collez le code copié dans le module.
Attribuer une position

Attribuez au module la position souhaitée dans le template et publiez-le.

Adapter les filtres de texte de Joomla

Par défaut, Joomla supprime certains éléments HTML des articles, dont <iframe>, <style> et <script>. Ces trois éléments font partie du code d’intégration. Adaptez donc, sous Système → Configuration globale → Filtres de texte, les réglages de filtrage de votre groupe d’utilisateurs afin que ces éléments soient autorisés. Sinon, Joomla supprime le code à l’enregistrement et la page n’affiche rien, ou un iFrame sans adaptation automatique de la hauteur.

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 trois suivantes :

Le filtre de texte de Joomla a supprimé le <script type="module"> lors de l’enregistrement. Vérifiez dans ce cas 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.

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.

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