This document describes the development of an Avactis online storefront and its integration into an existing website.
Using this information you will be able to:
create a new Avactis online storefront;
integrate your Avactis online storefront into an existing website.
The document is designed to help web masters and web developers (designers) who have a basic knowledge of HTML. PHP programming knowledge is not required to develop and integrate an Avactis online storefront.
If you don't have time to develop a new internet storefront and integrate it into your site, you are welcome to use the standard online ecommerce store design, which is provided as part of Avactis Shopping Cart and is available after installation of the software.
While you develop a new ecommerce store and integrate an Avactis Shopping Cart, you may find the following help documents useful:
"Understanding Avactis Shopping Cart Tags" explains the basic principles of Avactis tags and how they are used to create an online storefront. We recommend that you review this document before you start the development and integration of an ecommerce store software into your site.
"Avactis Tag Library" and "Avactis Store Blocks Customization" are reference materials which help explain the rules governing the use of all tags as well as the customization of store blocks.
Five Easy Steps to Integrate an Online Storefront into Your Site
Step 1. Installing Avactis Shopping Cart Software
Before you begin the development and integration of an online storefront, you should install Avactis Shopping Cart. The installation process is described in Installing Avactis Shopping Cart.
After a successful installation, the following folders and files will be created (in the installation folder for the Avactis ecommerce software):
avactis-images - This folder stores the images of all products and categories that are added to the online catalog from the Admin Area.
avactis-system - A system folder. All system files are stored here. You should not make any changes to files in this folder.
avactis-templates - This folder contains all store block templates. You can edit these templates.
classic / flowers - Examples of websites provided with Avactis ecommerce software. Your copy of the software may include different folder names.
layout.ini - The configuration file which is used to integrate Avactis Shopping Cart into your site.
help.php - The Help file. It allows to define the initialization string for your website and URL.
Step 2. Creation of Online Storefront Layouts
When a customer shops at an Internet store, he or she browses through the ecommerce catalog of products and then places an order. Even though there is no limit to how many viewable categories and products an online catalog may contain, all online storefront pages can be functionally divided into just a few types:
the page for viewing the list of products (and subcategories) of the current category;
the page that displays the product description;
the shopping cart page;
Product search page;
and the order placement page (checkout).
There is also a special page for displaying information that the ecommerce store is closed. In Avactis Shopping Cart, the above pages are called storefront pages, or layouts.
The table "Online Storefront Pages (Layouts)" lists all pages that serve as basis for the Avactis online storefront. This table also includes some examples of storefront pages on which online storefront components will be placed.
Table: Online Storefront Pages (Layouts)
Storefront Page
PHP file (example)
Examples
The list of products (and subcategories) of a category.
In a functional online store, this page is used to display the list of products and subcategories of the selected category.
Product description display (Product Info)
In a functional online store, this page displays the detailed information about the product currently selected.
Checkout Process
This page defines the design of the checkout page. Depending on the configuration, the checkout process can be divided into one or more steps.
After Step 1 is completed, we have 5 pages of our future online storefront. All storefront pages in Avactis online storefront work independently of each other, therefore any PHP page of the existing website can act as a storefront page, and it can have any custom design that you choose. Storefront pages can be stored in any folder. In the following steps to these pages we will add a Navigation Bar, a Product List, a Product Info, etc.
Step 3. Configuration file Layout.ini
After Step 2 is complete, we have described all of the site pages that will act as storefront pages. Now we need to create the configuration file Layout.ini. The configuration file allows the system to define the paths to storefront pages (since in Step 2 we only defined their names, but not their locations). In addition, layout.ini is used to defined paths to store block templates, which are described in detail in Step 4.
If you encounter a problem with defining the paths for use in Layout.ini, do the following:
copy the file help.php to that folder of your site which contains the storefront pages;
open help.php in your browser;
you will see information that includes SiteURL and SitePath; copy these values into Layout.ini.
A configuration file example is shown below.
File Layout.ini
[Site]
;The path and URL of the online storefront.
;The paths and URLs of all storefront pages listed below, as well as the
;TemplateDirectory path, are specified relative to SiteURL and SitePath.
SiteURL = http://www.avactis.com/avactis-store
SitePath = /html/avactis-store
[Templates]
;The path to the folder containing store block templates.
;By default, store blocks use the system templates contained in the folder avactis-templates.
;To use a different set of templates, uncomment the line TemplateDirectory.
;The path to the template folder is specified relative to SitePath.
;TemplateDirectory = my-templates
[ProductList]
;This section specifies the file name and the path to the file of the page that
;displays the list of products and subcategories of the selected category.
;The file path is specified relative to SitePath.
Default = product_list.php
[SearchResult]
;This section defines the file path for the site page where catalog product
;search results will be displayed.
;The file path is specified relative to SitePath.
Default = search_result.php
[ProductInfo]
;This section specifies the file name and the path to the file of the
;page that displays the selected product description.
;The file path is specified relative to SitePath.
Default = product_info.php
[Cart]
;This section specifies the file name and the path to the file of the page that displays
;the Shopping Cart contents. The file path is specified relative to SitePath.
Default= cart.php
[Checkout]
;This section specifies the file name and the path to the file of the checkout page.
;The file path is specified relative to SitePath.
Default = checkout.php
[Closed]
;This section specifies the file name and the path to the file of the Store Closed page.
;The file path is specified relative to SitePath.
Default = store_closed.php
SUMMARY
After Step 3 is completed, we have a finished configuration file which specifies the paths to pages created in Step 2. It also specifies the paths to templates of online storefront components Navigation Bar, Product List, Product Info, etc. The file layout.ini must be stored in the installation folder of Avactis ecommerce software. If you choose to use the system file layout.ini as the basis for creating a custom configuration file, you should first make an extra copy of it in a separate folder. This will provide you with the original working configuration file at all times.
Step 4. Integration of Avactis Store Blocks
In Step 2 we created the storefront pages - layouts on which the online store components will be placed later. Ecommerce storefront components include Navigation Bar, Product List, Product Info, etc. They are also called store blocks.
In Step 3 we configured the file Layout.ini, which specifies the paths to storefront pages and store block templates.
Following the instructions for Step 4, you will be able to add the necessary store blocks to storefront pages - Navigation Bar, Product List, Product Info, etc. These store blocks are provided with Avactis Shopping Cart software and have a predefined design. All templates of online store components are stored in the folder avactis-templates, which is located in the installation folder for Avactis ecommerce shopping cart software.
To integrate store blocks, in the first line of each storefront page you must place the initialization string for the shopping cart software. The initialization string provides the full path to the installed Avactis Shopping Cart software.
To determine the initialization string, use the file help.php (see instructions in Step 3).
After the initialization string, each storefront page includes some tags that call online storefront components or some information about the product or category. For the full list of tags, please refer to Avactis Tags Library.
After this, all storefront pages will contain all of the required components for a functional internet storefront.
The table Storefront Pages with Store Blocks shows examples of pages with store blocks integrated into them.
Table: Storefront Pages with Store Blocks
Storefront Page
PHP file (example)
Examples
The list of products (and subcategories) of a category.
In a functional online store, this page is used to display the list of products and subcategories of the selected category.
Product description display (Product Info)
In a functional online store, this page displays the detailed information about the product currently selected.
Checkout Process
This page defines the design of the checkout page. Depending on the configuration, the checkout process can be divided into one or more steps.
After Step 4 is completed, we have a fully functional ecommerce storefront which allows us to browse through the online catalog of products and place orders. At this stage, the components Navigation Bar, Product List, Product Info, etс. have the predefined system design. To change the design of these components, please follow the instructions for Step 5.
Step 5. Customization of Online Storefront Design
After all of the above steps are completed, you have a fully functional online storefront integrated into your website.
Avactis Shopping Cart software comes with a standard set of store blocks (Navigation Bar, Product List, Product Info, etc), which have predefined design. Since online store components can be subject to various requirements, this step is meant to help you customize the look and feel of the store blocks according to the required design, thanks to the extensive features of Avactis software.
The templates of online store components are stored in the folder avactis-templates. For help with modifying the design of templates, please refer to Avactis Store Blocks Customization, which explains in detail the rules for modifying the design of store block templates.
Store block templates are simple HTML pages which can be edited easily.
For security, you should make an extra copy of the system templates in a separate folder before you begin using them as the basis for creating new custom templates. This will provide you with the original working store block templates at all times.
SUMMARY
After Step 5 is complete, we have a fully functional online storefront having the required design. This concludes the integration process!
Developing an Online Storefront for Distribution
If you are a web designer or a web developer, you can use Avactis Shopping Cart as the basis on which to build full-blown websites and distribute them independently of Avactis Shopping Cart software. All the user should do is install the Avactis Shopping Cart software, copy your design package into any folder, specify the installation location, and voila - the website is ready to be used.
Avactis Shopping Cart is made so that you can create designs of custom store blocks (Navigation Bar, Buttons, Product Info Blocks, etc) as well as the whole online storefront, including storefront pages and store block templates. That means you can develop designs for store blocks and distribute them as you like. You can also develop and distribute designs for fully functional websites. In doing this you distribute your designs independently of the software, thus there is no need to buy additional licenses for any design you create.
In the given example, all store block templates are located in the folder my-templates.
The first line of each file of an online storefront page includes the command to run "init.php". This instruction helps avoid including the initialization string for each individual file. The initialization string is specified only once in the file init.php.
Another feature of init.php is that it specifies the configuration file my-layout.ini, which is provided with the package. This is done in the following string:
Thanks to this directive, it is possible to get around (ignore) the system configuration file layout.ini. As a result, the user has a completely independent, custom online storefront.
After the user receives your package, only one thing remains before the online storefront can be launched. In init.php the user should specify the path to Avactis Shopping Cart; this can always be done by using help.php (see Step 3 above). The site is now finished and ready to be used.
Creating Custom Designs for Categories and Products
With Avactis Shopping Cart you can create unique custom designs for pages displaying individual products or lists of products and/or subcategories, for any category of an ecommerce storefront.
Below you will find some examples showing how to create custom designs for a selected product and for the list of products and subcategories of a selected category.
Custom Category Page Design
When you select a product category in the catalog, the list of products and subcategories of that category is displayed. Аvactis Shopping Cart allows you to create any custom design for the list of products and subcategories, for any given category.
To do this, in the file layout.ini, in section [ProductList], use the directive Categories {} and specify category ID(s) in the braces.
Here is an example of using the directive Categories {}:
The statement in line "Categories {3+}" specifies that the layout "product_list_dvd.php" will be used for the root category with ID=3 and all its subcategories.
The statement in line "Categories {5,8,12}" specifies that the layout "product_list_books.php" will be used for root categories with IDs equal to 5, 8 or 12.
Both "Categories {7}" and "Categories {7+}" are present in the file at the same time. This means that "product_list_electronics_new.php" will be used for the root category with ID=7, but for all its subcategories the specified layout is "product_list_electronics.php". If the string Categories {7} wasn't there, then the instruction for Categories {7+} would be applied to the root category with ID=7.
For all other categories the layout is specified as product_list.php.
The statement in line "Categories {3}" specifies that the product info layout "product_info_dvd.php" will be used for all products in the root category with ID=3.
The statement in line Categories{4,6} specifies that the product info layout "product-info-CD.php" will be used for all products in the root categories with ID=4 or 6.
The statement in line Categories{7+} specifies that the product info layout "product-info-electronics.php" will be used for all products in the root category with ID=7 and all its subcategories.
The lines Categories{9} and Categories{9+} are included in the file at the same time. This means that the product info layout "product-info-books_new.php" will be used for all products in the root category with ID=9, but all products in its subcategories will be displayed according to the layout "product-info-books.php".
The statement in line Products{1} specifies that the product info layout "product-id-1.php" will be used for the product with ID=1. That is, this particular product will be displayed according to a distinctive detailed product description page.
The statement in line Products{2,5,8} specifies that that the product info layout "product-id-2-5-8.php" will be used for the products with ID=2, 5 or 8. These three products will be displayed according to a distinctive detailed product description page.
