1

DynaTabs Virtuemart Theme

Developed by

CorFun, Inc.

Corporate Website: http://www.corfun.com

Software Sales and Support: http://www.corshops.com

2

Contents

Introduction ................................................................................................................................... 3

Online Demos ............................................................................................................................... 5

Installation of the DynaTabs Theme ............................................................................................. 5

Setting Virtuemart to Use DynaTabs ............................................................................................ 6

Category-specific Settings ............................................................................................................ 9

Setting Up Tabs ........................................................................................................................... 10

Virtuemart Standard Field Codes ................................................................................................ 13

Setting Up the Primary Image for Swap ..................................................................................... 20

Setting Up Additional Images (Thumbnails) .............................................................................. 21

Zoom Images for Thumbnails ..................................................................................................... 24

Videos ......................................................................................................................................... 26

Modifying the Appearance of DynaTabs .................................................................................... 28

Support ........................................................................................................................................ 28

3

Introduction

Before we get started, please note a few very important things. DynaTabs is a Virtuemart Theme, not a

Joomla Template. DynaTabs controls the look and some of the behavior of the Virtuemart component.

The rest of the page, the part of your site which is NOT Virtuemart-driven, will still be styled based on

your Joomla template.

Virtuemart does not have a Theme installer. You will need to install DynaTabs using FTP. We have

instructions for that below. It is very easy to do, even for novices.

DynaTabs has been tested extensively on both Joomla 1.5 and Joomla 1.0 with Virtuemart 1.1.5 and

higher. It should work with all of the Virtuemart 1.1.x releases, though older releases of VM tended to be

buggy.

DynaTabs has three different image handling options with each having two different color schemes (light

and dark) to give you six unique flypages (as the product details pages in Virtuemart are called). You can

assign FlyPages uniquely by Category in Virtuemart, so use the “Zoom” effect for those products which

benefit from it, while using the “Swap” image functions for others.

Zoom Image Introduction

The zoom option allows the user to mouse over the main image and see a magnified image of the area

under the mouse. An example of this is shown below:

For zoom image handling, you can load up to four thumbnails which appear to the right of the main

image. There are two different options for the additional thumbnails for the Zoom option. The first is

“Multi Zoom” option in which you can add Zoom images to the thumbnails as well as the primary image.

The shopper clicks the thumbnail, loads it into the primary image location, and then can use the “Zoom”

image feature for that image as well. The other option has a Zoom image for only the primary image, and

4

displays the thumbnails as full size images when the shopper “mouses over” them. This rollover option

is shown below:

When the user‟s mouse leaves the thumbnail, the display reverts to the main image (which has the zoom)

or goes to the next thumbnail if the user has moved the mouse over it. A thumbnail image is only shown

at full size in the main picture if the user‟s mouse is hovering over it. Only the primary image has

“zoom” capability in this set up. To have zoom images for the thumbnails as well as the primary, use

either the Light or Dark MultiZoom FlyPage.

Image Swap Introduction

The third image handling capability is image swapping. This option loads a main image and up to four

thumbnails as shown above. The user switches or “swaps” the big image by clicking on one of the

thumbnails. The clicked thumbnail becomes the big image, and remains there until the user clicks another

thumbnail or exits the page. The Multi Zoom image handling option also swaps images based on the

shopper clicking the thumbnail. The difference between this option and Multi Zoom is that pure image

swap does not have a “Zoom” image associated with any of the thumbnails.

Category Assignment Introduction

The type of “flypage” is assigned by category, so you can have some types of products that use a Zoom

image, and some that use a Swap image. You can also choose a light theme for some areas of your shop,

and a dark for others.

Keep in mind, all image handling is optional. Feel free to have just one image per product and rely on

DynaTabs only for its tabbed view capabilities only.

5

Online Demos Before reading further on how to install, configure, and use DynaTabs, it might be helpful to see

the features demonstrated. The following four links show all of the features of DynaTabs that

