Botón añadir a carrito en las categorías de Virtuemart 2

logovirtuemar120En este tutorial vamos a adentrarnos un poco en el código de Virtuemart. Nuestro objetivo es hacer una pequeña modificación en la plantilla que se encarga de visualizar el listado de productos que pertenecen a una categoría. Esta plantilla por defecto solo permite mostrar un botón de más información del producto, pero nosotros queremos hacer que desde el listado de productos se pueda añadir directamente al carrito.

banner pasarela2

virtuemart - más información

Dentro del mundillo de las tiendas online hay dos tendencias destacables, por un lado los que prefieren poner el botón de más información para que lo añadas posteriormente al carrito y por el otro los que también te añaden otro botón para poder añadir al carrito directamente.

La plantilla por defecto que trae Virtuemart para los listados de productos de una categoría no incorporá un formulario que permita seleccionar el número de unidades del producto que queremos añadir al carrito de la compra. Esto implica que cada vez que quiero añadir un producto a mi carrito de la compra tengo que entrar en la ficha detallada del producto y añadirlo desde allí. 

Para llevar a cabo esto lo mejor es utilizar la técnica de template override. Para ello vamos a acceder al directorio /raiz-de-joomla/components/com_virtuemart/views/tmpl/category/ y localizamos el archivo default.php. Este archivo es el que contiene es la plantilla que contiene el código para mostrar el listado de productos de Virtuemart. Si modificásemos el archivo directamente aquí, correríamos el riesgo de que fuera sobrescrito en una actualización de Virtuemart. Por ese motivo vamos a hacerlo utilizando un template override.

Para hacer el override copia el archivo default.php y en la siguiente carpeta /raiz-de-joomla/templates/mi-plantilla/html/com_virtuemart/category/default.php. Ten en cuenta que mi-plantilla debes cambiarlo por el nombre de la plantilla principal que utiliza tu web (no la de virtuemart) y deberás crear las carpetas html, com_virtuemart y category si no las tienes. Ya tenemos preparado el override y podemos realizar la modificación sobre el archivo que acabamos de copiar. Ya puedes abrirlo y editar!

Ahora tenemos que insertar el código necesario para poder mostrar el formulario, pero antes debemos ver donde se puede insertar.  Si lo quieres mostrar junto al botón de "más detalles" tienes que buscar el siguiente código.


<p>

<?php // Product Details Button
echo JHTML::link ($product->link, JText::_ ('COM_VIRTUEMART_PRODUCT_DETAILS'), array('title' => $product->product_name, 'class' => 'product-details'));
?>
</p>

y justo después añades el siguiente fragmento


<form method="post" class="product" action="index.php" id="addtocartproduct<?php echo $product->virtuemart_product_id ?>">
<?php // Product custom_fields
if (!empty($this->product->customfieldsCart)) { ?>
<div class="product-fields">
<?php foreach ($this->product->customfieldsCart as $field)
{ ?><div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field_type ?>">
<span class="product-fields-title" ><b><?php echo JText::_($field->custom_title) ?></b></span>
<?php echo JHTML::tooltip($field->custom_tip, JText::_($field->custom_title), 'tooltip.png'); ?>
<span class="product-field-display"><?php echo $field->display ?></span>

<span class="product-field-desc"><?php echo $field->custom_field_desc ?></span>
</div><br/ >
<?php
}
?>
</div>
<?php }
/* Product custom Childs
* to display a simple link use $field->virtuemart_product_id as link to child product_id
* custom_value is relation value to child
*/

if (!empty($this->product->customsChilds)) { ?>
<div class="product-fields">
<?php foreach ($this->product->customsChilds as $field) { ?>
<div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field->field_type ?>">
<span class="product-fields-title" ><b><?php echo JText::_($field->field->custom_title) ?></b></span>
<span class="product-field-desc"><?php echo JText::_($field->field->custom_value) ?></span>
<span class="product-field-display"><?php echo $field->display ?></span>

</div><br/ >
<?php
} ?>
</div>
<?php } ?>

<div class="addtocart-bar">

<?php // Display the quantity box ?>
<!-- <label for="quantity<?php echo $this->product->virtuemart_product_id;?>" class="quantity_box"><?php echo JText::_('COM_VIRTUEMART_CART_QUANTITY'); ?>: </label> -->
<span class="quantity-box">
<input type="text" class="quantity-input" name="quantity[]" value="1" />
</span>
<span class="quantity-controls">
<input type="button" class="quantity-controls quantity-plus" />
<input type="button" class="quantity-controls quantity-minus" />
</span>
<?php // Display the quantity box END ?>

<?php // Add the button
$button_lbl = JText::_('COM_VIRTUEMART_CART_ADD_TO');
$button_cls = ''; //$button_cls = 'addtocart_button';
if (VmConfig::get('check_stock') == '1' && !$this->product->product_in_stock) {
$button_lbl = JText::_('COM_VIRTUEMART_CART_NOTIFY');
$button_cls = 'notify-button';
} ?>

<?php // Display the add to cart button ?>
<span class="addtocart-button">
<input type="submit" name="addtocart" class="addtocart-button" value="<?php echo $button_lbl ?>" title="<?php echo $button_lbl ?>" />
</span>

<div class="clear"></div>
</div>

<?php // Display the add to cart button END ?>
<input type="hidden" class="pname" value="<?php echo $product->product_name ?>">
<input type="hidden" name="option" value="com_virtuemart" />
<input type="hidden" name="view" value="cart" />
<noscript><input type="hidden" name="task" value="add" /></noscript>
<input type="hidden" name="virtuemart_product_id[]" value="<?php echo $product->virtuemart_product_id ?>" />
<?php /** @todo Handle the manufacturer view */ ?>
<input type="hidden" name="virtuemart_manufacturer_id" value="<?php echo $product->virtuemart_manufacturer_id ?>" />
<input type="hidden" name="virtuemart_category_id[]" value="<?php echo $product->virtuemart_category_id ?>" />
</form>

Con esto ya os aparecerá el botón en los listados de categorías. Si el aspecto visual que tiene no es de tu agrado puedes personalizarlo haciendo uso de CSS.

Y hasta aquí ha llegado el tutorial. He intentando explicarlo de la forma más clara posible, aunque quizás ha quedado al denso el artículo.

Enlace | Tutorial de Virtuemart 2

Escribir un comentario

Por favor procura que tus comentarios estén relacionados con la entrada, comenta con tu nombre y no pongas enlaces en tu comentario. Intenta también respetar a los demás lectores, los comentarios off topic, promocionales, ofensivos o ilegales serán editados y borrados.


Código de seguridad
Refescar