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-layouts - This folder contains the storefront-layout.ini which is used to integrate Avactis Shopping Cart into your site.
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.
storefront-files - This folder contains files directly related to Storefront design: image files ("images" folder), common files for all Storefront pages ("includes" folder), javascript files, and the style files large-image.css and stylesheet.css ("style" folder), which define all the styles used in the website's design.
Almost all other files are Storefront pages and are included in the demo installation package. Your files may have different names; some files may be absent. Note:*All files listed inavactis-layouts/ storefront-layout.ini{*} must be present:
about.php - Information about your store.
cart.php - Shopping Cart contents are displayed on this page. This file is required.
checkout.php - Checkout Process page. This file is required.
contact-us.php - Contact information page.
helper.php - The Help file. It allows to define the initialization string for your website and URL.
index.php - Customers see this page when they access your website.
init.php - This file is used at the very beginning for all store files. It is required for initializing the system. More details are provided below. This file is required.
product-info.php - Displays detailed information about a product. This file is required.
Read_Me_First_eBusiness.html - This file provides information Avactis Shopping Cart and contains some useful links.
search-form.php, search-results.php - Products and Categories searching pages.
store.php - This page displays the list of products (and subcategories) of a category.
store-closed.php - This is the page your customers see when the store is unavailable. This file is required.
store-special-offers.php - This page displays the list of Special Products. The page is not required.
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 storefront-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 storefront-layout.ini (you can simply edit the existing file). An example of such a file, which is used in the Flowers Store, can be found in the folder avactis-layouts. 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, storefront-layout.ini is used to define 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 storefront-layout.ini, do the following:
copy the file helper.php to that folder of your site which contains the storefront pages;
open helper.php in your browser;
you will see information that includes SiteURL and SitePath; copy these values into storefront-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/"
; SiteHTTPSURL = ""
[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 = avactis-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 = store.php
Categories {34}= store-special-offers.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
;Categories {3}= product-trousers.php
;Products {1, 13, 24}= product-gloves.php
[SearchResult]
;This section specifies the file name and the path to the file of the page that displays
;the Search Results. The file path is specified relative to SitePath.
Default = search-results.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.
; HTTPS = YES
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 storefront-layout.ini must be stored in the avactis-layouts folder of Avactis ecommerce software. If you choose to use the system file storefront-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 storefront-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 helper.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:
$layout_file_path='my-layout.ini';
Your file my-layout.ini should be placed in the folder avactis-layouts. Or you must specify the absolute path if it is placed in another folder:
$layout_file_path='[PATH_TO_FILE]/my-layout.ini';
Thanks to this directive, it is possible to get around (ignore) the system configuration file storefront-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 helper.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. Avactis 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 storefront-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.
