VirtueMart Product Category Module

Introduction:

VirtueMart provides a product category module (mod_product_categories_1.1.5.j15.zip) in the complete installation package of VirtueMart.

This module displays the different product categories you have set up. It acts as a menu and is often placed in placed in the left or right sidebar of your template.

Product Category module provides you options to display different kinds of menu on your website. The different types of menu available are drop down, flyout, simple list or dTree structure.

If you want a nice drop down or flyout type menu, you have to install the base VirtueMart module which is explain in Lesson - VirtueMart Module. This is because many of the calls to the menu are in the JSCookMenu.js file. Some of the other files make a request call to some files from within the base VirtueMart module. Therefore if the base VirtueMart module is not installed the Javascript menus will not work.

You can install the base VirtueMart module from the modules folder of VirtueMart installation Package. After installation you will have all the necessary files that are used by the VirtueMart Product Category.

Now when you select Category display type as JSCook, TigraTree, and so on the menu will display perfectly.

This tutorial, explains how VirtueMart Product Category Module is implemented in VirtueMart.

Install:

To setup the VirtueMart Product Category module in Joomla, login to Joomla as administrator, by simply entering the url_of_your_website/administrator in your Browser. Enter the appropriate username and password {which was provided while installing Joomla} and then click on Login as shown in Diagram 1.

Diagram 1

After logging in as Joomla Admin, a Control Panel page opens as shown in Diagram 2. The Control Panel provides access to different Joomla functions and features.

Diagram 2

In the top menu, locate the link Extensions. Click on Extensions from the drop down menu that appears click on Install/Uninstall as shown in Diagram 3.

Diagram 3

An Extension Manager page opens. In the Upload Package File section, click the Browse button as shown in Diagram4.

Diagram 4

After clicking on the Browse Button a file navigator window opens. Navigate to the modules folder, which is within the VirtueMart complete installation package folder via the file browser that opens up. Select and Open the module zip file (mod_product_categories_1.1.5.j15.zip) from there as shown in Diagram 5.

Diagram 5

The zip file name appears in the Package File text box as shown in Diagram 6. Then click the Upload File & Install button.

Diagram 6

Once the file has been uploaded you will see the successful installation message as shown in Diagram 7.

Diagram 7

In the top menu, locate the link Extensions. Click on Extensions, from the drop down menu that appears click on Module Manager, in order to activate the module on the frontend as shown in Diagram 8.

Diagram 8

A list of modules in Module Manager is displayed. From the list of Module Name, locate the VirtueMart Product Categories module. Click on that module to edit the configuration as shown in Diagram 9.

Diagram 9

On click of the link VirtueMart Product Categories module, the Module: [Edit] screen is displayed in the Browser as shown in Diagram 10.

Diagram 10

Change the following configuration settings of module in this screen:

Enabled: Yes
Position: [desired location] (In this case the Position is Left)
NOTE: You should have a position free in your template in which this module can display its output.
Menu Selection: [desired main menu item when the module will display its output on the page]
(In this case the Menu Selection is Home).

NOTE: You can configure which menu items the current module display its output.
Select “All” to display this module for all menus.
Select “None” for not displaying in any menu
“Select Menu Item(s) from the list” to make it visible for specific menu items.

The following are the list of options provided in the Module Parameters of VirtueMart Product Category Module:

Category display type: You can set the display type to *links* to have the default display type: a link list. If you set it to *dTree*, the categories will be displayed in a dTree structure. The options are

JSCook Type: The Style for displaying the categories: Menu or Tree.

JSCookMenu Style: The Style for the JSCookMenu. Only fill in when you have selected JSCookMenu as Display Style.

JSCookMenu Orientation: If you choose JSCookMenu: Either let it display horizontal or vertical.

JSCookTree Style: The Style for the JSCookTree. Only fill in when you have selected JSCookTree as Display Style.

Label of the dTree Root: Whatever you fill in here: it will be displayed in the root of the dTree.

Enable Cache: Select whether to Cache the content of this Module.

Module Class Suffix: A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling.

Menu Class Suffix: A suffix to be applied to the css class of the menu items.

Now you're done. Just click on Save/Apply, to make sure the changes are stored as shown in Diagram 11.

Diagram 11

The VirtueMart Product Category Module will be successfully activated (enabled) as shown in Diagram 12.

Click on Preview in order to view the VirtueMart Product Category Module on your website.

Diagram 12

The VirtueMart Product Category Module would be displayed on the specific location of website; in this case it is displayed on the homepage of your website as shown in Diagram 13.

Diagram 13

Uninstallation:

To uninstall the Product Category Module, click Extensions > Install/Uninstall, Click on Modules tab, a list of modules are displayed. Select the check-box adjacent to mod_product_categories and then click the Uninstall icon at the top-right hand corner as shown in Diagram 14. This will successfully uninstall the module.

Diagram 14