you will learn about in the remainder of the doc:

Image Swap Light – The link below shows products using the light version of the image

swapping functionality. The user must click on a thumbnail to “swap” it with the main image.

http://www.freebeerbuddy.com/index.php?option=com_virtuemart&page=shop.browse&categor

y_id=15&Itemid=276

Image Swap Dark – The link below shows products using the dark version of the image

swapping functionality. The user must click on a thumbnail to “swap” it with the main image.

http://www.freebeerbuddy.com/index.php?option=com_virtuemart&page=shop.browse&categor

y_id=14&Itemid=278

Zoom Image Dark – The link below shows products using the dark version of the Zoom image

functionality. The user mouses over the main image in order to see the zoom popup. Mousing

over the thumbnails causes them to appear full-size in the main image area.

http://www.freebeerbuddy.com/index.php?option=com_virtuemart&page=shop.browse&categor

y_id=16&Itemid=279

Zoom Image Light – The link below shows products using the light version of the Zoom image

functionality. The user mouses over the main image in order to see the zoom popup. Mousing

over the thumbnails causes them to appear full-size in the main image area.

http://www.freebeerbuddy.com/index.php?option=com_virtuemart&page=shop.browse&categor

y_id=17&Itemid=280

Multi Zoom Light – The link below shows products using the light version of the Multi Zoom

image functionality. The user can see the “Zoom” of the primary image by mousing over it.

Clicking a thumbnail loads it into the primary image area. The user can then mouse over the

image to see the “Zoom” effect.

http://www.freebeerbuddy.com/DynaTabs-Multi-Zoom-Light.html

Multi Zoom Dark – The link below shows products using the dark version of the Multi Zoom

image functionality. The user can see the “Zoom” of the primary image by mousing over it.

Clicking a thumbnail loads it into the primary image area. The user can then mouse over the

image to see the “Zoom” effect.

http://www.freebeerbuddy.com/DynaTabs-Dark-Swap/Deer-Knife-Belt-

Buckle/dynatabsDark_multiZoom.tpl.html

Installation of the DynaTabs Theme

To install, first unzip the DynaTabs package downloaded from Corshops.com. The zip file will

contain two file folders as shown below. The two main file folders are shown below:

6

Connect to your server using an FTP client such as Filezilla. The first file folder called

“administrator” contains only one file: /administrator/components/com_virtuemart/html/

shop.browse.php. This file gives you the option of selecting a “browse_2” category page which

links the product thumbnail image to the product details, rather than to the popup of the image as

in base Virtuemart.

You upload this file by dragging the ENTIRE folder to the ROOT directory of your site. The

FTP client will ask you if you want to replace the existing file. Click OK.

The second file folder in the download is called “Dynatabs.” Upload this entire folder to the

following path on your server:

components/com_virtuemart/themes/

This directory will already have a “Default” theme directory. Dynatabs will be in addition to the

Default. Do not delete the Default Theme.

Setting Virtuemart to Use DynaTabs

Once the DynaTabs theme is installed, you will need to set your system to use it. In your Joomla

Administrator, go to the Virtuemart Component.

Once the Virtuemart component loads, open the Configuration option at the top as shown below:

Then select the “Site” tab as shown below:

7

On the right side, you will see the “Layout” options as shown below:

At first, the theme for the shop will be “default” as shown above. Click on the select box to

change this to “Dynatabs” as shown below:

The other fields are detailed below.

8

Number of Products - Next, set the default Number of Products per row to the desired value.

This affects the “Browse” or “Category” pages. This option can be changed at the Category

level.

Category Template - This is used as the initial default when a new category is created. This can

be changed at the Category level. The recommended options are below:

The browse_1 option has the typical Virtuemart function of linking the thumbnail on a

category page to a full-size popup of that image. This can be confusing for shoppers.

The browse_2 option links the image to the product details. Note: If this does not work,

then you did not upload the shop.browse.php file from the download package.

