Sam 18 Avr |
|
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_UPDATED2 |
Tnx
i can not do this
all code on above inserted and can nod see any things
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...