Prestashop: Personalizar página de mantenimiento

Al igual que es importante utilizar una página de coming soon en el desarrollo de una página web, no debemos desatender esta funcionalidad al desarrollar una Tienda Online.

Prestashop nos permite activar y desactivar el modo de mantenimiento de nuestra Tienda Online, bien si estamos realizando tareas de mantenimiento o si estamos en el periodo de construcción y queremos que se muestre un mensaje informando de que en breve tendremos nuestra Tienda Online operativa.

La pantalla y el  texto por defecto que nos aparece al activar el mantenimiento es:

«Tareas de mantenimiento en progreso. Nuestra tienda online estará inactiva temporalmente.»
«Lamentamos el inconveniente y le solicitamos probar más tarde.»

¿Que opciones de personalización y modificación de la página de mantenimiento tenemos?

Lo primero es modificar los textos que aparecen.

Para ello debemos ir al Backoffice y:

Localización/Traducción de mensajes

en traducciones del Front Office buscar (maintenance), donde tendremos 2 expresiones que coinciden con los dos textos que se muestran:

Mensaje 1: In order to perform website maintenance, our online store will be temporarily offline.

Mensaje 2: We apologize for the inconvenience and ask that you please try again later.

Aquí podemos personalizar los diferentes mensajes en función de los idiomas que tengamos instalados.

Edición del fichero FrontOffice maintenance.tpl

Otra opción más avanzada que tenemos es la edición del fichero maintenance.tpl que es el que nos mostrará el mensaje o pantalla de mantenimiento.

El fichero maintenance.tpl se encuentra dentro de la carpeta Themes de nuestra instalación de Prestashop

Edición de la imagen de fondo de la página de mantenimiento

La imagen del logo de Prestashop con la llave inglesa se encuentra establecida via css, por lo que si queremos modificarla tenemos que modificar el fichero css que la contiene.

La ruta del fichero css está en:

/themes/default/css/maintenance.css

y debemos modificar el apartado de background

#maintenance #message {
margin:0 20px;
padding:50px 310px 0 0;
height:360px;
background:url(../img/bg_maintenance.png) no-repeat 100% 0 #fff
}