Silverstripe OpenImmo: transferencia de inmuebles

Si gestiona su sitio web con Silverstripe CMS, puede utilizar WP-ImmoMakler igualmente como un plugin inmobiliario completo, mediante una integración por iFrame. WP-ImmoMakler se ejecuta en ese caso en una instalación de WordPress independiente, y la vista de inmuebles se incrusta como iFrame en su página de Silverstripe.

Requisitos

Necesita una instalación de WordPress en la que se ejecute WP-ImmoMakler y a la que se importen sus inmuebles. Esa instalación puede estar en el mismo servidor que su sitio web Silverstripe o en un host independiente.

Para la integración en Silverstripe necesita además acceso a las plantillas de su tema. A diferencia de muchos otros CMS, en Silverstripe el código no se inserta en el editor, sino en una plantilla; más al respecto en breve, en Por qué no sirve el editor. Si una agencia se ocupa de su sitio web Silverstripe, lo mejor es que le transmita esta guía.

Para este caso, WP-ImmoMakler incorpora su propio modo iFrame. Por tanto, no escribe usted una etiqueta <iframe>: activa el modo en los ajustes y utiliza el código que WP-ImmoMakler le muestra allí, ya preparado.

Paso 1: activar el modo iFrame

Abrir los ajustes

En el backend de su instalación de WordPress (wp-admin), vaya a WP-ImmoMakler → Ajustes → Presentación.
Activar el modo iFrame

Marque la casilla Modo iFrame. Las vistas de listado y de detalle de sus inmuebles se mostrarán entonces como contenido de iFrame hasta el borde, sin la cabecera, el menú ni el pie de página de la instalación de WordPress. En este modo, las galerías de imágenes se abren automáticamente a pantalla completa para que no queden limitadas por la altura del iFrame.
Indicar la URL base que llama al iFrame

En URL base que llama al iFrame, introduzca la URL base completa de su sitio web Silverstripe, es decir, la dirección del sitio en el que se incrusta el iFrame; por ejemplo https://www.example.com, sin subpágina. Por motivos de seguridad (CORS), el ajuste automático del tamaño del iFrame solo funciona cuando este dato está guardado.
Guardar

Guarde los ajustes.

Ajustes de WP-ImmoMakler: modo iFrame y URL base que llama al iFrame

Paso 2: copiar el código de integración

Justo debajo de la opción Modo iFrame, WP-ImmoMakler muestra el código de integración ya preparado, con las URL de su propia instalación. Al hacer clic en el campo se selecciona todo el código para que pueda copiarlo.

El código tiene esta estructura:

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

Consta de tres partes: una pequeña hoja de estilos que da al iFrame todo el ancho, el propio iFrame y un módulo de JavaScript que ajusta continuamente la altura del iFrame al contenido. De este modo no aparece una segunda barra de desplazamiento y, al pasar del listado a la vista de detalle, la altura se adapta automáticamente.

Paso 3: integración en Silverstripe

Por qué no sirve el editor

Silverstripe depura el contenido del editor al guardar y solo conserva los elementos HTML expresamente permitidos. <iframe>, <style> y <script> no figuran entre ellos de forma predeterminada, y los tres forman parte del código de integración. Si pega el código en el editor de una página, Silverstripe lo elimina total o parcialmente al guardar, y en la página no aparece nada o aparece un iFrame sin ajuste automático de la altura.

Podría habilitar estos elementos en la configuración del editor, pero lo desaconsejamos: la autorización se aplicaría entonces a todos los redactores y a todas las páginas, y <script> en el editor supone un riesgo de seguridad. La integración mediante una plantilla es más limpia y no se puede estropear por accidente al editar una página.

Crear el código como include

En su tema, cree una plantilla include con el código copiado, por ejemplo en themes/<su-tema>/templates/Includes/ImmoMaklerIframe.ss:

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

Sustituya ambas direcciones https://su-dominio-wordpress.com por los valores de sus ajustes; lo más sencillo es pegar el código directamente desde los ajustes de WP-ImmoMakler.

Ahora puede mostrar este include de dos maneras.

Variante A: tipo de página propio para la página de inmuebles (recomendada)

Con un tipo de página propio, sus redactores crean la página de inmuebles como cualquier otra página del árbol del sitio, y Silverstripe muestra en ella el iFrame automáticamente.

Crear el tipo de página

Cree el archivo 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.';
}

Crear la plantilla de diseño

Cree la plantilla de diseño correspondiente en themes/<su-tema>/templates/Layout/ImmobilienPage.ss. Lo más sencillo es copiar la plantilla de diseño Page.ss de su tema y añadir el include en el lugar deseado:
```
<h1>$Title</h1>
$Content
<% include ImmoMaklerIframe %>
```
Así, el texto que los redactores introducen en el editor sobre el listado de inmuebles sigue siendo visible.
Actualizar la base de datos

Reconstruya la base de datos y vacíe la caché de plantillas: en Silverstripe CMS 6 con vendor/bin/sake db:build --flush, en Silverstripe CMS 5 llamando a /dev/build?flush=1 en el navegador.
Crear la página

En el backend de Silverstripe, cree una nueva página del tipo Immobilienseite y publíquela.

Variante B: añadir el include a una plantilla existente

Si el iFrame debe aparecer en una página concreta que ya existe, también puede escribir el include directamente en la plantilla de ese tipo de página:

<% include ImmoMaklerIframe %>

Después, recargue la página con el parámetro ?flush=1 para que Silverstripe lea la plantilla modificada. Tenga en cuenta que el iFrame aparecerá entonces en todas las páginas de ese tipo.

Si la altura no se ajusta automáticamente

Si el iFrame se queda en la altura inicial o aparece una segunda barra de desplazamiento, casi siempre se debe a una de estas causas:

El código se pegó en el editor en lugar de en una plantilla, y Silverstripe eliminó el <script type="module"> al guardar. Compruebe la salida en el código fuente de la página publicada.
La URL base que llama al iFrame está vacía, contiene una errata o incluye una subpágina. Únicamente debe indicarse la URL base, incluido https://.
La URL base indicada no coincide con la dirección realmente utilizada, por ejemplo https://example.com en lugar de https://www.example.com.
Su sitio web Silverstripe envía una Content Security Policy que no permite scripts ni iFrames del dominio de su instalación de WordPress. En ese caso, añada el dominio en script-src y frame-src.

Opciones de alojamiento

Puede configurar el iFrame usted mismo o encargar la configuración a su agencia. Como alternativa, ofrecemos un servicio de instalación que se encarga de la integración visual del plugin en el diseño de su sitio web Silverstripe. El iFrame puede funcionar en su propio servidor o en el nuestro.

Si tiene preguntas sobre la instalación, diríjase a nuestro equipo de soporte.