Flypage – This is the default product details theme. This can be changed at the Category level.

For a fresh Virtuemart install, this is normally set to “Managed.” That value needs to be changed

to one of the following valid values:

dynatabsDark_swap.tpl – Uses a dark layout and swaps any clicked thumbnail into the

main image area on the product details page.

dynatabsDark_zoom.tpl – Uses a dark layout and uses the “zoom” image popup for the

main image. A thumbnail is shown in the main image area as long as a user is hovering

over it with the mouse.

dynatabs_swap.tpl – Uses a light layout and swaps any clicked thumbnail into the main

image area on the product details page.

dynatabs_zoom.tpl – Uses a light layout and uses the “zoom” image popup for the main

image. A thumbnail is shown in the main image area as long as a user is hovering over it

with the mouse.

dynatabsDark_multiZoom.tpl - Uses a dark layout and uses the “zoom” image popup

for the main image and optionally for thumbnails after they are clicked and loaded into

the primary image window.

dynatabs_multiZoom.tpl - Uses a light layout and uses the “zoom” image popup for the

main image and optionally for thumbnails after they are clicked and loaded into the

primary image window.

See example selection below:

9

Thumbnail Image Width and Height – is the standard width and height of your thumbnail

images. This does not impact the product details page (flypage), only the thumbnails shown in

the Category (browse) pages.

Below the Theme selectbox there is a link for more configuration options. Save your changes

on this screen before clicking that link. The options on the Theme Configuration page have no

special impact on DynaTabs, and are not documented here. You may find complete

documentation at the Virtuemart site.

Category-specific Settings

As noted before, the default configuration settings can be overridden at the Category level. This

enables you to use different browse and flypages for different categories. To change the settings

for a Category, first open the Category Manager as shown below:

Select the Category to edit as shown below:

10

Scroll down past the description and you will see the following options that allow you to select a

different Flypage and Browse page.

NOTE: If you install DynaTabs on an existing store with existing categories, you will need to

manually change them to the values you desire. If you are getting unexpected results from your

product details or browse pages, be sure that your categories have been set appropriately.

FURTHER NOTE: Virtuemart puts the flypage name in the URL that it uses for displaying

products. If you install DynaTabs on an existing store, and you have all your settings correct, but

your products keep showing the old flypage – check your URLs! SEF URLs or hard-coded links

can capture the previous flypage name and keep rendering it. After installing and setting up

DynaTabs, flush your SEF URL cache and make sure your menus are not including hardcoded

links to old browse and flypages!

Setting Up Tabs

Tabs are set up in the Product Description in the Virtuemart edit Product Information function.

Both tab title and content are completely customizable. You may optionally include some or all

of the standard Virtuemart fields such as packaging, weight, availability, etc. for a given product,

or you may choose to only include custom data. This can vary from product-to-product.

Before proceeding with a discussion of how tabs should be set up, let us first show an example of

a product with a tabbed layout:

11

The following is a screenshot of the Product Description area where the tabs are defined for the

above example:

12

Each Tab begins with the following code:

{TAB=Title of Tab}

After the tab code, enter the custom data that you want to appear on that tab. The information is

included up until the next {TAB=Title of Next Tab} is encountered. The command is case

sensitive. The word “TAB” must be in all caps to work.

There are three basic types of information that you can include.

Custom Data – Text or images that you insert into a tab.

VM Field Data – You can use a command [VMFIELD=] followed by a field ID to load standard

Virtuemart fields like weight, packaging, price, etc. The documentation section following this

one has a complete list of the fields available and the commands that you can use to load them.

Please note: this command is case sensitive. The command “VMFIELD” must be in all caps

to work.

Joomla Plugins – Many Joomla plugins will load in Virtuemart. These include video players

like All Videos from Joomlaworks.gr. Most plugins are compatible with DynaTabs and can load

13

in a tab. In order for plugins to work, you must check the box beside “Enable content mambots /

