En la plantilla por defecto CLASSIC de Prestashop 1.7 no se muestra el email de tienda en la cabecera (header) y creemos que sería buena idea que estuviera bien visible para nuestros clientes justo después del teléfono. Por tanto hoy os enseñaremos como mostrar el email en la cabecera de Prestashop 1.7.

Añadir email en cabecera Prestashop 1.7

Para conseguir añadir el email de contacto de nuestra tienda en el header de Prestashop 1.7 tenemos que editar el archivo nav.tpl que encontraréis en la ruta;

/ themes/classic/modules/ps_contactinfo/nav.tpl

Y tenemos que añadir el siguiente código detrás del último {/if}

Mostrar iconos de teléfono y email en header Prestashop 1.7

Si en lugar de mostrar el texto Email: quereís mostrar un icono tendréis que dejar el código de la siguiente forma;

Explicaros que en Prestashop 1.7 es sistema de iconos ha cambiado respecto a Prestashop 1.6, ahora se usan «iconos materiales» de Google, que son compatibles con la mayoría de los navegadores modernos, tanto en escritorio como en dispositivos móviles.

Si queréis cambiar el icono del teléfono por otro os dejamos enlace para elegir el que más os guste;

https://material.io/resources/icons/?style=baseline

Y el resultado final sería el siguiente:

Aumentar anchura del header

Algunos usuarios nos han advertido que el área destinada a mostrar el teléfono y email de la tienda en la cabecera tiene una anchura muy pequeña para incluir un teléfono o email muy largo, por lo que el email se muestra en una segunda linea.

Para solucionar este imprevisto os vamos a mostrar que archivo modificar y de que forma. 

El primer paso es entender la estructura del header en Prestashop 1.7, que es diferente a la versión 1.6. En esta nueva versión se ha dividido en dos “hooks“;

  • DisplayNav1; área para Contacte con nosotros.
  • DisplayNav2; carrito, inicio sesión, idiomas y monedas.

Por tanto tenemos que modificar  la anchura del DisplayNav1 para conseguir que el teléfono y el email aparezcan en la misma linea. Pero además tendremos que modificar la anchura del DisplayNav2 para evitar que este hook se vea desplazado. Y para conseguirlo debemos modificar el siguiente código:

Y para aumentar la anchura de cualquiera de estos 2 hooks debemos modificar el archivo header.tpl, que se encuentra en la ruta;

/themes/classic/templates/_partials/header.tpl

Y dejarlo de la siguiente forma, modificando el valor cold-md, tal como véis en la siguiente imagen;

Y si todo se hizo de forma correcta debemos ver en nuestra tienda online que hemos aumentado la anchura del hook DisplayNav1 para poder mostrar teléfono y email en el header.

Hosting
1
Hola ¿podemos ayudarte?
Powered by

Centro de preferencias de privacidad