vmdTabs Virtuemart Description Tabs

engineachooInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

349 εμφανίσεις

1

vmdTabs



Virtuemart Description Tabs

Developed by











Cor
F
un, Inc.












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

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



2

Contents

vmdTabs


Virtuemart Description Tabs

................................
................................
......................

1

CorFun, Inc.

................................
................................
................................
................................
..

1

Introduction

................................
................................
................................
................................
...

2

Installation

................................
................................
................................
................................
.....

2

Virtuemart Option to Run Joomla Plugins

................................
................................
....................

3

Configuration

................................
................................
................................
................................

4

Building Tabs

................................
................................
................................
................................

4

Virtuemart Standard Field Codes

................................
................................
................................
..

6

CSS Customization

................................
................................
................................
.......................

7

Support

................................
................................
................................
................................
..........

9



Introduction

vmdTabs is Joomla plugi
n that allows tabs to be added to description areas for products in
Virtuemart. The plugin can display custom tab information, and standard Virtuemart fields such
as weight, length, Add to Cart, Reviews, and Related Products.

Installation


vmdTabs

is a Joomla 1.5 plugin and installs normally as a plugin. Simply go to the Extension
Manager


Install function as shown below and browse for the package to upload and install.

3



After installation,
instructions for the plugin will display. These instru
ctions are available within
the plugin which you can access at any time.


Virtuemart Option to Run Joomla Plugins


It is critical that Virtuemart

be set to run Joomla plugins, or the tabs will not be displayed. The
option to enable Joomla plugins is found on the Global Virtuemart Configuration tab. The option
is first in the list as shown below under Frontend Features.


4

Configuration


There are a
few configuration options for the plugin. After installation, go to the Plugin Manager
within Joomla 1.5 and look for
the plugin which is named
Content
-

Virtuemart Description
Tabs.

The configuration options are shown below followed by their definition:



Include jQuery Script



jQuery is the javascript library that powers vmdTabs. If your template
or other extensions are already loading jQuery, loading it again for vmdTabs may cause a
conflict. If jQuery is already being loaded, select the option to not
include the jQuery script in
your sites Header.


Select Tabs Theme



vmdTabs uses jQuery UI Themeroller to provide optional color schemes.
23 options are included with the base package
. You can select one of the predefined, or you can
visit
http://jqueryui.com/themeroller/

and roll your own

or to demo the various styles that are
included
. Directions on installing a custom theme option are included in the CSS Customization
Section


Minimum Height



This is the minimum height for all tabs. No tab will ever be shorter than this
figure. If the tabs need to be longer

to accommodate more information, they will automatically
expand in height as needed.


Width



This is the width of the tabs area.


Build
ing Tabs


vmdTabs is used in the Product Description area of Virtuemart. The commands are inserted as
shown below:


5



This plugin looks for {TAB=Tab Name} strings and creates tabs for each string found.
The
command is case sensitive. The word “TAB” must b
e in all caps to work.


The content area of the tabs is constructed from the text between these strings.

How this looks on
the frontend of Joomla in the Virtuemart shopping cart is shown below:



The code for the first tab
in the example above
is {TAB=Demo Shipping Estimator} The
information for the tab is found between its title and the next title.
There is no need, as in some
tab systems, to “close” a tab. The system automatically ends the tab at the next tab, or the end of
the product descri
p
tion if a tab is the final one

There are three basic types of inf
ormation that you can include:



Custom Data


Text or imag
es that you insert into a tab.



VM Field Data


You can use a command [VMFIELD=] followed by a field ID to load
standard Virtuemart fie
lds 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:

T
his command is case sensitive. The command
“VMFIELD
” must be in a
ll caps to work.

6



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 them in a tab. In order for plugins to work, you must che
ck the
box beside “Enable content mambots / plugins in descriptions?” option on the first page
of the
Virtuemart Configuration page.

V
irtuemart Standard Field Codes


In the following list, the code on the left is inserted in a DynaTabs tab to show the valu
e 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.
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] = $produc
t_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;

7

