Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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