Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.

Basic Customization

Jump to bottom
ktwbc edited this page Jul 12, 2011 · 2 revisions

Basic Customization of WebStore 2.1.x

Introduction

The purpose of this document is to provide a basic outline of the construction of the WebStore and provide guidance to make simple formatting changes. This will be useful for those wishing to modify items such as colors, basic layouts, text changes and other changes in the appearance of their WebStore. Actual programming changes will be covered in our Advanced Customization of WebStore 2.1.x document.

Users of this document should have a basic understanding of HTML and CSS, as well as a rudimentary understanding of PHP. (Changes in this document are not specific to PHP, however, a familiarity with PHP will help you avoid changing the wrong items and breaking functionality of the website.

Template Structure

Visual customizations are all done through the template files that are a part of the WebStore installation. Under the root folder of your WebStore, you will find the /templates folder and insider are the three template sets that ship with WebStore 2: basic, deluxe, and framework. You will also see an admin folder which contains templates for the Web Admin panel. Under normal circumstances, you will not be modifying Admin templates.

The template set that you wish to use is set under the Web Admin panel (Tools->Web Store->Admin Panel->Configuration->Appearance->Store Template). This dropdown reads the folders from the /templates folder and displays them as options to choose from. By creating a new folder under /templates, you create a new dropdown option in the Web Admin panel.

BEST PRACTICE: To make customizations, we high recommend making a copy of one of the template folders and making your customizations there, leaving the originals untouched. This way you can not only switch easily if you need, but you also leave the original as a point-of-reference in case you need to see an unmodified version.

Naming Convention

The naming convention of the CSS file is also outlined below, in a short guide to the IDs and Classes that control the layout of Web Store 2.0.

ID Example: #example 
Class Example: .example 
* anything that follows the ID or class
	Example: #example .subexample 
	Example: .example_subexample 
	Example: #example p

Key CSS categories

header* header elements including top banner
nav* header elements including top banner
breadcrumbs* Breadcrumb path for nagivation
pagination* Page numbering on breadcrumb bar
product* product grid
sidebar* Sidebar modules (Order Lookup, Wish List)
shopping* Mini shopping cart, displayed while navigating
product_details* Product details page with full descriptions
cart* Full cart display/editing
products_slider* Slider display used on Top/New, etc pages
receipt_* Used on cart page, price breakdown and Submit Order
login* Login top menu bar, popup login display
customer* customer registration page and forms
Registry* Wish List aka Gift Registry pages
footer* footer elements
sto* Order lookup page
offline* Display page when store is offline

Changing Templates

Web Store 2.0 ships with a number of templates. You can change the almost anything in the templates. For maintenance purposes, we recommend that you duplicate one of the existing template folder and give it a new name. E.g. duplicate deluxe folder and rename it as my_deluxe folder. Go to Admin Panel to change the template to your new template folder.

A few notes on changing templates:

All css classes are defined in the templates/[your template]/css/westore.css file. Feel free to modify any css definitions here. - Use Firefox’s firebug or Safari’s developer menu to find out what elements are being styled using what css class. index.tpl.php is the main server of all html content. It has a mainPnl element which pulls contents from other template files.

  • All template file names should match their counterpart file names in xlsws_includes folder.
  • Templates used in emailing are prefixed email_*
  • There are some template files which are included as repeating elements. E.g. product image and data in search list page, cart items etc. These template files are named suffixed as _item.

You will find that often a whole component is rendered using a statement like someItem->Render(); ?>. These components can be modified on the fly during render. Since they are qcontrols, there are several ways you can modify them:

  • Find out there class type by doing _xls_log(get_class($this->someItem))
  • Go to http://api.qcodo.com to look properties and methods available on the object
  • You can modify the member variables on the fly someItem->Render(‘CssClass=MyClass’ , ‘Text=My text’); ?>
  • You can also modify before Render. E.g. the above statement can be changed as someItem->CssClass = ‘MyClass’ ; $this->someItem->Text = ‘My Text’; $this->someItem->Render(); ?>
Clone this wiki locally