Prestashop tiene herramientas en su plataforma que permite desactivar el acceso a la página de comercio electrónico mientras está en modo mantenimiento temporal.

Para este tutorial la versión prestashop 1.6 será utilizada como ejemplo para modificar los textos, el fondo de imagen y añadir otros elementos como un contador en tiempo real para que indique al usuario cuánto tiempo restante deberá esperar para acceder de nuevo a la tienda en Prestashop.

Recomendamos utilizar estas opciones cuando se trabaja un nuevo lanzamiento de pagina web en Prestashop.

1- Activar el modo de mantenimiento

Buscamos la opción de Preferencias => Mantenimiento en el panel izquierdo.
Entramos a la opción general de desactivación de la tienda guardamos los cambios.
Es importante cambiar esta opción una vez se hayan hecho todos los cambios a la tienda para volver a tener acceso a la web principal.

2- Modificar los textos de la página web

Para modificar los textos a mostrar nos ubicamos en el backend de prestashop en las opciones Localización => Traducción de Mensajes o en inglés Localization => Translation.
Escogemos la traducciones del front office y seguido escogemos el tema usado, idioma y damos click en el botón Modificar, se mostrará una lista de las distintas páginas, escogemos la sección de Mantenimiento o Maintenance, se muestran 3 opciones de traducción.

3- Cambiar o modificar la imagen de fondo

Es posible cambiar la imagen por defecto que se muestra al activar el modo mantenimiento en Prestashop. Para encontrar esta imagen nos dirigimos a la siguiente ruta:

/themes/temautilizado/img/bg_maintenance.png

En esta ruta reemplazamos “Temautilizado” por el nombre del tema que está instalado en el directorio de nuestra cuenta de hosting.
*Recuerda que en el “temautilizado” esta el nombre del tema instalado o usado.
Aqui se debe reemplazar esta imagen por la actual. Recuerda que la imagen debe estan en .png.

4- Script para mostrar cuenta regresiva

Para mostrar la cuenta regresiva en la página de mantenimiento utilizaremos el codigo de countdownjs.org, este archivo debe descomprimirse y colocarse en la siguiente ruta:

/themes/temautilizado/js/countdown.js

Referencia del archivo countdown.js
Este código debe insertarse antes de la etiqueta de cierre head, es importante haberlo descargado previamente y copiarlo en la carpeta js del tema que estemos usando.

<script src=»{$js_dir}countdown.js»></script>

Etiqueta html de reemplazo
Con el ID de la esta etiqueta de le indica al script que utilice el contenedor para colocar la información de cuenta regresiva.

<h2 id=»countdown-holder»></h2>

Código script y cambio de fecha
El siguiente código debe ir en la última parte del código antes de la etiqueta del cierre body, debemos en esta sección cambiar la fecha.

<script> 
var clock = document.getElementById("countdown-holder") 
, targetDate = new Date(2020, 00, 01);

clock.innerHTML = countdown(targetDate).toString(); 
setInterval(function(){ 
clock.innerHTML = countdown(targetDate).toString(); 
}, 1000); 
</script>

Ya estarán listos todos los ajustes necesarios para modificar la página de mantenimiento en Prestashop.