eShoptrix II

Instruction Manual
May 2008 - GavickPro Template
Copyright 2008 GavickPro - http://www.gavick.com This manual cannot be redistributed without permission from GavickPro More info at: http://www.gavick.com

COPYRIGHT DISCLAIMER Gavick eShoptrix II May 2008 Template Manual Copyright 2008 GavickPro - http://www.gavick.com This manual cannot be redistributed without permission from GavickPro More info at: http://www.gavick.com Author: Paulo Seichinha - GavickPro FOR INFO, UPDATES, REQUESTS & CONTACT Check out Gavick.com, the official website of this Joomla! template manual and home to other popular templates, components and modules. Copyright 2008 GavickPro - http://www.gavick.com

Table of Contents
1

Introduction

Features of Gavick eShoptrix II Template . . . . . . . . . . . . . . . . . . . 4 2 Getting Started 5

Downloading eShoptrix II pack (with VirtueMart Quick Start included) . . . . . . 5 Files Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 VirtueMart 1 .1 .0 (Quick Start files) . . . . . . . . . . . . . . . . . . . . . . 6 Files Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 VirtueMart 1 .1 .0 Installation . . . . . . . . . . . . . . . . . . . . . . . . 6- 7 Template Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3 GavickPro Component - PhotoSlide GK1 9

Introducing PhotoSlide GK1 . . . . . . . . . . . . . . . . . . . . . . . . . 9 PhotoSlide GK1 Installation . . . . . . . . . . . . . . . . . . . . . . . 9 - 10 PhotoSlide GK1 Plugim Installation . . . . . . . . . . . . . . . . . . . . . . 10 Configuration (Add groups in PhotoSlide GK1) . . . . . . . . . . . . . 11 - 12- 13 4 Modules Installation and Configuration 14

Modules Installation - eShoptrix II . . . . . . . . . . . . . . . . . . . . . . 14 Configuration of Gk VM Header Module . . . . . . . . . . . . . . . . . . 14 - 15 Configuration of Gk VM LastProd Module . . . . . . . . . . . . . . . . 16 - 17 Configuration of Gk VM Category Menu . . . . . . . . . . . . . . . . . . 17- 18 5 Typography 19

Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 6 Module Positions 20

Modules Positions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 7 Modules Variations 21

Modules Variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 8 Template Parameters 22

Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Introducing eShoptrix II

Going beyond the traditional lead generation of eCommerce Templates and following the huge success received from the first eShoptrix Template, the GavickPro Team is proud to present the eShoptrix II Template for Joomla! 1.5.3. This fantastic template is mainly designed for use with Virtuemart 1.1.0 version, the most popular e-commerce solution for Joomla, giving a truly new meaning for your business presentation products. With perfect elegance and high top professional design, eShoptrix II is a perfect match for those who run an online retail business. eShoptrix II comes with the new and free version of Gavick PhotoSlide GK1 component that works with a specific module built for this template the Gavick VirtueMart Header Rotator. Also using a specific new, interesting and useful modules based on the framework mootools: Gavick Virtuemart Last Products slide show , that will help you to present products in an eye-catching way and the perfect Gavick Virtuemart Category Menu, with sub categories display for easy and better navigation. An overview of eShoptrix II key features: Tableless design and 100% css based. 3 color variations (green - orange - blue). Build support for the Virtuemart 1.1 stable Build support for the New PhotoSlide GK1 3 layout options: 3 columns (left+right+component), 2 columns (left or right+component), 1 column (component). All 13 modules are fully collapsible. 2 module variations built in. Optional IE6 Warning / Upgrade Notification IE PNGFix Built In Impressive built-in content style. 2 built-in menu options - Suckerfish menu and Moomenu. Lightweight, modern and fast-loading design. Joomla 1.5 Native W3C XHTML 1.0 Transitional. W3C CSS Valid. Fully compatible IE7, Firefox 2+, Flock 0.7+, Netscape, Safari, Opera 9.5 Delivered with source Adobe .PSD. Delivered with Quick Start Pack

Installing GavickPro eShoptrix II is quick and easy! The following guide will help you set up the eShoptrix II template on your Joomla! website. This guide includes an overview of the files included in the package, instructions on how to install the template, components, plugins and modules.

Getting Started

Downloading eShoptrix II Template Files

The first step in installing eShoptrix II on your Joomla! website is downloading all of the files from the GavickPro website. The eShoptrix II package includes an Quick Start pack by providing the complete Joomla solution with the Joomla 1.5.3 stable version, the VirtueMart 1.1 files needed and naturally the eShoptrix II template files. All these files will be needed to install the template, modules, plugins and components, and will allow you to customize your website. Here is a brief overview of the files available in the eShoptrix II release. Important: Please, first of all unpack the files inside the eshoptrixII_pack.zip eShoptrix II Bundle (eshoptrix2_pack.zip) This package includes the following:

Joomla! 1.5.3: - Open Source Content Manager System

The eShoptrix II Template (gk_eshoptrix2.tgz) - This is the template installation package you will use to install the template on your Joomla administrative panel.

VirtueMart 1.1 - Joomla eCommerce System (Component and modules needed for eShoptrix II Template)
Gavick Component - The eShoptrix II package comes with the New Fantastic PhotoSlide GK1 component (com_gk_photoslide.zip). Gavick Modules and Plugin: The package includes the following modules that are needed to set the template working: Gk VM Header Rotator (mod_gk_vm_header.zip) is the module that will display on your webpage the group that will be set on PhotoSlide GK1 configuration. Gk VM LastProd module (mod_gk_vm_lastprod.zip) will show the lastest products released on your VirtueMart store using a nice slide showl panel with buttons navigation placed on the right side. Gk VM Category Menu (mod_gk_vm_category_menu.zip) shows with a nice effect, the main and sub categories products of your VirtueMart store. Source files: The source files are all of the Photoshop files that you can use for complete customization of your website. These files include the logo, the page background, navigation buttons and an entire sliced copy of the eShoptrix II template .

Notice: The font type used on the Photoshop source files are not provided with the Template package.

VirtueMart 1.1.0 version pack (Quick Start files Overview)

The eShoptrix II use the most popular and complete ecommerce solution in Joomla CMS. The VirtueMart 1.1.0 stable version is available for free downloading in the oficial website - http://virtuemart.net. Notice: In this case, the Gavick Members dont need to download the VirtueMart package, since we provide the needed files along with the eShoptrix II package. Here is a brief overview of the VirtueMart files needed and included on the eShoptrix. VirtueMart Full Package (VirtueMart_1.1.0-COMPLETE_PACKAGE.j15.zip) This package includes all the files for your eCommerce Shop Installation. For the Gavick eShoptrix II the following files are needed for the main functionality of the template:

Component: VirtueMart Component (com_virtuemart_1.1.0.j15.zip)

Modules: The following modules are needed to be present on your eShoptrix II template: VM Login Form Module (mod_virtuemart_login_1.1.0.j15.zip) is the module that will display on frontpage the login form for your customers make their registration or identification. VM Currencies Module (mod_virtuemart_currencies_1.1.0.j15.zip) VM Shopping Cart Module (mod_virtuemart_cart_1.1.0.j15.zip) As your can see on the VirtueMart Package, theres more modules and plugins available for use and they can be installed if they are needed for your interest. Also theres an Instrution Manual file provide by the Authors of this great Component that can help you to understand and handling the full capacities of VirtueMart eCommerce Joomla Solution.

VirtueMart 1.1.0 Installation

After the normal Joomla! 1.5.3. installation, browse to your administration website and go to your Extension Manager Installer.

Step 2) Search the VM Login Form Module (mod_virtuemart_login_1.1.0.j15.zip), select it, upload and install. Step 3) Search the VM Currencies Module (mod_virtuemart_currencies_1.1.0.j15.zip), select it, upload and install. Step 4) Finally, search the last module needed - VM Shopping Cart (mod_virtuemart_cart_1.1.0.j15.zip), select it, upload and install. With this steps, you have installed the VM files that eShoptrix II need to his functionality.

Important Information:
When working with VirtueMart Category administration by creating your own Category, you have to set the following parameters to fit the template style. Category Browse Page: browse_3 category Flypage: gk_flypage.tpl

See the screenshoot example:

eShoptrix II Template Installation

Next to the VirtueMart 1.1.0 files installed, you will install the template file. Before starting, you must unpack to your local folder the files that are inside the eshoptrixII_pack.zip. Return to your Joomla administration, from the top menu, select Extensions > Install/Uninstall. Click the browse button, select select the gk_eshoptrixI2tgz, upload this file and install. This page will display an overview of the template, then select Continue... With the template installed, next we are going to show you how to install the others files available on the unpacked eshoptrix2.zip file.

GavickPro PhotoSlide GK1

Introducing PhotoSlide GK1

The New PhotoSlide GK1 component is totally rebuilded version of the old Gavick Photoslide tool and set a new step evolution of this great component. The new version opens an huge amount of possibilities, different ways and fantastic high quality designs to show your content with compatible modules that we will release in the future.

This Component will be available also for free download on http://tools.gavick.com

PhotoSlide GK1 Installation

Using the Joomla! Administrator, navigate to the administrative panel on your Joomla site. From the top menu, select Extensions > Install/Uninstall. Click the browse button, select the component file (com_gk_ photoslide.zip) and press Upload File & Install. A message will appear saying Upload component - Success. This page will display an overview of the component, then select Continue...

