Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Domingo, 16 Octubre 2011 16:49

Redes sociales en detalle de productos VirtueMart

Escrito por 
CMS:  Joomla! |  Versión:  1.5.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


icoredesvmEn este artículo veremos cómo compartir productos de virtuemart a través de las redes sociales. Esto puede ser realizado a través de una extensión de manera sencilla, pero la mayoría de ellas que tienen esta funcionalidad sobre el detalle de productos de virtuemart son comerciales; en este artículo veremos cómo realizar este trabajo de manera manual y usando un código generado por un sitio web tercero.

Para añadir el código de redes sociales, se hará una modificación al archivo de detalle de producto del tema de virtuemart que se esta usando. Debemos verificar desde el panel de control de virtuemart en el tab de sitio que tema estoy usando y que archivo de detalle de producto se esta mostrando, el mismo archivo debe ser verificado en la categoría correspondiente al producto .

 

Demo redes en detalle productos virtuemart

 

1- Revisando el tema de virtuemart

En este ejemplo particular se esta trabajando con el tema default de virtuemart y el archivo flypage.tpl para mostrar el detalle del producto. Para más información de temas en virtuemart puede revisar el siguiente artículo: Temas en Virtuemart

img1

 

2- Conseguimos el código de Redes Sociales

Utilizaremos el sitio web addthis.com , el cual nos genera código de redes sociales para colocarlo en nuestro sitio web, tal como se puede apreciar en la siguiente imagen:

img2

 

3- Pegamos el código en el archivo del tema de virtuemart

Ubicamos el archivo de detalle de producto, para este ejemplo se utilizó el tema default de virtuemart y el archivo flypage, por lo que haremos las modificaciones en el siguiente archivo:

/components/com_virtuemart/themes/default/templates/product_details/flypage.tpl.php

Ubicamos el lugar en donde irá el código y para más flexibilidad lo agrupamos en un contenedor.

 

<div id="contenedor_redes_producto">

<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

<a class="addthis_button_tweet"></a>

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_counter addthis_pill_style"></a> </div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e9af98f733bb3e1"></script>

<!-- AddThis Button END -->

</div>

 

4- Modificamos el archivo de estilos del tema

En caso ser necesario necesitaremos definir márgenes para nuestro contenedor, ubicamos el archivo de estilos del template, en este ejemplo será :

/components/com_virtuemart/themes/default/theme.css

Y definimos el siguiente estilo :

 

#contenedor_redes_producto{margin-top:20px;}

 

5- Resultado Final

Después de haber realizado las modificaciones el detalle de producto lucirá como la siguiente imagen

img3

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop




Plugin Optimización de Imágenes Gratuito para WordPress