We need a e-commerce theme developed based on the yahoo user interface.
Theme will be almost a clone of http://www.bernieandphyls.com/ there will be minor color changes to suite clients needs..
Below are the basic API requirements for the theme.
• Sophisticated Multi-Site \ Multi-Vendor capabilities (no compromises and first to market)
• Advanced JavaScript widgets that gracefully degrade when JavaScript is turned off
• Sophisticated e-commerce database optimally normalized for e-commerce transactions
• Complete separation of front end design from the back-end engine
• Advanced functionality for wish lists, layaways, comparison shopping, and gift registration
• Customer Feedback System at the product level
• Integrated sales tax calculation and reporting system
• Integrated credit card processing systems
• Best in class shipping calculator
• Multi-Currency and Multi-Language Support
• Fully integrated multi-location inventory system
• A perfect solution for multi-site hosted e-commerce environments
• PCI DSS adaptable security system that can be customized to your requirements
For a complete overview of SikaManagement’ e-commerce capabilities, go to http://SikaManagement .com, click on the product overview and product detail menus, and learn about all the functionality offered (new features are being added all the time, so the web site may not always be current).
Understanding the client / server architecture of the system:
Whether you are a retailer or web site designer, one of the most important concepts to understand is that SikaManagement separates the shopping cart engine from your web site design work. This has huge implications for how you design your shopping cart. As a retailer or designer, you do not have to worry about your design work affecting the shopping cart engine. The shopping cart engine is completely isolated from your web design. You can pick and choose which shopping cart features you want to use and then create a design that incorporates those features into your shopping pages.
The SikaManagement system consists of two major directory systems. The server directory system and the client directory system.
The server directory system:
• Contains the SikaManagement e-commerce engine;
• Is maintained by the SikaManagement team;
• Can’t be modified by anyone in your company;
• Is located outside the web root;
The client directory system:
• Contains client controlled folders;
• Is where web page design work is done;
• Contains the configuration file for affecting system behaviors;
• Is located inside the web root;
As a web page designer, you are only concerned with the client directory system. This greatly reduces your learning curve and simplifies your work.
Designing Web Pages in SikaManagement:
SikaManagments’s web pages can be designed using any number of tools. You can use Dreamweaver, FrontPage, GoLive or any tool you like to do your design work. Designs can incorporate HTML tables, CSS containers, or a combination of the two. The delivered system uses the Yahoo User Interface (YUI) to layout web pages.
The YUI layout system (also called the YUI Grid system) has been chosen because it assists in resolving cross browser layout issues. The YUI is not perfect, but it is helpful and better than anything else on the market (at least in regard to browser compatibility). To learn more about the YUI, do a search on ‘yahoo user interface’.
Whether you use the YUI or other design tools you should keep the following in mind:
• CSS is a highly recommended over HTML tables for design work. The system presumes you use CSS containers and not HTML tables for page layout and design.
• Shopping cart pages typically contain the following CSS Containers:
o A header section
o A navigation section
o A body section – The body section typically contains one or more navigation systems, product images, product descriptions, non product images, advertisements, and other promotional/informational content for the reader.
o A footer section
• Web page layout is done primarily in the index.php file located in each folder of the client directory (folders are listed below). This is where you define the header, navigation, body, and footer portions of each web page.
As a designer it is critical that you understand the client side directory system. The client side directory system is your portion of the SikaManagement system. The client side directory system is located in the public root of the web site. Typically, the web pages you design for NextLevelShopper are located at /public_root/ec/pc (where ‘ec’ stands for e-commerce, and ‘pc’ stands for personal computer). However, you can put the client side directories anywhere you choose (just don’t change the structure of the ec directory).
Here are the sub-folders in the client side directory:
• ext – this folder contains important system-wide files that allow you to manipulate system-wide behaviors (more on this later).
• js – this folder contains JavaScript code provided by jQuery and Yahoo. As a matter of course you should leave this folder alone. However, this folder is made available for those who want to modify jQuery and/or Yahoo code.
• pc – this directory contains folders which displays web page content. Here is a list of the folders in the pc directory:
o Shop – this folder is where customers browse for products;
o Sitemap – this folder contains a site map of products;
o Product – this folder contains detailed information about a single product;
o CheckOut – this folder contains web pages for the check-out process;
o CheckOutB – this folder contains web pages for checking out services;
o Customer – this folder is where customers maintain account information;
o Vendor – this folder is where merchants enter product, shipping, and inventory information;
o SysAd – this folder is where system administrators manage system-wide information, like category information;
o Print – this folder is used to store the source code for printed reports;
o CSS – this folder is used to store CSS code;
o JavaScript – this folder is used to store JavaScript code;
o Includes – this folder is used to store server side (PHP) include files ;
o Menu – this folder is used to store (usually HTML based) menu systems ;
o Image – this folder is used to store images and image related files. This folder consists of two sub-folders. The first folder is called ‘Product’ and contains all product images. This folder consists of numbered sub-folders. The numbers refer to vendor ids. (Vendor Ids are unique identifiers for vendors who sell product on any of the system supported web sites. A vendor stores their product images under their vendor number. There is a utility that loads product images into this folder automatically.) The second folder is called ‘WebSite’ and contains all other web site images.
Besides organizing files, the NextLevelShopper directory system helps designers in a variety of ways (these are more advanced topics and are not required to learn or use the system):
• Different design templates can be created in each folder.
• Designs can be created at the page level and at the folder level.
• Using JavaScript or a server side programming language (preferably PHP) a designer can dynamically control web page design.
• Using the directory system, designers can create and organize very complex web sites.
• Designers can add their own folders and pages.
After reading this document, please take the time to review the important files (named below) in these folders. Note that each folder contains an index.php file. This is where major design layout work is completed. Review the code in the following files to get more familiar with the system:
• pc/Customer/index.php
• pc/Shop/index.php
• pc/Shop/panel.php (this include file displays a single product panel)
• pc/Shop/panelMSIE.php (this include file displays a product panel for IE7 and below — optional)
• pc/Shop/panelMSIE8.php (this include file displays a panel for IE8 — optional)
• pc/Shop/panelLong.php(this include file displays a different format of a product panel – optional)
• pc/Sitemap/index.php (this is an optional page)
• pc/Sitemap/categoryList.php (shows the product categories in the site map page)
• pc/Sitemap/productList.php (shows a list of products for a category in the site map page)
• pc/Product/index.php (shows detailed information about a product)
• pc/Product/productDetails.php (This script is loaded with features, written in PHP, and therefore may take a little time to understand. It is called by the pc/Product/index.php page)
Understanding the menu folder:
In the previous section you saw that there is a shop folder in the client directory system. The shop folder contains an index.php file. If you were to look at the contents of the index.php file you would see a call to a file named menu/shop.php (the call is made through a ‘require_once’ command). You’ll notice that SikaManagement associates file names in the menu folder with the folder names in the pc directory. In this way, a designer knows which menu file to affect whenever they want to modify the navigation system for any page in the shop folder.
Now would be a good time to look at the SikaManagement menu folder because here are a more examples:
Menu/product.php is associated with the pc/Product folder. Change Menu/product.php to affect the menu system for files in the Product folder.
Menu/customer.php is associated with the pc/Customer folder. Change Menu/customer.php to affect the menu system for files in the Customer folder.
Note that designers do not have to use this nomenclature. However, doing so has its advantages. From time to time, the SikaManagement System looks for file names in the menu folder that match folder names in the pc directory.
Understanding the CSS folder:
The CSS folder works much like the menu folder. CSS instructions for the shop folder can be found in CSS/all/shop.css. Likewise, CSS instructions for the product folder can be found in CSS/all/product.css. Most files in the CSS folder work the same way.
The CSS files that start with the word ‘button’ are CSS instructions for controlling the display of buttons across all folders.
One important difference between the menu folder and the CSS folder is the file called global.css. Global.css is used in every page in the system. However, for example, if a user is in the shop folder then the file CSS/all/shop.css will also be called by the SikaManagement engine. If there are common selectors in global.css and shop.css, then the instructions for those selectors in shop.css will override the instructions in global.css.
Designers can control how CSS files are called by using the pc/Includes/getCSS.php file. This file contains instructions for calling CSS files, and this file can be modified. However, the SikaManagement e-commerce engine expects designers to use the nomenclature provided by the system.
Understanding the Yahoo User Interface (YUI):
SikaManagement has chosen the yahoo user interface as its primary tool kit for adding cool JavaScript widgets. These widgets add a variety of features to the base system. These features include fly-out menus, drop down menus, image resizing, dialog boxes and other functionality. They come free with the system and are yours to use. You can control the use of these widgets by going to pc/Includes/getJavascript.php. In that file you can turn on and off each of the JavaScript capabilities in the system.
As mentioned previously, SikaManagement uses the Yahoo User Interface to assist in page layout. Specifically, this is in reference to the YUI grid system. The YUI grid system was designed to address cross browser compatibility issues as they apply to web page layout. As said earlier, the grid system is not perfect however it does assist in making layout design easier. It is completely optional and can be turned off by removing the link tag in getCSS.php or by removing/changing the ID attributes in the index.php pages.
The JavaScript code for the YUI widgets is located in public_html/js.
Understanding the config.php file:
The config.php file is located in the ext directory. It is located in this directory so that the directory can be password protected. The config.php file allows retailers to set options on how they want the system to behave. For instance, in the file there are options to turn on and off the gift registry system, layaway system, or the coupon system. You can also set default currencies and default languages. There are many such options available in this file.
The config.php file is very powerful. Setting a value for a single option may have significant ramifications throughout the system. For instance, you can turn the inventory system on and off throughout the entire system by changing a value in this file.
Understanding the start.php file:
The start.php file is located in the ext directory. It is located in this directory so that the directory can be password protected. The start.php allows retailers to define where they want to place their client side and server side directories on your web site server. It also gives retailers the ability to control how cookies are placed on their customers’ computers.
Designing your first page
Let’s say you are ready to start designing your shopping cart. A good place to start is in the shop folder. In that folder you will find the index.php file. You’ll also find the panel.php file. There are a few other files, but they are optional and not necessary for your system.
As said before, index.php is used to layout your web page. Panel.php is a file called by index.php. Panel.php is used to define the layout of the product panels. In the delivered system there are eight panels in a given page (this can be over-ridden in config.php).
Look at the contents of the index.php file in the shop folder. Find the header container. In the header container, look at the command that says ‘require_once’. This is a PHP command that tells the system to get a file called header.inc. This file is located in the pc/Image/WebSite directory. The header.inc file contains the content that belongs in the header of the web page. It can contain images and/or programming logic. To create your web page header, go to the header.inc file and enter the content you desire. Once your content is entered the content will display on all your shop web pages.
Now find the menu container. In that container you will find another require_once command. This time the command is to get a file called shop.php in the menu folder. Therefore, you need to put your menu links in the menu/shop.php file. Later you can use CSS/all/shop.css to control the display of the menu (in the delivered system the CSS instructions for the menu system can be found in global.css, but they can be over-ridden in shop.css).
Now find the container that contains the links that are right below the header. These links can be found in a file called shopLinks.php. Notice that this file is located in the ext directory and not the pc directory. This file has been put in this directory because (depending on your configuration settings) it may be relatively difficult to maintain. By keeping it in a separate directory a password can be used to prevent unauthorized people from accessing the file. The shopLinks.php file was written in PHP and contains conditional logic that controls when links should appear and disappear (separate from the menu system). Besides using conditional logic, you can also control these links through the config.php file, also in the ext directory.
As you work your way through the index.php file you will find several other containers. There is a bread crumbs container, a search box container, a products panel container, and a footer container. Most of these containers have a command that tells the system to incorporate another file into the page. These commands mostly come in the form of require_once and include_once statements. By modifying the contents of these files you are modifying the contents of the index.php page in the shop folder.
Some other interfaces to the SikaManagement System:
SikaManagement interfaces with several third party systems, and more are being built all the time. Below is a list of those interfaces:
Authorize.Net – this is a popular credit card Processing System. It is used to authorize credit card payments by your customers. This interfaces with all aspects of the SikaManagement System including layaway payments and the gift registry. SikaManagement allows merchants to process credit cards during order processing and/or during shipping.
PlugNPay – another easy-to-use credit card Processing System.
Avalara – this is a sales tax calculation and reporting system. Its advanced capabilities and comprehensive integration with SikaManagement make sales tax calculation easy for you and your customers. Sales tax calculation can be done for layaway orders and for the gift registry. Sales tax can be committed at order processing time or at shipment time.
Google Analytics – SikaManagement goes beyond the basics when it comes to web analytics. SikaManagement customers can not only track web page usage, but also track which buttons and links users are clicking. This provides even more precise information about what users are doing and how they’re behaving on the web site.
These interfaces can be controlled through the config.php file, and by the index.php file (in each folder).
