IA Modules eCommerce Documentation
Web Store Design Guide
Template Gallery - view gallery of mix an match template parts to create your functionally ideal site or choose complete template sets. Videos - Design with DreamWeaver, more are available on video list page. Knowledgebase - Looking for a technique to add to your XSL or CSS files. See examples of many common requests in our online knowledge base (KB) |
IA Modules Web Store design makes professional custom designs easy to achieve using industry best practices. Good design is critical to a successful online business and strong corporate identity. Following the industry best practices explained below will reduce the time and costs to both create and maintain a successful online store. Don't forget to visit our html/css/xsl code samples techdocs section here.
The pages of the store are generated for you by the store's software. This minizes the work you have to do. There are several easy to customize default HTML files that are included in regions throughout the store. Some files are reused on all pages like the StoreHeader and StoreFooter. Their reuse promotes consistency and reduces costs. CSS is another industry best practice to allow control of your site's fonts, colors and more from just one file, furthering the idea of reuse for consistency, easier maintenance, and much cleaner, smaller, faster loading pages. Should you need to change your font styles or colors, you only need to edit this one CSS file. The IAM WebStore makes significant use of CSS Style and ID tags that are coded into generated content and user editable default content which are set with default values in the store.css file. This guide will not teach you how to use CSS. There are already many great guides around the internet.
Here are a few helpful links that provide tutorials,references, colors, photos, and more:
- http://www.w3.org/Style/CSS/ - CSS guide from the creators of CSS
- http://www.w3schools.com/css/default.asp - Good simple CSS quickstart guide
- http://wellstyled.com/tools/colorscheme2/index-en.html - a GREAT color selector based on color theory
- http://webdesign.about.com/cs/color/a/aacolortheory.htm - more color ideas
- http://graphicdesign.about.com/library/color/blweb.htm - color galleries
- http://www.istockphoto.com/ - a stock photo repository
- http://www.stockphoto.com/ - more photos
HTML content from the files listed below is included into specific regions of the store's generated web pages. HTM pages should generally start and end with a <table> tag. They do not need <Html>,<Head>,<Body> tags because they will already be generated by the system.
File summary:
- _head.htm - if the file exists, it can be used to add meta tags, javascript functions, or anything else inside the HEAD tag for the page
- StoreHeader.htm - included at the top of every page. Logos, links, and JavaScript menus should go here.
- StoreFooter.htm - included at the bottom of every page.
- StoreHome.htm - included on the home page in the center. This is commonly used for a text and graphical welcome to visitors.
- StoreHomeRight.htm - an optional page to replace the right region of the home page. This region is used for listing best seller and new products by default but can be toggled to use the static content defned in this file if you. Useful if you want to quickly put rotating adds or other content there, or simply collapse it to leave more room for the main area of the home page.
- StoreAboutUs.htm - a default page using the WSWrapper component. This is linked by default from the StoreHeader.htm.
- StoreContactUs.htm - a default page using the WSWrapper component. This is linked by default from the StoreHeader.htm.
- store.css - your central css file which is auto-included on every page.
- SignIn.htm - presented for login and sign up. You may want to add or remove content here to warn shoppers you only sell to particlar types of customers, provide a quick checkout link, or anything else.
- CustomerSignUp.htm - presented after a user signs up. Wholesalers may want to reinforce the fact that passwords will be set and provided by the administrator.
- CustomerUpdate.htm - presented after a user modifies their account.
- StoreLogout.htm - presented to a user after clicking the logout button.
- WSMenu.xml - contains the XML heirarchy tree of your categories and their properties. Do not edit this file, it is created by the Category Manager tool.
- Additional files for site layout are found in the XSL section below
The WSWrapper component minimizes the effort required to add custom pages by wrapping the store's framework (header, footer, menu) around the specified file's content. You only need to create an HTM page and specify it's name so the WSWrapper component can find it and insert it. These wrapped pages should start and end with a table tag. Here is an example of a link using WSWrapper:
<a href="WSWrapper.jsp?mypage=StoreAboutUs.htm">About Us</a>
This would pull in the content of StoreAboutUs.htm into the framework and display is a unique page.
Leave the .xsle files alone - There are several important points a designer must be aware of with our framework. XSL is cached and kept in a precomiled state which allows for much faster execution than XSL alone can typically deliver. XSLs are precompiled into *.xsle files. You will see these in your site FTP folder. It is important you do not delete or try to update xsle files. They are managed by the system and if you upload or modify them, permissions will be modified such that they will not function correctly.
Cache Disabling - The caching system will also keep copies of XSLs and various XML structures like your WSMenu.xml category file in user's sessions in memory. While this allows for very fast performance, it can be annoying to a designer. When you are about to edit XSL files, hit the page ' cacheoff.jsp ' to disable caching mode of the XSLs. Also, once per session, the WSMenu.xml file will be read and saved into session values. If you are changing that file, you must hit the Home.jsp page after you change WSMenu.xml like this: Home.jsp?refresh=true . This parameter forces your session values to be flushed and reinitialized
Data Selection and Layout with XSL Templates
XSL is another industry standard developed by the W3C to provide designers with a famliar HTML based language that additionally offers some logic capability. It allows data to be selected, looped over, formatted, and presented. Data is provided as an XML structured feed by the system.
You should edit XSL files in an XSL editor such as DreamWeaver or with a text editor. Our XSL files consist of various default HTML blocks with XSL logic blocks as needed. In many cases, designers my wish to hide certain default output fields, and should comment out the block instead of deleting it, incase your desire changes in the future. It is also always wise to keep a copy of a working XSL to go back to if you encounter an error in an XSL file. It is very easy topinpoint errors in XSL files by simply opening the file up directly in IE or even better, in Firefox.
Typically, there are two very common errors. The first is often because designers
forget that XSL requires proper tag nesting.This means that an opening tag
must be followed by it's closing tag.
<b><h1></b></h1> is invalid and not properly nested.
<b><h1></h1></b> is properly nested.
Some tags like the line break tag ' <br> ' must self close in XSL like this: ' <br/>' .
Also, special characters must be properly escaped in XSL with their HTML escape codes. Ie. ' & ' shoudl be ' & '.
Here are a few links to learn more about XSL and XML:
- http://www.w3schools.com/ - provides links to XHTML,XSL, and XML tutorials.
- http://www.xmlfiles.com/xsl/ - Great quickstart guide
- http://www.zvon.org/HTMLonly/XSLTutorial/Books/Book1/ - Great XSL examples
Here is a list of XSL files and their use:
- WSHeader.xsl - renders category menu, shopping cart summary data, and customer login data to the top section. Replaces the StoreHeader.htm file completely if it exists. * new for v5
- WSMenu.xsl - renders left menu with category data, customer login data. If no left menu column is desired, the contents of this file can be commented out and the enitre column can be hidden with CSS.
- WSHomeProductList.xsl - renders the list of user selected home page featured products. This appears below StoreHome.htm in the middle of the main content area of the home page.
- WSBestProductList.xsl - renders the items you have selected for your best products. Appears in the right column of the home page only.
- WSNewProductList.xsl - renders the items you have selected for your new products. Appears in the right column of the home page only.
- WSProductDetail.xsl - renders a particular item's details. Contains information on Variants (size/color options, etc), Quantity Discount Pricing, Cross-Sell items (a.k.a. related items)
- WSCategoryProductList.xsl - renders the current category's sub categories with links, and products belonging to the category. Can be used to simply navigate people to the Product Detail page, or can be used as a one-click order form for ordering multiple items at once. Very flexible.
- WSXSellProductList.xsl - shows cross sell items on the Product Detail page. ( *new for v5 - now optional since these can be shown in the Product Detail XSL instead)
- WSViewCart.xsl - renders the shopping cart, allows coupon codes to be applied, as well as link to checkout. If this file does not exist, the system will fall back to a generic layout for the view cart page. * new for v5
- WSSearch.xsl - renders search results. * new for v5
Important XSL notes:
- XSL uses the XHTML spec. Tags must be properly nested and/or closed. <img> tags and <br> tags need to be coded like: <img src="" ... /> , <br/> . Note the closing '/' before the close of the tag!
- IA Modules uses a system for enhanced XSL performance. Templates are compiled and optimized by generating .xsle files. you should not edit these. When you edit the XSL files, to put the store in XSL edit mode, you should switch your store's XSL caching mode to off by hitting the link like this, once: http://yourdomain/cacheoff.jsp . Your xsl changes will then be used and new .xsle files will be genenerated.
- Open your XSL files in MS IE. tag nesting errors can often be pinpointed in this way because the XSL tree will be broken where you have the error.
XML Feed reference docs:
- Home, best, new, cross-sell, detail XML feed example
- Category feed XML example
Example Site Layout
Sites are very flexible. Here is the default layout to illustrate how easy it
can be.
Using the standard template may only require customized HTM Pages which are included
in particular regions and reused throughout the site for a consistent look. XSL
customization, which is extremely similar to HTML, provides the ability to have
virtually any QuickBooks data presented how,where, and when you wish.
Home Page Layout.
| Header HTML Page or WSHeader XSL | ||
Menu (XSL)
|
Welcome HTM Page
|
Best Product List (XSL) New Product List (XSL) Right HTM Page |
| Home Featured Products List (XSL) | ||
| Footer HTML Page | ||
Category Product List
| Header HTML Page or WSHeader XSL | ||
Menu (XSL)
|
Category Product List (XSL) |
|
| Footer HTML Page | ||
Product Detail Page
| Header HTML Page or WSHeader XSL | ||
Menu (XSL)
|
Products Detail (XSL) |
Cross Sell / Related Items (XSL) ( *new for v5 - now optional since these can be shown in the Product Detail XSL instead)
|
| Footer HTM Page | ||
View Cart Page
| Header HTML Page or WSHeader XSL | ||
Menu (XSL)
|
WSViewCart XSL or generic view cart layout |
Cross Sell / Related Items (XSL)
|
| Footer HTML Page | ||
Sign In Page
| Header HTML Page or WSHeader XSL | |
Menu (XSL)
|
Sign In HTM Page
|
| Footer HTML Page | |
All rights reserved.