Product Comparison System

    VP SuperMart has a built in ajax product comparison system which works with a help of a system plugin and a module. Since it does not use any component set up process the comparison page is little different. Therefore we will explain the process step by step below.

    After the installing the template package (pkg_vp_supermart.zip) in your site go the Plugin Manager and enable the plugin called "VP VirtueMart Compare".

    Product Comparison Tutorial

      

    Now go to Content >> Category Manager and create new content category with any name you like. For our example lets assume the name of this category as "Shop"

    Next go to Content >> Article Manager and create a new Article. In the title field of the article enter the name that you want to show as the title of the product comparison page. For our example consider the name as "Compare Products". Select the article category as "Shop" which you created in the previous step. Now in the content area of the article enter {loadvpcompare} as the only text. This a mos text which will be replaced by "VP VirtueMart Compare" plugin with the compare page data afterwards. Now you can save the article. 

    Product Comparison Tutorial

     

    After saving the article please note down the Article ID which we will require later. 

    Product Comparison Tutorial

     

    Now go to Menu >> Menu Manager >> Add New Menu and create a new Menu. We will not publish this Menu in the site therefore lets name the Menu as "Hidden Menu"

    Now go to Menu >> Hidden Menu >> Add New Menu Item and create a direct menu item for the Article which we have created earlier for the Compare page. Lets name the menu item as "Compare Products". See the below screenshot for better understanding. 

    Product Comparison Tutorial

      

    Now save Menu and note down the the Menu ID which we will need in the next step. 

    Product Comparison Tutorial

     

    Now go to Joomla Module Manager and publish the module called "VirtueMart Product Compare" at module position - 'compare'. Enter the previously noted Article ID and the Menu ID in the respective fields of the module.

    Product Comparison Tutorial

     

    Do not forget to select the menu item in the module where you want the product comparison module to be displayed.

    Done.

    VP Brand Slider Module

    VP MegaMart comes with its own manufacturers/brands slider module. The module shows the manufacturers images automatically with dynamic carousel. 

     

    Brand Slider

     

    It comes with some unique and very flexible configuration options. Please see the basic options of the module below:

     

    virtuemart_brand_slider_module

    VP Camera Slider Module

    VP SuperMart comes with a very flexible but professional Slideshow Module which get installed into your site along with the template. You can add up to 10 slides in this module and get full control over the image, texts and button of individual slides. The module also has various animation features. Please see the screenshot of the Basic Options of module below for ready reference.

     

    VP Camera Slider Module Settings

    Hybrid Mega Menu

    VP SuperMart comes with its own built in Hybrid Mega Menu system. It does not need any separate menu module for this. Standard Joomla Menu Module gets transformed into a Mega Menu system with the template. 

    We call this as Hybrid Mega Menu because it not only has the ability to show modules in menu but also can automatically add VirtueMart Categories to main menu. 

    We will now explain how to setup the menu in VM SuperMart template system.

    First create a standard Joomla Menu from Joomla Menu Manager. Lets assume that the name of the menu that we have created in Main Menu. Now add the default page of your site to the Main Menu. Lets assume the same of the default menu item is Home

     

    Mega Menu Tutorial

     

    Now go to Joomla Module Manager and create a Menu Module for the Main Menu and publish the same to Module Position menu. See the screenshots below for better understanding.

     

    Mega Menu Tutorial

    Mega Menu Tutorial

    Mega Menu Tutorial

    Mega Menu Tutorial

     

    Now to load the VirtueMart Categories to this main menu, create a new VirtueMart Categories Module and publish the same to module position mega-menu. See the below screenshots.

    Mega Menu Tutorial

    Mega Menu Tutorial

     

    Now you have published the Main Menu Module at module position menu and VirtueMart Categories Module at module position mega-menu. Now go to the VM MegaMart Template settings area from your template manager and enable the option to Load VirtueMart Categories in Main Menu. Read this to know more about this template settings. - Main Menu Settings

    After completing the above steps the Main Menu will automatically load the VirtueMart categories in it.

     

    Now we also want to load normal Joomla Modules at a sub-menu in Main Menu. To do that go to Module Manager again. And publish the desired module/modules at the module position mega-menu. After publishing the module please note down the Module ID because we will need this afterwards. Lets assume we want to load the Login Module within the Main Menu. To do that create a new Login Module and publish the same to module position mega-menu. See the screenshots below for ready reference.

    Mega Menu Tutorial

    Mega Menu Tutorial

     

    Now we have to create a root level parent menu item below which this this Login Module will be displayed on mouse over. For that go to Main Menu Manager and create a Menu item at main menu root. As your must have noticed that we have set the default number of columns for the mega menu in the  Main Menu Settings. Now if you want you can override that particular number of columns settings for this parent item by providing your desired number in the Note field of the menu this item in this format [col=4]. Here the number 4 indicate the number of columns for this root menu item. You can change this number any number between 1 to 6. Mega Menu can accommodate maximum 6 columns

    Lets assume the name of this root level parent menu item as Mega Menu (you can always change the name of this menu item as per your requirement) and see the screenshots below.

     

    Mega Menu Tutorial

    Mega Menu Tutorial

    Mega Menu Tutorial

     

    Now create another menu item. Select the Menu Item Type as Text Separator. In the Name field of this menu item enter the ID of the Login Module which we have published at mega-menu module position in this format - [modid=142]. Select the parent item of this menu as previous root level menu item which we have just created (i.e. Mega Menu). See the screenshot below.

     

    Mega Menu Tutorial

    Mega Menu Tutorial

     

    That's it. Now Login Module will be displayed as a sub-menu to the Mega Menu. Similar way you can load any other static module in your Mega Menu.

    VP SuperMart comes with Quick Start package. So if you want to see how the demo site is configured please use this package. It will give you an exact clone of the demo site and you will be able to visualize every tit bits of the demo site settings and configurations. 

    Contact Us

    Vestibulum sed et justo Vestibulum Vestibulum natoque orci porttitor Proin felis.

    +61-1-924073456
    info@vp-supermart.com

    Stay In Touch

    Follow us. Don't miss important updates in future.

    Top