DiceLock Security Blog

VirtueMart is a store component of Joomla CMS. It allows us to sell and comercialize any kind of products through Internet. VirtueMart allows to show detailled information about our products and other products related to it. At DiceLock Security we found that the default lay out of these related products was making our viewers to scroll horizontally …

At DiceLock Security store for each product we show viewers other products that are related to it. We have found that when there are some related products, VirtueMart shows those related products horizontally and that the veiwer must scroll hotizontally to see the web site in its full width.

Horizontally scroll in our old VirtueMart store:

We wanted that viewers would be able to see the web site in its full width and all related products with better lay out.

Looking at VirtueMart component structure we found that related products were handled by the PHP file ROOT\components\com_virtuemart\themes\default\templates\common\relatedProducts.tpl.php.

The file looked like:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
 
<hr/>
 
<h3><?php echo $VM_LANG->_('PHPSHOP_RELATED_PRODUCTS_HEADING') ?></h3>
 
<table width="100%" align="center">
	<tr>
    <?php 
    while( $products->next_record() ) { ?>
      	<td valign="top">
      		<?php echo $ps_product->product_snapshot( $products->f('product_sku') ) ?>
      	</td>
	<?php 
    }
	?>
    </tr>
</table>

Where it can be seen that related products are shown within a “table”, with “one row” and “one column” for each related product.

What we have done is to change this lay out, we have removed the table and we have changed it by a “div” and we have put each related product within each own “div”. So, now file ROOT\components\com_virtuemart\themes\default\templates\common\relatedProducts.tpl.php looks like:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
 
<hr/>
 
<h3><?php echo $VM_LANG->_('PHPSHOP_RELATED_PRODUCTS_HEADING') ?></h3>
 
<div width="100%">
    <?php 
    while( $products->next_record() ) { ?>
<div style = "float: left; width: 190px;">
      		<?php echo $ps_product->product_snapshot( $products->f('product_sku') ) ?>
</div>
	<?php 
    }
	?>
</div>

Now related products does not make viewers to horizontally scroll because related products looks like:

And if the viewer reduces browser’s width related products get this lay out automatically:

We prefer to show them in this way !.

Related posts:

1. Joomla Search error message lay out
2. Joomla Search form image improvement
3. Joomla RSForm PRO adding contact information
4. Joomla – Front Page number of articles
5. WordPress – Improve your 404 File Not Found answers (4 of 4)