En 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.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
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:
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
En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.
Please wait...
Hosting Joomla
Reseller Joomla
Aprende Joomla
Packs Joomla
