Open Source Varsity

1 © Open Source Varsity. All Rights Reserved.

VirtueMart Cart Module

Introduction:

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

VirtueMart.

mod_virtuemart_cart_1.1.5.j15.zip: This module shows the contents of the cart. This mini cart contains a link to

main cart page.

This tutorial, explains how VirtueMart Cart Module is implemented in VirtueMart.

Install:

To setup the VirtueMart Cart 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 wasprovided while installing Joomla} and then click on Login as shown in Diagram 1.

Diagram 1

Open Source Varsity

2 © Open Source Varsity. All Rights Reserved.

After logging in as Joomla Admin, a Control Panel page opens as shown in Diagram 2. The Control Panelprovides 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

Open Source Varsity

3 © Open Source Varsity. All Rights Reserved.

After clicking on the Browse Button a file navigator window opens. Navigate from VirtueMart completeinstallation package folder to modules folder via the file browser that opens up. Select and Open the module zip

file (mod_virtuemart_cart_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

Open Source Varsity

4 © Open Source Varsity. All Rights Reserved.

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

Shopping Cart module. Click on that module to edit the configuration as shown in Diagram 9.

Diagram 9

Open Source Varsity

5 © Open Source Varsity. All Rights Reserved.

On click of the link VirtueMart Shopping Cart module, the Module: [Edit] screen is displayed in the Browser asshown 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).

Open Source Varsity

6 © Open Source Varsity. All Rights Reserved.

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:

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

individual module styling

Cart Direction: You can select whether the newest product is displayed first or last in the cart.

Display Cart in Grey Box: You can select whether to display the cart in a grey box

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

Diagram 11

Open Source Varsity

7 © Open Source Varsity. All Rights Reserved.

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

Click on Preview in order to view the VirtueMart Shopping Cart Module on your website.

Diagram 12

The VirtueMart Shopping Cart 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

Open Source Varsity

8 © Open Source Varsity. All Rights Reserved.

Working:

Click on the Shopping Cart link in the Main Menu as shown in Diagram 14.

Diagram 14

Various products, segregated by category, are displayed along with images where available, a brief description

and price. Click on any product link under head Categories as shown in Diagram 15. In this case, click on HandTools category link

Diagram 15

Open Source Varsity

9 © Open Source Varsity. All Rights Reserved.

The product(s) related to that category will be displayed with details. Click on any Product details link as shownin Diagram 16. In this case, click on Hammer’s Product Details link.

Diagram 16

The next window will display that particular product in a lot more detail, such as its description, specifications,

shipping details and reviews.

Select the Size, Material and Quantity according to requirement from the option provided in the small box.

Add the product into your cart by clicking on Add to Cart button as shown in Diagram 17.

Diagram 17

Open Source Varsity

10 © Open Source Varsity. All Rights Reserved.

As soon as you click on Add to Cart, the product gets added to the cart. The VirtueMart Shopping Cart willdisplay the list of product added in detail as shown in Diagram 18.

Click on Show Cart as shown in Diagram 18.

Diagram 18

On clicking the Show Cart, the VirtueMart Cart page is displayed as shown in Diagram 19.

Diagram 19

Open Source Varsity

11 © Open Source Varsity. All Rights Reserved.

Uninstallation:

To uninstall the VirtueMart Cart Module, click Extensions -> Install/Uninstall, Click on Modules tab, a list of

modules are displayed. Select the check-box adjacent to mod_virtuemart_cart and then click the Uninstall icon atthe top-right hand corner as shown in Diagram 20. This will successfully uninstall the module.

Diagram 20

The Uninstall Module Success message is displayed as shown in Diagram 21.

Diagram 21