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:
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..)
Y que podemos verificar que la estamos usando en el fichero: /themes/classic/templates/_partials/head.tpl aquí:
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:
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:
Lo que estamos haciendo es llamar a la función padre (parent::getTemplateVarPage();) y 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.
Y buscamos la frase: “La página que busca no se ha encontrado.”
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
Que corresponde a la parte que muestro en la siguiente captura:
Por lo tanto, si vamos al fichero: /themes/classic/templates/errors/not-found.tpl
Vemos el siguiente código:
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)
Que corresponde a la parte que señalo en la siguiente captura:
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
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.
Por eso vemos el buscador, tal como podéis ver en la siguiente captura:
Por último, tenemos otro bloque denominado -> hook_not_found donde tenemos disponible otro hook, en este caso denominado -> 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.”
Por ejemplo, añadimos en el fichero: /themes/classic/assets/css/custom.css la siguiente instrucción:
#pagenotfound h1 {
color: #9e1b33;
font-size: 30px;
}
Hemos cambiado el título a un color rojizo y con un tamaño de fuente de 30px.
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.
