|
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
|-- avactis-layouts
|-- avactis-system
|-- avactis-templates
|-- storefront-files
|---------------- about.php
|---------------- cart.php
|---------------- checkout.php
|---------------- contact-us.php
|---------------- helper.php
|---------------- index.php
|---------------- init.php
|---------------- product-info.php
|---------------- Read_Me_First_eBusiness.html
|---------------- search-form.php
|---------------- search-results.php
|---------------- store.php
|---------------- store-closed.php
|---------------- store-special-offers.php
Comments:
| • | 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 file which is used to integrate Avactis Shopping Cart into your site. |
| • | avactis-system - The 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.
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; |
| • | 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-list.php
|
Enlarge Image
|
Product description display (Product Info)
In a functional online store, this page displays the detailed information about the product currently selected.
|
product-info.php
|
Enlarge Image
|
In a functional online store, this page displays the current contents of the Shopping Cart.
|
cart.php
|
Enlarge Image
|
Here shopping cart customers can search for products using one or more keywords.
|
search-results.php
|
Enlarge Image
|
This page defines the design of the checkout page. Depending on the configuration, the checkout process can be divided into one or more steps.
|
checkout.php
|
Enlarge Image
|
The design of the Store Closed page.
|
store_closed.php
|
Enlarge Image
|
SUMMARY
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 storefront-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 calls a file that provides the full path to the installed Avactis Shopping Cart software:
<?php include('init.php'); ?>
Also, 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-list.php
Recommended tags:
<?php NavigationBar(); ?>
<?php Breadcrumb(); ?>
<?php ProductList(); ?>
|
Enlarge Image | HTML Code
|
Product description display (Product Info)
In a functional online store, this page displays the detailed information about the product currently selected.
|
product_info.php
Recommended tags:
<?php NavigationBar(); ?>
<?php Breadcrumb(); ?>
<?php ProductInfo(); ?>
|
Enlarge Image | HTML Code
|
In a functional online store, this page displays the current contents of the Shopping Cart.
|
cart.php
Recommended tags:
<?php NavigationBar(); ?>
<?php ShoppingCart(); ?>
|
Enlarge Image | HTML Code
|
Product search page
Here shopping cart customers can search for products in the catalog.
|
search_results.php
Recommended tags:
<?php SearchForm(); ?>
<?php SearchResult(); ?>
<?php NavigationBar(); ?>
|
Enlarge Image | HTML Code
|
This page defines the design of the checkout page. Depending on the configuration, the checkout process can be divided into one or more steps.
|
checkout.php
Recommended tags:
<?php NavigationBar(); ?>
<?php Checkout(); ?>
|
Enlarge Image | HTML Code
|
The design of the Store Closed page.
|
store_closed.php
|
Enlarge Image | HTML Code
|
SUMMARY
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!
| 