plugins in descriptions?” option on the first page of the Virtuemart Configuration page.

Virtuemart Standard Field Codes

In the following list, the code on the left is inserted in a DynaTabs tab to show the value as

entered in the standard VM field. All of these are optional, as your products can contain only

custom data in the tabs. The name on the right is the standard Virtuemart name. Please see

special information following this list for further discussion of the Add to Cart, Product Reviews,

Product Review Form, and the Related Products. The command is case sensitive! “VMFIELD”

must be in all caps as shown below.

[VMFIELD=name] = $product_name;

[VMFIELD=sku] = $product_sku;

[VMFIELD=short_description] = $product_s_desc;

[VMFIELD=width] = $product_width;

[VMFIELD=height] = $product_height;

[VMFIELD=length] = $product_length;

[VMFIELD=lwh_uom] = $product_lwh_uom;

[VMFIELD=weight] = $product_weight;

[VMFIELD=weight_uom] = $product_weight_uom;

Or use:

[VMFIELD=dimensions] =

'Width - '.$product_width.$product_lwh_uom;

'Height - '.$product_height.$product_lwh_uom;

'Length - '.$product_length.$product_lwh_uom;

‟Weight - „.$product_weight.$product_weight_uom;

(note - the values above will only show if they are not zero)

[VMFIELD=url] = $product_url;

[VMFIELD=availability] = $product_availability;

[VMFIELD=in_stock] = $product_in_stock;

[VMFIELD=available_date] = $product_available_date;

[VMFIELD=packaging] = $product_packaging;

[VMFIELD=unit] = $product_unit;

[VMFIELD=price_label] = $product_price_lbl;

[VMFIELD=price] = $product_price;

[VMFIELD=ask_seller] = $ask_seller;

14

[VMFIELD=manufacturer_link] = $manufacturer_link;

[VMFIELD=vendor_link] = $vendor_link;

[VMFIELD=file_list] = $file_list;

[VMFIELD=add_to_cart] = '<div id="dynaTabsPurchaseBox">'.$addtocart.'</div>';

[VMFIELD=reviews] = '<div id="productReviews">'.$product_reviews.'</div>';

[VMFIELD=review_form] = '<div id="productReviewForm">'.$product_reviewform.'</div>';

[VMFIELD=related] = '<div id="relatedProducts">'.$related_products.'</div>';

If the Add to Cart, Product Reviews (if enabled in the Virtuemart configuration), and/or Related

Products are included in a tab using the commands above, then they will appear only in the tab. If

they are not included in a tab, then they will appear as shown in the images below.

If not included in a tab, the Add to Cart function will appear to the right of the Tabs as shown below:

If not included in a tab, the Customer Reviews and the Customer Review form will appear below the tabs

as shown below:

15

If not included in a Tab, the Related Products will load below the Reviews as shown below:

16

You may include one, several, all or none of these functions in Tabs. If not in a Tab, they will show as

illustrated above, if your Virtuemart install is set to use them. Some of these functions, like the Customer

Reviews, have options controlling whether or not they are used. DynaTabs will not override those

settings.

Note: If you have more tabs than will fit on a line, DynaTabs will automatically create additional rows as

needed.

DynaTabs Images Overview

As noted, there are three types of image handling in DynaTabs. Both the Zoom and the Swap image

handling options allow a product to have up to 4 thumbnails, four full images for the thumbnails, and

one full-size main image. Only the full-size main image is required! The main image is set in the

CSS to be 460px by 375px. This can be changed by modifying the CSS.

NOTE: The layout of DynaTabs is 100% CSS controlled.

The Zoom feature lets you specify a much larger version of the primary image to provide the “zoom”

function. The section below details how to set up the Zoom image function. If you are only

planning to use the Swap image functionality, then skip the following section. A later section of

the documentation details how to set up the associated thumbnails.

NOTE: The zoom function only works with the “zoom” flypages. If you set up the zoom image

functionality correctly, but are not getting a “zoom” effect on your main image, then make sure you