Before start working with the PhotoSlide GK1 component, there is an important step that we strongly recommend. Navigate to the main page of the component by going to Components > Gavick PhotoSlide GK 1 (if you followed the installation instructions above this option should be in the list of components). In there, press on the Check System option and you be able to see if all conditions are set correctly on your joomla website.

Selecting the PhotoSlide GK1 Component

Check System Browser appearance

Important: When checking the system, if some fields are with red text colour on the permissions column, you should test the uploading images, because in some cases it may shows initially the warning information, but after doing some tests, it will work perfectly.

PhotoSlide GK1 Plugin Installation

Important: Before adding any group on the Component, at least one plugin must be installed and enable. Step 1) Navigate to your PhotoSlide GK1 component browser and select Plugins on the component Menu. Step 2) On the left menu options, press Install Plugin option

By selecting this option, you be able to upload the two files needed to set an plugin on the component. Upload the following files and save: gk_vm_header.php gk_vm_header.xml

Important: Be sure that you use the right upload fields of the correspondent extension file. Step 3) After the upload and installation is finish, select the GK VM Header Rotator and enable the plugin by pressing the right button like the image shows.

If you follow the installation instruction above, you be able to see the enable Status of the plugin on this icon.

Important: If you disable an plugin installed (not UNISTALL) them this plugin is invisible on the list of types of groups when select add group option. Important: If you delete an plugin installed, them all groups, slides and images will be deleted also (we recomend to disable the plugins instead of deleting them, if you have unused plugins.)

Add groups to PhotoSlide GK1

Now You are ready to add groups to your PhotoSlide GK1. Step 1) To do this, enter on the Components > Gavick PhotoSlide GK 1 and press on the right side the Add Group button. By doing this step, you will see the add group browser and bellow theres the visible list of ONLY the enabled plugins available. Since theres only the GK VM Header Rotator you will select this module plugin for your group and press next on the right, like it shows on the following screenshot .

Step 2) Next you will need to set the following fields parameters . Group Name : The name that you want to give to your group (just for your orientation). Width: The width in pixels of the group to be displayed on the module (dont write px after the value) Height: The height in pixels of the group to be displayed on the module (dont write px after the value) Amout: The number of products images news that you will show on the module. Wordcount for short text: The number of words to be show on the short description of the product. Wordcount for long text: The number of words to be show on the long description of the product, when the visitor set is cursor hover image. The rest of the fields to set are set with logical value (enable or disable) - Show title - Show text - Show price - Show link.

Example values set on the demo template

After setting all the fields, save the group. Step 3) Now that the group is created, we will insert content by selecting the group, pressing is own link.

Next press Add slide to create a slide in the group.

And fill the following parameters fields: Name - The name of the slide. Image - Heres where you select and upload your image. Product - The direct link to a specific product available on the VirtueMart database. Style of Image - Stretch or dont stretch image options. After all set, them save slide.

Example of slides set on the demo group template.

By pressing the preview image option (real size).

Important Notices and Recommendations:

In the module of the PhotoSlide GK1, where you need to set the ID of the group it must always be INTEGER value (number) and not the name of the group (We will remember this again in the modules configuration section). When deleting a group on the PhotoSlide GK1 administration, them all slides and images connected with the group will also be deleted. The PhotoSlide GK1 component support GIF, JPG and PNG normal format image. It supports transparent 8-bit PNG files with alpha channel, but doesnt support transparent GIF image format. We recommended to set stretch image option, because on unused place will be filled by black background. All preview images in group view have real size (size of uploaded image). So its recommended to upload small images. Additional important fact - on some PHP servers theres a limit for operation memory and can stop the process of creating images. Another very important recommendation, when creating description for slides in PhotoSlide module for header module, you should NOT use quotes () in text, because it can causes erros. Is highly recommended that in any cases you dont use special characters in description of products.

Module Installations and Configurations

Module Installations - eShoptrix II

There are three Gavick modules provided on the eShoptrix II package and we will start their installation on your Joomla! 1.5.3 webpage. Gk VM Header Rotator (mod_gk_vm_header.zip) is the module that shows the selected products from component VirtueMart, set on the group content configuration of PhotoSlide GK1. Gk VM LastProd module (mod_gk_vm_lastprod.zip) will show the lastest products released on your VirtueMart store using a slide scroll panel with buttons navigation placed on the right side. Gk VM Category Menu (mod_gk_vm_category_menu.zip) shows with a nice effect, the main and sub categories products of your VirtueMart store.

Modules Installation Procedure: Navigate to the administrative panel on your Joomla site. From the top menu, select Extensions > Install/Uninstall. Click the browse button, select the module file and press Upload File & Install. A message will appear saying Upload module - Success. This page will display an overview of the module, then select Continue...

Please, do the same steps of installation module on all three modules above indicated.

Configuration of Gk VM Header Rotator Module

