En este tutorial vamos a explicar como añadir nuevos enlaces en el bloque social incluido en una tienda Prestashop 1.5.
Por defecto el módulo de redes sociales viene preparado para configurar las cuentas de Facebook, Twitter y RSS. Ahora lo que vamos a hacer es añadir un nuevo enlace que apunte a nuestra cuenta de Instagram.
Para realizar estos cambios debemos sobreescribir la configuración por defecto del módulo ‘blocksocial‘ de Prestashop. Esto lo haremos añadiendo un fichero en la carpeta del tema que tengamos configurado. El tema por defecto se llama ‘default‘, y será este sobre el que trabajaremos en este tutorial.
¿Cómo sobreescribir un módulo de Prestashop?
Cuando se instala un nuevo módulo en una tienda Prestashop se añade una nueva subcarpeta a la carpeta ‘modules‘ situada en el raíz de la tienda. Se podría modificar directamente sobre estas carpetas cada uno de los módulos, pero no es lo recomendable. Si se quiere sobreescribir un módulo únicamente hay que crear la misma estructura de carpetas dentro de la carpeta del tema que tiene configurada la tienda, y luego copiar y editar cada uno de los ficheros que corresponda.
Sobreescribir bloque social
Para ello debemos crear una carpeta llamada ‘/themes/default/modules/blocksocial/‘ donde iremos añadiendo los ficheros que necesitemos modificar del módulo ‘blocksocial‘.
Modificar plantilla blocksocial.tpl
Para añadir un nuevo enlace en la sección de bloque social únicamente debemos modificar el fichero con la plantilla del módulo, en esta caso el fichero ‘blocksocial.tpl‘.
Si abrimos el fichero original (‘modules/blocksocial/blocksocial.tpl‘) este es su contenido:
|
1 2 3 4 5 6 7 8 |
<div id="social_block"> <h4>{l s='Follow us' mod='blocksocial'}</h4> <ul> {if $facebook_url != ''}<li class="facebook"><a href="'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if} {if $twitter_url != ''}<li class="twitter"><a href="'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if} {if $rss_url != ''}<li class="rss"><a href="'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if} </ul> </div> |
Ahora lo que queremos es que aparezca también un enlace a Instagram. Para ello creamos un fichero, que sobreescribirá al anterior, llamado ‘/themes/default/modules/blocksocial/blocksocial.tpl‘ con las siguientes líneas:
|
1 2 3 4 5 6 7 8 9 |
<div id="social_block"> <h4>{l s='Follow us' mod='blocksocial'}</h4> <ul> {if $facebook_url != ''}<li class="facebook"><a href="'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if} {if $twitter_url != ''}<li class="twitter"><a href="'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if} {if $rss_url != ''}<li class="rss"><a href="'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if} <li class="instagram"><a href="http://instagram.com/instagram" title="Instagram" target="_blank">Instagram</a></li> </ul> </div> |
Si accedemos ahora a la tienda podremos ver que aparece un nuevo enlace en el bloque social apuntando a nuestra perfil de Instagram.
El siguiente paso será modificar el CSS para que aparezca el logo de ‘Instagram’ junto al enlace. En el próximo tutorial explicaremos cómo crear un css para los nuevos enlaces de redes sociales.
Sobre David Otero
David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.
- Find more about me on:
Deja tu comentario