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 “/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

Guía – Añadir nuevo enlace al bloque social en Prestashop 1.5

Por defecto, en el módulo llamado:

Bloque Social

siganostwitter

Bloque social en Prestashop 1.5

Podemos configurar 3 enlaces, uno para facebook, otro para twitter y otro para el rss.

Pero ¿Y si quisiéramos agregar un enlace complementario al módulo?

Para añadir un enlace complementario, vamos al fichero:

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

Buscamos la siguiente linea de código:

{if $rss_url != ''}
<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>
{/if}

Y por ejemplo, debajo añadimos esto:

<li class="rss"><a href="enlace_del_perfil_de_pinterest" target="_blank">{l s='Pinterest' mod='blocksocial'}</a></li>

En un próximo articulo, explicaremos como asignar un icono al enlace que hemos añadido, en el bloque social, igual que por ejemplo el enlace de facebook tiene su icono propio en el bloque social.

Esta modificación ha sido realizada bajo Prestashop 1.5.4