This article explains how to replace your Virtuemart 3 product images with the Spiral image zoomer plugin, by adding a simple edit to the product details template.

First you need to install and set up the plugin, this process is described here. Also add the zoomer to some products, so that you can see the results of your work.

The only difference from the standard procedure will be that we will create our own custom field position which the image zoomer will be assigned to. Virtuemart has several standard layout positions for custom fields, which controls where on the product page they are displayed: normal, ontop, onbot and addtocart. It is very easy to create your own additional layout position, first you need to find the product details template. If your site template does not include any template overrides for Virtuemart, this will be the Virtuemart file:-

components/com_virtuemart/views/productdetails/tmpl/default.php 

If your site does include its own overrides for Virtuemart this will likely be the file:-

templates/your_template/html/com_virtuemart/productdetails/default.php

 In the rest of our discussion we will assume that your template does not include its own overrides, so that we will use the standard Virtuemart template file. However the general process will be similar for any kind of template.

Now suppose that you want to create a custom layout position for the Image Zoomer, call the position 'imagezoomer'. You just need to add this very simple PHP code to the default.php file:-

echo shopFunctionsF::renderVmSubLayout('customfields',array(
                            'product'=>$this->product, 
                            'position'=>'imagezoomer'));

Make sure that it is included inside PHP tags. Put it wherever in the template you want the custom field to display. Once you have finished editing the template, save it to the location templates/your_template/html/com_virtuemart/productsdetails/default.php, so that the changes that you make will not be overwritten if you update Virtuemart. Now in the Virtuemart administration, go to products->customfields, and open up the editing options for the Image Zoomer plugin. In the layout position option, set the position to 'imagezoomer'. This should be all that you need to do. Any products that have an image zoomer defined should now display it in the position that you have created.

Replacing the Main Image

However the product page will still be displaying the product image as well. If you do not want the image to display at all, then some simple adjustment to the code can achieve this. Just look for this code in the template:-

echo $this->loadTemplate('images');

It will be probably be about line 132. Replace it with this:-

if (!empty($this->product->customfieldsSorted['image'])) {
    echo shopFunctionsF::renderVmSubLayout('customfields', 
                    array('product'=>$this->product,'position'=>'image'));
}
else
{
   echo $this->loadTemplate('images');
}

Now the image will still display if there is no image zoomer assigned to the product, but if there is, it will display instead of the main image. If your products have more than one image, you may also wish to replace the additional images, so replace this code:-

$count_images = count ($this->product->images);
    if ($count_images > 1) {
        echo $this->loadTemplate('images_additional');
    }

with this:-

if (empty($this->product->customfieldsSorted['image'])) {
	$count_images = count ($this->product->images);
	if ($count_images > 1) {
		echo $this->loadTemplate('images_additional');
	}
}

Author Profile