Personalizar página 404 de Prestashop 1.7

En este TIP vamos a comentar a grosso modo algunos de los ficheros y aspectos implicados en la página 404 de Prestashop 1.7

Ficheros implicados:

Controlador de la pagina 404 (página no encontrada):

/controllers/front/PageNotFoundController.php

Dentro de: initContent  generación del código status del error 404, y además se indica el TPL que se mostrara.

Dentro de getTemplateVarPage en esta ocasión se sobrescribe el valor de la variable page_title que explicaremos posteriormente (no confundir con la del meta título)

TPLS implicados:

/themes/classic/templates/errors/404.tpl -> Página genérica del error 404 que incluye un include hacia el fichero: /themes/classic/templates/errors/not-found.tpl -> TPL con dos hooks disponibles (displayNotFound y displaySearch)


En el fichero:

/themes/classic/templates/errors/404.tpl 

Observamos el siguiente contenido:

Pasamos a estudiar el bloque page_title y el bloque page_content_container

El bloque page_title

corresponde a la siguiente parte de la página 404:

Bloque título

Donde vemos que está imprimiendo el contenido de la variable:

{$page.title}

No confundir con el valor de la variable: {$page.meta.title} que es la que muestra el valor del meta título de la página 404

Que podemos configurar en la pestaña Parámetros -> Trafico & SEO y URLS (junto con la meta descripción, url amigable, etc..)

Meta título

Y que podemos verificar que la estamos usando en el fichero: /themes/classic/templates/_partials/head.tpl aquí:

Meta título

Al final entre y una cosa y otra me voy por los laureles, lo que quiero decir es que no confundamos las variables, y que la variable (y su valor):

{$page.title}

está viniendo de otro sitio que comentamos a continuación:

Al acceder al controlador: /controllers/front/PageNotFoundController.php observamos dentro de la función getTemplateVarPage la construcción de la variable (en esta ocasión) que estamos usando en el fichero TPL:

getTemplateVarPage

Quizás es un poco confuso, pero paso a explicarlo brevemente:

$page = parent::getTemplateVarPage();

El controlador hereda de FrontController y en FrontController está definida la función getTemplateVarPage() que entre otros aspectos vemos dentro de la función getTemplateVarPage() este código:

Código

Lo que estamos haciendo es llamar a la función padre (parent::getTemplateVarPage();)posteriormente en esta instrucción:

$page['title'] = $this->trans('The page you are looking for was not found.', array(), 'Shop.Theme.Global');

Sobreescribimos el valor del título.

Recordar que este título lo podemos traducir/cambiar/personalizar sin problemas en la pestaña Internacional -> Traducciones -> Modificar Traducciones en los diferentes de idiomas e la tienda.

Tipo de traducción -> Traducción de temas
Seleccione su tema -> Plantilla que estamos usando (en nuestro caso: classic)
Seleccione su idioma -> Como queremos personalizar la frase para el idioma español, señalo: Español

Pulsamos en Modificar.

Modificar traducción

Y buscamos la frase: “La página que busca no se ha encontrado.

Cambiar texto

Simplemente escribimos nuestra frase personalizada y guardamos los cambios.

Seguimos avanzando dentro del fichero:
/themes/classic/templates/errors/404.tpl donde vemos que en el bloque: page_content_container tenemos un include hacia el TPL not-found.tpl

Include

Que corresponde a la parte que muestro en la siguiente captura:

Visualización include

Por lo tanto, si vamos al fichero /themes/classic/templates/errors/not-found.tpl

Vemos el siguiente código:

not-found.tpl

Dentro del block page_content tenemos disponible:

Dos palabras claves/textos (yo lo suelo denominar palabras claves porque nos sirven para luego poder traducir los textos en los diferentes idiomas de la tienda)

l s

Que corresponde a la parte que señalo en la siguiente captura:

Textos
Textos

Recordar que estos textos se pueden cambiar/modificar en los distintos idiomas de la tienda en la pestaña Internacional -> Localización -> Modificar Traducciones

Dentro del bloque -> block seach  tenemos disponible el hook -> displaySearch

displaySearch
displaySearch

En el hook -> displaySearch si vamos a la pestaña Diseño -> posiciones de los módulos del panel, veremos que tenemos cargado el módulo del buscador.

Módulos instalados en displaySearch

Por eso vemos el buscador, tal como podéis ver en la siguiente captura:

Buscador

Por último, tenemos otro bloque denominado -> hook_not_found donde tenemos  disponible otro hook, en este caso denominado -> displayNotFound

displayNotFound
displayNotFound

Si realmente queréis personalizar la página 404 en Prestashop 1.7, os he dicho básicamente los ficheros que existen, ya depende de vosotros como queréis personalizarlo, si añadiendo nuevos hooks y en esos hooks añadir lo que veáis  conveniente o intentar añadir algún módulo a los hooks disponibles o editar los TPLS a mano y definir la estructura que creáis conveniente.  Tener cuidado con el include del que hemos hablado porque posiblemente se usa en otras partes de la tienda.

No he hablado de los estilos (del css) que si nos fijamos en el fichero theme.css descomprimido y buscáis las reglas relacionadas con #pagenotfound veréis lo que tenéis disponible. Recordar que, por ejemplo, desde botón derecho ratón -> inspeccionar elemento en Chrome podéis ver fácilmente las líneas CSS, tener cuidado al tocarlas y no tocar líneas generales que puedan afectar a otras partes de la tienda. Recordar que si solo quieres que se aplique a la página 404 los estilos deben ir con #pagenotfound por delante. Por otro lado, recordar que en el fichero: /themes/classic/assets/css/custom.css podéis crear vuestras propias reglas.

Un ejemplo, cambiar tamaño y color del título “La página que busca no se ha encontrado.”

La página que busca no se ha encontrado

Por ejemplo, añadimos en el fichero: /themes/classic/assets/css/custom.css la siguiente instrucción:

#pagenotfound h1 {
color: #9e1b33;
font-size: 30px;
}
custom.css

Hemos cambiado el título a un color rojizo y con un tamaño de fuente de 30px.

Tamaño y color cambiado

Este documento  está construido bajo Prestashop 1.7.2.4, es muy posible que en futuras variantes de Prestashop 1.7.X esta explicación no sea válida.