Since the last Chapter ends on PhotoSlide GK1 group configuration, we will start by configurate the Gk VM Header Rotator (mod_gk_vm_header.zip). From the top menu, select Extensions > Modules Manager and find the Gavick VirtueMart Header Rotator (mod_gk_vm_header.zip). Entering on the administration of this Module, we will analize the different fields parameters.

Inside the Gavick VirtueMart Header Rotator, we will find to following parameters fields on the right side: Module Class Suffix - Provides the possibility of set a css class that allows individual module style. Module unique ID - Set here the unique ID of module. You can use more than one module on your Joomla! 1.5.3 website. For each one, this ID must be different. Group ID - Here you must set the ID group that you will use from PhotoSlide GK1. This value must always be INTEGER value (number) and not the name of the group. Please, check the ID group on the PhotoSlide GK1 administration panel. Text background - Text colour definition (Hex value). Text background opacity - Set value between 0 and 1 (float value) Animation Speed - Set the animation speed on the module. Animation Interval - Set the pause time value between animations. On the Advanced Parameters panel, you can enable or disable the use of Mootools Library Javascript and the Script Engine built for this module. After setting all parameters, enable the module, set on header position and save. Important ! If in your Joomla Website, the use of Mootools is already called by another component or module script, them is highly recommended to avoid most probally problems, that you disable the use of Mootools and enable only the script engine. This recommendation is naturally valid if you want to use more than one Gavick VirtueMart Header Rotator Module.

Example of parameters values use on the demo eShoptrix II template

Configuration of Gk VM Latest Product Module

From the top menu, select Extensions > Modules Manager and find the Gavick VirtueMart Latest Products Module (mod_gk_vm_lastprod.zip). Entering on the administration of this Module, we will analize the different fields parameters. Module Class Suffix - Provides the possibility of set a css class that allows individual module style. Module unique ID - Set here the unique ID of module. You can use more than one module on your Joomla! 1.5.3 website. For each one, this ID must be different. Number of loaded products - Here is define the number of products witch will be loaded on the module. The following fields parameters are set with logical values Yes or No: Show Product Price Show - Add-To-Cart - Show short product description Wordcount for short description - Set the number of words on short description product. Rows - Sets the number of rows used on the slide lastest products module. Cols - Sets the number of columns used on the slide lastest products module. Category ID - Here you can set a filter to show only the latest products of specific category. You can leave this field blank if you want to show products from all categories. Animation Speed - Set s the animation speed of the slide show products. On the Advanced Parameters panel, you can enable or disable the use of Mootools Library Javascript and the Script Engine built for this module.

After setting all parameters, enable the module, set on top position and save.

Important ! If in your Joomla Website, the use of Mootools is already called by another component or module script, them is highly recommended to avoid most probally problems, that you disable the use of Mootools and enable only the script engine. This recommendation is naturally valid if you want to use more than one Gavick VirtueMart Header Rotator Module.

Example of parameters values use on the demo eShoptrix II template

Configuration of Gk VM Category Menu Module

From the top menu, select Extensions > Modules Manager and find the Gavick VirtueMart Category Menu Module (mod_gk_vm_category_menu.zip). Entering on the administration of this Module, we will analize the different fields parameters. Module Class Suffix - Provides the possibility of set a css class that allows individual module style. Max. Category Amount - Set here the higher value of Category display. Max. Sub Category Amount - Set here the higher number of sub category display on your Menu. After all parameters values are set, save the configuration by placing the module on advert2 position.

Example of parameters values use on the demo eShoptrix II template

Typography

This page presents most of typographical aspects of eShoptrix II template. Make your readers happy with great Typography and User Experience!

Modules Positions

eShoptrix II fully supports full width configurations for use with galleries or forums, make sure you do not publish any modules in right, left and the component will fill the entire width.

Modules Variations

eShoptrix II provides the ability to use 2 module variations to increase the appeal of your module content. To use these you just need to add for example -lastproduct in the module class suffix parameter of the module in the module manager.
The default css class style set on the right position.

The -header css class style looks like this. Built for the Gk VM Header Rotator Module

The -lastproduct css class style looks like this. Built for the Gk VM Last Product Module

Template Customization

You can customize core settings of eShoptrix II to match the look and feel of the Joomla site youve been wanting. Under the Joomla Administrative control panel, navigate to Extensions > Template Manager. Select eShoptrix II and you have the ability to choose some options of template parameters.

Graphic Source Files:

Along with the template package, are included the .psd source files that you can use, by working with PhotoShop Graphic Editor, changing to your own desire colours or effect. After doing your own changes, you must Save for Web & Devices format. Go to the image folder produced and upload the same files that are present on the eShoptrix II template image folder. Once again, we recommend that you make this change, by testing locally or on some test joomla installation website.