Guía – Añadir iconos de las redes sociales en el menú horizontal superior en Prestashop 1.5

En esta guía, explicaremos como añadir distintos iconos de redes sociales en el menú horizontal en Prestashop 1.5

redsocial

El primero paso es ir al fichero:

/themes/tu-plantilla/modules/blocktopmenu/blocktopmenu.tpl

En caso de que no tengáis el fichero en dicha ruta, seria editando directamente el que tenéis en:

/modules/blocktopmenu/blocktopmenu.tpl

Pero mi recomendación es que si no tenéis el fichero sobreescrito en el directorio de vuestra plantilla, es que hagáis una copia del fichero:

/modules/blocktopmenu/blocktopmenu.tpl

en el directorio:

/themes/tu-plantilla/modules/blocktopmenu/

Lógicamente creando la estructura del directorio, en cuestión, “/modules/blocktopmenu/” (sin miedo) dentro del directorio de la plantilla.

De esta manera, si en algún momento actualizamos Prestashop, o el mismo módulo, no perderemos los cambios que hayamos realizado en el fichero:

blocktopmenu.tpl

Ahora vamos a explicar, como incluir varios iconos de las redes sociales que nosotros queramos en el mismo menú horizontal superior, para eso editamos el fichero, del cual hemos hablado, es decir:

blocktopmenu.tpl

Buscamos la siguiente línea:

{if $MENU_SEARCH}
<li class="sf-search noBack" style="float:right">
<form id="searchbox" action="{$link->getPageLink('search')}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
</p>
</form>
</li>
{/if}

Y justo antes o después, añadimos por ejemplo esto:

<li id="redes_sociales"><a href="enlace_a_perfil_facebook"><img alt="" src="{$img_dir}facebook_top.png" /></a>
<a href="enlace_a_perfil_twitter"><img alt="" src="{$img_dir}twitter_top.png" /></a>
<a href="enlace_a_perfil_pinterest"><img alt="" src="{$img_dir}pinterest_top.png" /></a>
</li>

Donde las imágenes:

facebook_top_png
pinterest_top.png
twitter_top_png

Las debemos subir al directorio:

/themes/tu-plantilla/img/

Ahora, nos tocar ajustar un poquito el css, para eso por ejemplo vamos al fichero:

/themes/tu-plantilla/css/global.css

Y añadimos lo siguiente:

#redes_sociales {
width: 107px;
border-right: none;
float: right;
}

En esta parte del css, establecemos un ancho máximo (width:107px) al bloque de redes sociales. (Vuestro ancho, no tiene por qué ser igual)

He quitado el borde de la derecha (border-right: none) del bloque de redes sociales en el menú horizontal.

Y le he dicho que el bloque de redes sociales, se situé en la derecha del menú horizontal. (float: right)

También, tenemos que añadir lo siguiente:

#redes_sociales a {
padding: 0px;
}

Aquí, hemos borrado el posible relleno que tuvieran los enlaces, ya que por defecto en el menú horizontal todos tienen un relleno, y en este caso no lo necesitamos por eso lo hemos puesto a 0 pixel.

Y por último añadimos esto:

#redes_sociales a img {
float: left;
margin-left: 1px;
margin-top: 1px;
}

En esta última parte indicamos, que las imágenes “floten” para que estén una al lado de otra, hemos metido un margen superior de 1 pixel (esto es porque yo he querido) y además hemos metido un margen de 1 pixel entre las imágenes.

Recordamos que, al ser el menú horizontal superior, no solo debemos forzar compilación, en la pestaña Parámetros Avanzados -> Rendimiento, sino que también debemos limpiar la cache de smarty, esto lo podemos hacer vaciando el directorio:

/cache/smarty/cache/ (menos el fichero "index.php")

O usando por ejemplo este módulo: Descargar Módulo

Esta guía, ha sido probada bajo Prestashop 1.5.4.1

4 comentarios sobre “Guía – Añadir iconos de las redes sociales en el menú horizontal superior en Prestashop 1.5”

  1. Creo que hay errores porque no funciona.
    Lo he comprobado linea por linea en varias ocasiones y no hay manera de que salgan los botones.

    1. ¿Puedes proporcionar mas datos?

      ¿No te salen los cambios? (¿Has forzado compilación y vaciado la cache de smarty?)

      ¿O no te salen las imágenes, pero si los enlaces? (En ese caso ¿Has subido las imágenes al directorio indicado?)

  2. Por cierto, acabo de corregir una errata en la construcción del nuevo bloque, revisa ahora.

  3. Hola: Muchas gracias por el aporte y la corrección. Ya me funciona correctamente. el problema del ya me habia dado cuenta. Mi error fue en que al realizar la copia del modulo para colocarlo dentro de la carpeta theme, como bien recomiendas al principio del articulo, las modifiaciones las continue haciendo en el blocktopmenu original sito en la raiz del sitio por lo que por muchos cambios que hacia evidentemente nada cambiaba.
    Desconocia que al crear la carpeta del modulo en cuestión dentro del theme, Prestashop diera automaticamente prioridad a esta, aun existiendo las dos.
    Gracias de nuevo. El error ha sido mio.
    Un Saludo.

Los comentarios están cerrados.