Open source training & tutorials from experienced, passionate people
By A Web Design
E-Commerce web stores often want to highlight a particular product(s). This can be because they have new products to promote, special offers or stock to clear. The VirtueMart e-commerce system will let you mark products as “On Special”.
VirtueMart provides a module (mod_virtuemart_featureprod_1.1.5.j15) in the complete installation package of VirtueMart.
mod_virtuemart_featureprod_1.1.5.j15.zip: This module will display only those products flagged as featured in VirtureMart. You can configure how many featured products you want to display in this module.
This tutorial, explains how VirtueMart Feature Product Module is implemented in VirtueMart.
To setup the VirtueMart Feature Product 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 from VirtueMart complete installation package folder to modules folder via the file browser that opens up. Select and Open the module zip file (mod_virtuemart_featureprod_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 Featured Products module. Click on that module to edit the configuration as shown in Diagram 9.
Diagram 9
On click of the link VirtueMart Featured Products 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 Featured Product Module:
Number of displayed products: This defines the number of products which will be displayed in the module.
Show Product Price?: Defines whether to display the product price or not.
Show Add-To-Cart Link?: Defines whether to display the Add-To-Cart Link or not.
Display Style: Here you can decide whether to display the products in a horizontal, vertical or table list.
Products per row: Only when Table is selected as Display Style: Defines the Number of columns per row in the table for the product snapshots.
Category ID(s): Here you can fill in one or more category IDs (comma-separated list), so that only products from the special Category are displayed. Leave blank if you want to display featured products from all categories.
Enable Cache: Select whether to Cache the content of this Module or not.
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 Featured Product Module will be successfully activated (enabled) as shown in Diagram 12.
Click on Preview in order to view the VirtueMart Featured Product Module on your website.
Diagram 12
The VirtueMart Featured Product 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
To uninstall the Featured Product Module, click Extensions -> Install/Uninstall, Click on Modules tab, a list of modules are displayed. Select the check-box adjacent to mod_virtuemart_featureprod 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
The Uninstall Module Success message is displayed as shown in Diagram 15.
Diagram 15
In VirtueMart, you can set specific product(s) as Featured Products by following these simple steps.
Log into the backend of Joomla as administrator, in the top menu locate the link Components. Click on Components, from the drop down menu that appears click on VirtueMart as shown in Diagram 16.
Diagram 16
The VirtueMart Control Panel window is displayed as shown in Diagram 17.
Diagram 17
In the Administration panel on the Left hand side, Click on Products --> List Products as shown in Diagram 18.
Diagram 18
The VirtueMart Product List page displays links to all the Products created by the sample data installed while installing VirtueMart and any product that the VirtueMart Admin may have created as shown in Diagram 19.
Click on any product link as shown in Diagram 19. In this case, the Chain Saw product link is clicked.
Diagram 19
Click on the Product Status tab of Update Item :: [productname] screen as shown in Diagram 20.
Diagram 20
There are various options for settings in the Product Status as shown in Diagram 21.
The “On Special” check box is used to indicate whether there are any specials running for the product. When checked, this product will be displayed on the "Featured Products Module".
Diagram 21
Check the checkbox of “On Special” as shown in Diagram 22.
Click on Save/Apply, to make sure the change is stored.
Diagram 22
The successful update message of the product is displayed as shown in Diagram 23.
Diagram 23
Once the product information in the VirtueMart database is updated the product will be displayed in the Featured Products Module on the Frontend of your website as shown in Diagram 24.
In this case, Chain Saw is displayed in Featured Products.
Diagram 24
VirtueMart allows you to mark multiple products as Featured Products but display these, let’s say, four at a time within the space allotted to them in the template.
For example:
You can mark 14 products as Featured Products but set VirtueMart Featured Product module to display only 4 products.
Each time the page is refreshed the Featured Products displayed will change, until all the 14 products have been displayed. Then the system will go back to displaying the first 4 products in round robin fashion until all 14 products are displayed again.
This is how VirtueMart can display featured products in carousel fashion. It helps keep the visitor coming back to view the page again and again, as there is fresh content visible each time, to see all featured products in your VirtueMart.
Please wait...