The following documentation explains the installation and configuration steps of VP SuperMart Joomla Template.

Installation

In the download section of VP SuperMart you will find two zipped packages:

1. Template Package
2. Quick Start Package

Template Package

This is a Joomla Package which includes the VP SuperMart Template, VP Brand Slider Module, VP Camera Slider Module, VP VirtueMart Compare Module, VP VirtueMart Compare System Plugin and additional file package for the template. You can install the package (pkg_vp_supermart.zip) itself through your Joomla Extension Installer and which will install the Template and the Modules all together to your site making your life little easier. After installation you can view this package as "VP SuperMart Package" in your extensions list as a Package. If you uninstall the same then it will also uninstall the template and the module from your site. Alternatively you can also unzip/unpack the package file at your Computer first and install the template and the modules one at a time through the Joomla Extensions Installer.

Alternatively you can also unzip/unpack the package file at your Computer first and install the template and the module one at a time through the Joomla Extensions Installer.

IMPORTANT

It is very important that you disable VirtueMart CSS and VirtueMart jQuery option in your VirtueMart Configuration area after installation of the template in your site. The template has its own jQuery library and VirtueMart Style sheet. So you do not need VirtueMart CSS and VirtueMart jQuery when you are using VP MegaMart template. If you do not disable these options you may face JavaScript errors and CSS conflicts.

Quick Start Package

This is the Quick Start package of the template and installing this will give you an exact clone of the demo site.

How to Install Quick Start Package?

A Quick Start package is a complete Joomla Installation package which includes Joomla, VirtueMart and all Demo contents. You do not need to install Joomla separately for this. The installation process in exactly same as standard Joomla Installation process which you can find here: https://docs.joomla.org/J2.5:Installing_Joomla

During the installation process you will find a button called "Install Sample Data" which you need to click to install the demo contents at your site.

Quick Start Package Installation Process:

1. Download the quick start package from the download section of our site.
2. Upload this zipped file to the public_html of your site i.e the root folder of your site using FTP or file manager in your hosting account cPanel.
3. Extract this zip file using the extract button in your root folder.
4. Go to phpMyAdmin in cPanel and create a database taking note of the username, password and name of the database.
5. Open your favourite browser type your domain and the normal Joomla installation process will start. Follow all the steps and when you come to the database site fill in the database details you created in step
6. Remember to install sample data because then only the demo contents will get installed in your site.

After the installation is completed open your Joomla database using phpMyAdmin tool and follow the below steps. Change jos with your database prefix as it will be different for each Joomla Installation.

1. Open jos_users table.
2. Find record with Super User name and click on edit icon.
3. Change Super User id value to 688 and click on "Go" button.
4. Open jos_user_usergroup_map table.
5. Find the record with group_id value 8, change user_id value to 883, then click on "Go" button.
6. If you are logged into the backend please logout and login again.

Configuration

A detailed documentation of the template's feature and configurations have been provided in the demo site. The same is again segregated below for easier understanding.

Basic Options

Go to your Template Manager and open VP SuperMart template. Now you will able to see all the available template options. To learn more about each options please refer to this article.

Advanced Options

You will find the Advanced Options of the template just below the Basic Options area. To learn more about each advanced option please see this article.

Module Positions

VP SuperMart comes with 32 unique module positions. To learn more about them please see this article.

Module Class Suffix

The template has 4 variants in Module Classes. To learn more please see this article.

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. To learn how to configure Mega Menu in the template system and more please see this article.

Product Comparison System

VP SuperMart comes with its own built-in product comparison system. To learn more please refer to this article.

VP Camera Slider Module

VP SuperMart comes with a very flexible Slideshow Module which gets installed into your site along with the template package. To learn more about the module please see this article.

VP Brand Slider Module

VP SuperMart comes with its own manufacturers/brands slider module. The module shows the manufacturers images automatically with dynamic carousel. To learn more about the module please see this article.

prettyPhoto Lightbox

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

prettyPhoto APIs have been integrated within VP MegaMart template so you can make full use of its features. It is very easy to setup your own image gallery or modal image/video zoom within your am article or in module. To learn more about the light box feature please refer to this article.

VirtueMart Custom Fields

VP SuperMart has extended the usage of Custom Fields in the template. This usage actually allows you show the product information in much for detailed and convenient manner to the visitor. We will spend some time to under them.

How to configure Button Style Cart Attributes as shown in the demo site

Create a Custom Field type as "String" and set the same as a Cart Attribute. Then call the custom field against your desired product. While entering the Value of the Custom field please wrap it with <p> tag. Example: If the value is XL enter <p>XL</p>. See the attached screenshot below for ready reference. This will show the custom field option as buttons just like the demo site.

Normal Custom Fields

If you are using any normal custom field (non-cart attribute) like string, image, text area, editor etc keeping Layout position blank then those fields will appear automatically in the tabular content area.

Normal Custom Fields with Layout position 'sidebar'

If you add any normal custom field (non-cart attribute) like string, image, text area, editor etc keeping Layout position as sidebar then those fields will appear automatically in the top side of the Product Details Page as a Link. The name of the Custom Field will appear as a Link with suffix *. When you click on the link then the Custom Field content will appear in a Modal Window where Custom Field Description will be used for the Title of the Box.

Cart Attribute Custom Fields

While creating a Custom Field if you select the option Cart Attribute as Yes then it becomes a Cart Attribute type Custom Field. See the screenshot below for reference:

You use Custom Field Type as String or Image or Cart Variant for Cart Attributes. The Layout position for any Cart Attribute should be kept blank as it will automatically shown just above the Add to Cart Button.

In VP MegaMart we have added a special feature by which you can extend the Description of any Cart Attribute by link the same to another Custom Field. Basically what it allows you to create a Custom Layout Position just where the normal description is show. Then you can create a Normal Custom Field with that new Custom Layout position.

How does the Description Field of a Cart Attribute work in VP SuperMart

• Option-1: Description Text: Normal Description.
  It will show the text just below the Cart Attribute in the Product Page.
• Option-2: Description Text: [mycustomposition].
  When you wrap the text by [ ] It will not show this text below Cart Attribute. Instead it will create a new Custom Layout Position where you can add another normal Custom Field as we did earlier for sidebar Layout Position. In this case the name of Custom Layout position will be mycustomposition instead of sidebar.
• Option-3: Description Text: Normal Description || [mycustomposition].
  Some time you may need to show normal text description for the Cart Attribute (as it is required for Custom Field Type - Cart Variant) but also want to add a Custom Layout Position where you can explain it in detailed. In that your text description will first then and the name of the new custom field position will be last. You need to separated them by || as shown above.