Virtuemart a simple vista en un componente complicado, pero en realidad no es asi. Virtuemart nos permite personalizar el aspecto de nuestra tienda, creando modificaciones a su plantilla, al igual que la mayoría de componentes de Joomla. Pero una característica importante de Virtuemart es que tiene Sublayouts, que es una especie de subplantillas para cada parte de la tienda.
En este artículo vamos explicar como personalizar las categorías relacionadas a un producto. Las categorías relacionadas es un campo personalizado (Custom Fields) de virtuemart, y por defecto no trae un sublayout o archivo especial donde hacer los cambios. La siguiente es una captura de como queda por defecto (Nuestro diseño ya esta avanzado y ya tiene estilos generales, sino se vería peor).
EL problema que nos llevo a personalizar es el siguiente código. Nosotros queríamos agregar movimiento y estilo de botón al nombre de la categoría, pero como el nombre esta dentro de la etiqueta <a> y junto con el una imagen, complicaron las cosas. Aquí el código.
<a href="/joomlastars/joomla/mushi/index.php/en/miscellaneous/mens" title="Mens" target="_blank"><img src="/joomlastars/joomla/mushi/images/stories/virtuemart/category/resized/category2_0x370.jpg" alt="category2"> Mens</a>
Personalizando
- El primer paso es crear las siguientes carpetas dentro de la carpeta HTML de tu plantilla: com_vituermart/sublayouts
- Copiar los archivos costomfield.php y related.php desde components/com_virtuemart/sublayouts
- renombrar el archivo related.php por relatedcat.php, porque el archivo related.php es para personalizar productos relacionados.
En customfield.php buscamos el siguiente código que se encuentra aproximadamente en la línea 596. Lo copiamos y guardamos porque lo usaremos en el archivo relatedcat.php.
$customfield->display = JHtml::link (JRoute::_ ('index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id), $thumb . ' ' . $category->category_name, array('title' => $category->category_name,'target'=>'_blank'));
Reemplazamos por el siguiente código.
$customfield->display = shopFunctionsF::renderVmSubLayout('relatedcat',array('customfield'=>$customfield,'category'=>$category, 'thumb'=>$thumb));
el siguiente es el código completo de nuestro archivo relatedcat.php; que es básicamente el archivo related.php con algunos cambios. Si analizas el código, te darás cuenta que estamos usando el primer trozo de código de customfield.php en relatedcat.php.
<?php defined('_JEXEC') or die('Restricted access');
$category = $viewData['category'];
$customfield = $viewData['customfield'];
$thumb = $viewData['thumb'];
echo '<div class="vm-category-ct">';
//juri::root() For whatever reason, we used this here, maybe it was for the mails
echo JHtml::link (JRoute::_ ('index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id), $thumb, array('title' => $category->category_name,'target'=>'_blank'));
echo '<h4>'.JHtml::link (JRoute::_ ('index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id), $category->category_name, array('title' => $category->category_name,'target'=>'_blank', 'class'=>'btn btn-primary')).'</h4>';
echo '</div>';
if($customfield->wDescr){
echo '<div class="category-description">'.$category->category_description.'</div>';
}
Lo que nosotros hemos hecho es que virtuemart en lugar del ejecutar el código que genera las categorías desde customfield.php lo haga desde un sublayout relatedcat.php; como lo hace con los productos relacionados. Ahora si le mostramos como nos quedo esas categorías relacionadas a nosotros.
