Shopping Basket

 x 

Cart empty


Log In

Find Us Elsewhere

SSL

Forum Search

Keyword

This article explains how to replace your Virtuemart 3 product images with the Spiral image zoomer plugin.

There are two ways to do this: using our image replacer script to do this using the magic of javascript; or by adding a simple edit to the product details template.

Using the Image Replacer Script

This method is by far the easiest to use, if it works.All that you need to do is locate the option 'Replace Virtuemart Images' in the plugin options, and enable that, and the script will do it all automatically for you.

Whether it works or not will depend on your Virtuemart template, because the script needs to find the image containers on the page, which it identifies using their css classes. If these conform to the standard names used by Virtuemart then you are good to go. If the developer of your template has used non-standard names then you could try editing the css classes for the image containers. Basically the script requires three things in order to work:-

  1. The product details are all in a main div container with the class name of 'product-container' - this is required anyway by Virtuemart for a lot of their ajax functions to work, so a good template should already do this;
  2. The product main image is in a div container with the class name of 'main-image';
  3. The product additional images are in a div container with the class name of 'additional-images';

If those conditions are fulfilled then the image replacer script should work, and it is recommended to use it. Otherwise you can try the method of editing the product details template to include the zoomer.

Editing the Virtuemart Product Details Template

This section applies if you are using the plugin as a Virtuemart Custom Field.

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');
	}
}

If you are using the plugin as a content plugin

In this case the method is similar to that described above. The difference is that the zoomer will be generated automatically in response to a content event, so you need to locate the template code that renders the output, and move it to where you want it to appear. For example, if you want are using the 'AfterDisplayTitle' event, this is the template code that renders it:

echo $this->product->event->afterDisplayTitle;

Then you can remove the template code for generating the Virtuemart images as described above.