[VMFIELD=manufacturer_link] = $manufacturer_link;

[VMFIELD=vendor_link] = $vendor_link;

[VMFIELD=file_list] = $file_list;

[VMFIELD=add_to_cart] = Shows a Virtuemart Add
-
To
-
Cart container

[VMFIELD=reviews] = Shows the product reviews for this product

[VMFIELD=review_form] = Shows a product review form for
this product

[VMFIELD=related] = Shows the products related to this product


To include these fields such as Add to Cart, Related Products and Reviews, you might need some
changes to your FlyPage template to suppress these fields from the normal FlyPage.
These are
changes are covered in the section on CSS customization.

CSS Customization


ThemeRoller Themes

vmdTabs comes with 23 different themes from the jQuery UI Themeroller. All of the various
styles can be viewed at the jQuery UI site here:

http://jqueryui.com/themeroller/

In addition to the standard Themes which are available, you can use the customization option on
the Theme Roller site to “roll your own” custom theme.


If you choose to do
so, download the new theme and then FTP the package to the following
location:


plugins/content/vmdTabs/css/


Your new package will be automatically loaded in the drop box as an option. No other changes
are necessary.


Manual CSS
Changes


Many theme roller packages have active link, font class, f
ont size, and other overrides. These
may be a significant enhancement
to your site, but you may wish to adjust some of these CSS
attributes.


To change them manually, as
opposed to rolling a custom theme and setting them there, go to


plugins/content/vmdTabs/
css/


8

and find the c
orrect sub folder for the theme you are using. In that sub folder, you are look
ing for
this CSS file:


jquery
-
ui
-
1.8.12.custom.css


Most
desired changes (such as content f
ont, active link color, etc.) will be found in the

Component
UI Content Section as shown below:


/* Component containers

----------------------------------
*/

.ui
-
widget { font
-
family: Verdana, Arial, sans
-
serif; font
-
size: 1.1em; }

.ui
-
widget .ui
-
widget { font
-
size: 1em; }

.ui
-
widget

input, .ui
-
widget select, .ui
-
widget textarea, .ui
-
widget button { font
-
family: Verdana,
Arial, sans
-
serif; font
-
size: 1em; }

.ui
-
widget
-
content { border: 1px solid #555555; background: #000000 url(images/ui
-
bg_loop_25_000000_21x21.png) 50% 50% repeat; co
lor: #ffffff; }

.ui
-
widget
-
content a { color: #ffffff; }

.ui
-
widget
-
header { border: 1px solid #333333; background: #444444 url(images/ui
-
bg_highlight
-
soft_44_444444_1x100.png) 50% 50% repeat
-
x; color: #ffffff; font
-
weight: bold; }

.ui
-
widget
-
header a { co
lor: #ffffff; }


If you prefer not to have the Tab Theme control one o
r more of
the

content attributes listed above

(such as font
-
family)
, then comment out the lines to allow your Joomla Template

s CSS to take
precedence

or set the values in the CSS to the same as that o
f your Joomla Template.


Changes to FlyPages


If you plan to put the Add to Cart, Review Form, Reviews, or the
Related Products in a tab, you
will probably want to remove those options from the standard FlyPage template that you are
using.


To remove them, go to the following folder if you are using t
he Default Template:


components/com_virtuemart/themes/default/templates/product_details/


From there, select the FlyPage that you are using and open it for editing.


Look for the following codes:


<?php

echo

$related_products
?>

<?php

echo

$addtocart
?>

<?php

echo

$product_reviewform
?>



9

Delete these lines from the code to prevent them from showing up in the theme and in the tabs as
you set them up. Any other fields that you plan to put in tabs can also be removed from the
FlyPage code as well. An exampl
e would be
the
Manufacturer Link:


<?php

echo

$manufacturer_link
?>


This field can also appear in a tab, so having it in a tab and also elsewhere in the display on the
page could be unnecessary.



Support


For support, please use our Support forum at
http://www.corshops.com/31
-
vmdTabs
-
Virtuemart
-
Display
-
Tabs/

.