vmdTabs - Virtuemart Description Tabs - is a Joomla plugin which is demonstrated on this product page. The plugin has the following primary features:
Works in the regular product description area of Virtuemart
Simple command for setting up tabs - { TAB=Tab Name} . No need to close the tabs, the plugin automatically begins the next tab when the next command is encountered. NOTE:Tabs are entered in the product details separately on each product. The point of this plugin is to let you create products with unique tabs and not be limited by a Virtuemart Theme. If you have thousands of products, this may not be a feasible solution for you. To show standard Virtuemart Information in Standard Tabs, especially if you are importing a large number of products, we recommend the FlyTabs Virtuemart Themes in either light or dark variations.
Unlimited number of tabs. Tabs automatically start additional rows if needed.
Tabs can contain custom information, videos or images.
Works with any Virtuemart Theme and Joomla Template combination
Displays standard VM Field Data using the command followed by a field ID. This loads standard Virtuemart fields like weight, packaging, price, etc. This is the only customizable tab system for VM that can automatically load standard VM fields in tabs.
Show the Add to Cart, Product Reviews, Product Review Form, and Related Products in tabs using simple commands.
Uses JQuery library for advanced styling.
Works with regular Joomla content as well as Virtuemart. This is the only tabs system your site will need.
Options to set the Width and the Minimum Height.
100% CSS controlled. Plugin uses the JQuery UI ThemeRoller system for styling.
Plugin comes with 23 color options. You can also roll your own theme, or manually adjust the CSS yourself.
vmdTabs was created by CorFun to meet some important needs in our own Joomla and Virtuemart Development. Prior to developing vmdTabs, for projects that were not suitable for our DynaTabs or FlyTabs Virtuemart Themes, we used other tabs options but were never happy with the results. Here is a summary of the advantages that vmdTabs was designed to have over other tabs systems:
Stability - Other tabs system were very delicate when rendering in the Virtuemart space. To protect the tabs from being cutoff at the bottom or squished on the side, we found ourselves having to embed the tabs in tables. That added extra coding for us, and made it more difficult for us to train the store's team on how to add new products. We designed vmdTabs to have its own height and width parameters that match up to the product layouts. This fact, and the jQuery library used, makes the tabs stable for use in Virtuemart without coding tables or divs to surround the tabs. It just works. Everytime. Easily.
CSS - Tabs systems are usually lacking in display themes, and are hard to customize. For vmdTabs, we used the jQuery Themeroller system and included 23 themes that will match most Websites. You can also roll your own custom theme and easily add it to the options. In short, the design flexibility is second-to-none.You can easily get tabs to match your site design, and not have to worry with complex customization or using tabs that just don't match.
Standard Virtuemart Fields - Sometimes you want the Add-to-Cart fields in a tab. Sometimes you want the Related Items in a Tab, the Related Products, the shipping weight, etc. also in tabs. vmdTabs gives you that ability. Other tabs systems cannot use simple commands to optionally embed standard VM fields into tabs, vmdTabs was designed to do exactly that and using a simple command syntax that anyone can master. The commands also allow the use of the image files in tabs, allowing you to create a design in which all of the product information is inside tabs!
Automatically Starts Additional Lines - When the number of tabs fills up a line, vmdTabs automatically starts an additional line. An unlimited number of lines are possible. Other tabs systems attempt to do this, but the results are not always pretty. vmdTabs, because of its jQuery-based stability, gets good tab lines every time.
These are just a few of the major advantages to vmdTabs that make it well worth the purchase price.
The configuration options are shown below. The option to include the JQuery script can used to prevent conflicts in case your template or another plugin is already loading JQuery. The Width setting sets the width of the tab area. If the tab area is too small to accomodate all tabs, the system automatically puts the extra tabs on additional rows. The Minimum Height is the smallest height that the Tabs area can have. If a tab needs more height, it will automatically expand.
You can also select the Tabs Theme. vmdTabs using JQuery UI Theme Roller to provide the color scheme for the tabs.vmdTabs comes with 23 color options. You can select one of them, or roll your own by visiting the JQuery UI Themeroller page.
These screen captures show the color options included with vmdTabs. You can use one of these options, or "roll your own" using jQuery's Themeroller.
Black Tie
Blitzer
Cupertino
Dark Hive
Dot Luv
Eggplant
Excite Bike
Flick
Hot Sneaks
Humanity
Le Frog
Mint Choc
Overcast
Pepper Grinder
Redmond
Smoothness
South Street
Sunny
Swanky Purse
Trontastic
UI Darkness
UI Lightness
Vader
This is a list of the Virtuemart Standard Fields which can be displayed in Tabs. On the next tab, the fields are actually displayed as they show in products tabs.
In addition, you can show the Add to Cart, Product Reviews, Product Review Form, and Related Products in tabs using the commands below.
You can also show the images in tabs using the commands as shown below:
In this tab, we show some of the VM fields being displayed which were listed on the previous tab. The ability to display the standard VM fields and their information in tabs is one of vmdTabs greatest features. Using these commands, you can show the information as it is set up in VM.
The text before some fields has been manually added for clarity.
In addition to these fields, you can show the Add to Cart, Product Reviews, Product Review Form, and Related Products in tabs using simple commands. The Add to Cart button is shown below:
If there are attributes or other display items that fit in the Add-to-Cart area, they will automatically display here.
If you decide to put the Add to Cart, Related Products, and the Review information in tabs, you can remove them from the FlyPage through some easy code changes illustrated in the vmd Documentation.