TYPO3 OpenImmo : transfert de biens immobiliers

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

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 TYPO3 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

1. Ouvrir les paramètres

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

2. 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.

3. 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 TYPO3, 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.

4. Enregistrer

   Enregistrez les paramètres.

É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.

Attention

Copiez toujours le code depuis vos paramètres et non depuis cette documentation : les URL de votre propre installation WordPress n’y figurent qu’à cet endroit.

Étape 3 : intégration dans TYPO3

Dans TYPO3, le code peut être intégré de différentes manières.

Via un élément de contenu HTML

1. Créer l’élément de contenu

   Sur la page TYPO3 souhaitée, créez un nouvel élément de contenu de type HTML.

2. Insérer le code

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

3. Enregistrer et publier

   Enregistrez l’élément de contenu et publiez la page.

Via TypoScript

Vous pouvez également générer le code via TypoScript :

lib.immomakler = TEXT
lib.immomakler.value (
  <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.

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 :

• 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.
• TYPO3 ou une extension supprime le <script type="module"> de l’élément de contenu. Vérifiez dans ce cas le rendu dans le code source de la page publiée.

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 TYPO3. 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.

---

Cela pourrait aussi vous intéresser

• Intégration via iFrame
• Contao OpenImmo : transfert de biens immobiliers
• Joomla OpenImmo : transfert de biens immobiliers
• Installation du plugin