are using one of the “zoom” options for the product category!

17

Setup Instructions for Product Main Image with Zoom

The main product image is the image you upload to Virtuemart in the Product Images tab when

creating a new product or editing an existing one as shown below:

Again, this is your main image. It is required, and can be up to 460px wide by 375px high, without

modifying the CSS. This image will show when the product page loads as illustrated below:

18

The thumbnail image generated by the Virtuemart system when you upload the primary is not used

on the product details page. It is used on category (“browse”) pages only.

For the zoom function of the main photo, you must put a file in the “Add Image File” dialog (for the

product) with a title of “Zoom”.

To do this, first find the product in the Product List as shown below in Virtuemart. Then click the

“Media” link which is circled below in Red.

After you click the Media link as shown above, the dialog box illustrated below will appear:

19

In the dialog box, click the “New” button in the upper right. The following dialog box will appear:

Browse for the image file, and upload it. For best results, the Zoom image should be about twice

the width and height of the full-size image.

For better resolution, use a larger zoom image.

20

Be sure to set the following:

File Type must be “additional image” as shown above.

Upload to the default Product Image Path as shown above.

Do not resize the image.

Do not auto create a thumbnail.

Do not publish the file.

Set the file title to “Zoom” as show above.

Important: The File Title must be “Zoom” (Case sensitive!) as shown in the picture above. The File

Title is what the DynaTabs zoom feature keys on to use this image for the “zoom” effect.

The above instructions are for setting up the primary image with Zoom. If using Multi Zoom as an

option, you may also set up “Zoom” images for your thumbnails. This is explained in the final

section, as thumbnails are required. If using a Zoom option Flypage, follow the next set of

instructions to upload your thumbnails and full images, and then continue on to the section on Zoom

Images for Thumbnails.

Setting Up the Primary Image for Swap

If you are using the image swap function, then there is nothing special to do for the main image.

The main image is the image associated with the Virtuemart Product as set in the Product Details

as shown below:

21

Just upload an image to the product when creating it or editing it. This image will appear initially

when the product details page loads. This image is the only one that is required, and can be up to

460px wide by 375px high, without modifying the CSS.

Setting Up Additional Images (Thumbnails) Up to four thumbnails can be added to each product. Each of these can have a full-size image

associated with it. The set-up of these images is the same whether the “zoom,” “multi zoom” or

the “swap” functions are used.

The difference between these two functions is how a user chooses to view a large version of the

thumbnail. On the zoom feature, when one of the thumbnails is “moused-over”, the full-size

image associated with that thumbnail (if one exists) will replace the main image as long as the

mouse remains on the thumbnail. The zoom feature only works with the primary image, not

with any of the additional thumbnails with this setting. The thumbnails do not stay loaded in

22

the primary image area. The full-size version of a thumbnail is only visible as long as the user is

hovering the mouse over the thumbnail.

When the “swap” function or the “multi zoom” function is used, the user clicks a thumbnail and

then it literally “swaps” to become the primary image for as long as the user is on that page, until

the user clicks another thumbnail, or (if using Multi Zoom) the user clicks the button to “Reset

Zoom.”

Regardless of which feature is used, the setup of the thumbnails and the corresponding full

size images are the same.

Thumbnail Set Up

To add thumbnails, you will use the same add Media option from the Product List as shown

below:

After you click this option, you will load the file list as shown below:

23

Click the “New” option as shown above on the far right, and the add file dialog box will appear

as shown below:

Be sure to set the following:

File Type must be additional image.

24

Upload to the default Product Image Path.

Do not resize the image. If the image is resized, the name will be changed. The full

size images are matched up to thumbnails based on file name.

Do not auto create a thumbnail.

Publish the file! The image will not appear unless it is published. Repeat – all

thumbnails must be published!

File Title is not used for this function, so you can optionally put anything you like in

that field or leave it blank.

You can load up to 4 thumbnails for each product without any changes to the CSS.

