Monday, October 19, 2009

Virtuemart layout customization

sometimes we may need to customize the layout of the virtuemart template. but to do that we need to know first which file or where we need to make change to edit the virtuemart template. when i edit the template first time i need to spend a couple of hour we find the appropriate file. here i just share some of my experiences.

How to edit default shop category list layout in virtuemart:

The path of the file is your_site/components/com_virtuemart/themes/default/templates/common/categoryChildlist.tpl.php

categoryChildlist.tpl.php is the file you need to edit first.





How to edit the product list in a category page in virtuemart:

To edit the product list in a particular category you need to find which file is set in backend admin panel in virtuemart. To see it first you need to go virtuemart admin panel ->configuration->click on site tab then in the layout box right site you can see the category template. Dropdown list.

After that go to the products->list categories-> go to insite the category which one you need to change the layout. You can find bellow and get the fine name which you need to edit.

After that go to directory components\com_virtuemart\themes\default\templates\browse

components\com_virtuemart\themes\default\templates\browse\includes\browse_notables.tpl.php

Open the exact file and edit.

How to edit the product detail page:

components\com_virtuemart\themes\default\templates\product_details

How to show full image in the product detail page:

Sometimes you may want to display the full big product image instead of the thumbnail in the Product Details page in Virtuemart. To do that, you need to find the flypage. If you are using the default theme, you should find it in yoursite/components/com_virtuemart/themes/default/templates/product_details folder. Look for the flypage.tpl.php or whichever flypage file you are using for your site.

  1. Look for this line below

  2. < ?php echo $product_image ? >


  3. Replace the line with this one below

  4. < img src= " < ?php echo $mosConfig_live_site; ? >/components/
    com_virtuemart/shop_image/product/
    < ?php echo $product_full_image; ? >" class="fullvmimage" >

  5. Save the file

  6. Reload your browser!
How to show any resided image in the product detail page:
<?php

// Secound thumbnails size on flypage

/*

* Returns an secound thumbnails and store in /components/com_virtuemart/shop_image/product/resized/ directory width new size in name.

* (virtuemart forum http://forum.virtuemart.net/index.php?topic=27250.0)

* written by Creb

*/

$img_big = $product_full_image;
$pieces = explode(".", $img_big);
$thumb_2 = "/components/com_virtuemart/shop_image/product/resized/" . $pieces[0] . "_300x300." . $pieces[1];

if( file_exists( $thumb_2 ) ) {
?>

<a href="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" title="<?php echo $product_name; ?>" rel="lightbox[product<?php echo $product_id; ?>]">

<img src="<?php echo $thumb_2 ?>" alt="<?php echo $product_name ?>" title="<?php echo $product_name ?>" border="0" align="center" /></a>

<?php

} else {
?>

<a href="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" title="<?php echo $product_name; ?>" rel="lightbox[product<?php echo $product_id; ?>]">

<img src="/components/com_virtuemart/show_image_in_imgtag.php?filename=<?php echo $product_full_image ?>&newxsize=300&newysize=300&fileout=<?php echo $fileout ?>" alt="<?php echo $product_name ?>" title="<?php echo $product_name ?>" border="0" align="center" /></a>

<?php

}

// end Secound thumbnails size on flypage

?>

5 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. That hack has an error if is used with rokbox instead lightbox

    ReplyDelete
  3. Thanks a bunch Suranjit, now I have a larger than standard product thumbnail image at 300 x 300 on my product detail page (flypage) and a link when clicking on the image to the full-sized image.
    A great replacement for or found in the flypage-ask.tpl.php and flypage.tpl.php when using VirtueMart.

    ReplyDelete
  4. Hmm that’s so pleasing; carry on the excellent work I’ll again visit your blogs to learn more. http://www.lowhosting.com/siteground-review

    ReplyDelete