Sat 18 Apr |
|
The default layout for the VirtueMart 1.1 Related Products display is a maximum of 4 products displayed in a horizontal row. It's quite easy to change this and also to display rounded corners i.e <div><div><div><div> layout but you need to change the core files. The default layout of the Related Products is quite "clonky". 
Open file joomla_root/components/com_virtuemart/themes/default/templates/common/relatedProducts.tpl.php in any text editor. In this case we will make the display fold at 3 products, if you want more or less just change the ($relItem == 3) parameter. The original file is as so - <?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>The changes we need to make are to count the number of products and insert a new table row when we reach our required target number. The relevant changes are within the table - <table width="100%" align="center"> <tr> <?php $relItemNo = 0; ?> <?php while( $products->next_record() ) { if ($relItem == 3) { echo "</tr>\n<tr>"; $relItem = 0; } ?> <td valign="top"> <?php echo $ps_product->product_snapshot( $products->f('product_sku') ) ?> </td> <?php $relItem++; } ?> </tr> </table>If as well we want to surround the individual products in divs e.g. for a rounded corners border etc then we do this in this file as well. Simply add a class and the necessary divs to the table cell, you will have to adjust your css to suit -
<td valign="top">
<div class="related">
<div class="module" style="width:210px;height:160px;">
<div style="width:210px;height:160px;"><div><div></br>
<?php echo $ps_product->product_snapshot( $products->f('product_sku') ) ?>
</div></div></div>
</div>
</div>
</div>
</td>
To increase the number of related products shown we need tp change another file.Open file joomla_root/administrator/components/com_virtuemart/html/shop.product_details.php in any text editor and go to line 85. Change the number of returned results in the query - $q .= "AND FIND_IN_SET(#__{vm}_product.product_id, REPLACE(related_products, '|', ',' )) LIMIT 0, 4"; to for example 6 $q .= "AND FIND_IN_SET(#__{vm}_product.product_id, REPLACE(related_products, '|', ',' )) LIMIT 0, 6";Looks better!  Add this page to your favorite Social Bookmarking websites                        |
| Last Updated on Saturday, 18 April 2009 10:06 Read : 14063 times |
Just copy the existing, rename the old one so you have something to go back to if it all falls in a heap, and experiment with the layout...
This article is great and works well as it lead me to the right files to edit... However I would like my related products to float left and butt up to each other if there are less than the '4' I want displayed... As they are contained within a table I can't find a way to apply a float.. Any Ideas?
Can I just replace the 'table' in root/components/com_virtuemart/themes/default/templates/common/relatedProducts.tpl.php with CSS controlled Divs?
I just made a few styling modifications but it was perfect !!!
See:
http://www.dima-sports.nl/Honkbal-/-Softbal/Ballen/Champro-Official-League-Ball.html
Thanks!
Dirk
Did exactly the things you described.
Works nicely... but.
Image (or productname)is not clickable anymore. The link to the flypage is gone.
Did i do something wrong?
My Englisch is not so good to understand than sentence. I know css but where and wich css files do i have to change?
see my sit http://www3.quickproducts.nl
Try turning the PC around 180 degrees, should work then...
Wearing a hat while coding should make it simpler next time as well...