Corresponding Full Size Image Set Up

Full Size images are uploaded using the same add media file functions described previously.

There are two important differences between the full image and the thumbnail:

The file name must be identical to the thumbnail file, except with the extension

“.full.” added to the end of the filename. For example, your thumbnail file name is

“hammer_small.png” The full image will be “hammer_small.full.jpg” Depending on

which image handling feature you are using, when the user mouses-over or clicks the

“hammer_small.png” thumbnail, the corresponding “hammer_small.full.jpg” will appear

in the main image area.

The Full Size images must be unpublished! If they are published, they will appear in the

images list and ruin the appearance of the page. Set them to unpublished!

As noted for the thumbnails, do not resize, do not auto create a thumbnail, and the File Title is

not used so can be left blank or optionally used for your own information. As noted earlier,

full images can be up to 460px wide by 375px high, without modifying the CSS.

Zoom Images for Thumbnails

Zoom images for thumbnails are uploaded using the same add media file functions described

previously. Please remember, Zoom images for thumbnails only work if using the Multi Zoom

light or dark options. The following are important attributes to keep in mind when using Zoom

images for thumbnails:

The file name must be identical to the thumbnail file, except with the extension

“.zoom.” added to the end of the filename. For example, your thumbnail file name is

“hammer_small.png” The zoom image will be “hammer_small.zoom.jpg” When a user

25

clicks the “hammer_small.png” thumbnail, the corresponding “hammer_small.full.jpg”

image will be loaded into the primary image area. (The method for uploading full images

was covered in the previous section.) The zoom image will be loaded at that time, so that

the user can mouse over sections of the full image and see the zoom effect.

The zoom images must be unpublished! If they are published, they will appear in the

images list and ruin the appearance of the page. Set them to unpublished!

Do not put the file title of “Zoom” for any of the thumbnail zoom images. The “Zoom”

file title is only for the zoom of the primary image. Leave the File Title blank or fill in an

actual description.

Do not resize.

For best results, use a zoom image that is at least twice as large as the full image.

The highlighted lines in the image below show a complete set of images – one thumbnail,

one full image, and one zoom image:

26

NOTE: Only the deer5.jpg is published as that is the thumbnail. Both the .full and .zoom

images highlighted above are not published.

When using this functionality, the user has an option to reset to the original image by

clicking a “Reset Zoom” button as shown below:

This will set the picture back to the main picture and the original zoom.

NOTE: Zoom images are optional. You do not have to use them for each thumbnail, or even

for any thumbnails. If a zoom image is not available, the DynaTabs system simply does not

try to load one.

Videos Product videos can be easily embedded in a tab or tabs. We do not recommend embedding

YouTube or other code directly, as the WYSIWYG tools native to Joomla often corrupt this

code. We recommend, instead, using a video plugin like “All Videos” from joomlaworks.gr.

To use a video plugin (or mambot in J1.0), be sure to set Virtuemart to use Plugins/Mambots in

the Front End settings under Configuration:

27

If the Enable content mambots/plugins in descriptions option is not enabled as shown above,

then your video will not play.

To show a video, just set up a tab and then put the plugin/mambot code in that tab as shown

below:

The result will be a product video embedded in a tab on your product description as shown

below:

28

Modifying the Appearance of DynaTabs

DynaTabs is 100% CSS controlled. Most desired CSS changes will be in one of these two files.

Access this file to adjust light DynaTabs options:

/components/com_virtuemart/themes/Dynatabs/templates/product_details/includes/js/css/dynatab

s.tpl.css

or this file for dark options:

/components/com_virtuemart/themes/Dynatabs/templates/product_details/includes/js/css/dynatab

sDark.tpl.css

Most DynaTabs distinctive CSS changes will be one of those two files. For questions about CSS

changes, please contact us in the support forum.

Support For support, please use our Support forum at http://www.corshops.com/Support/ and post your

question in the DynaTabs forum.

29