About XSL
XSL, made by the W3C, lets designers work with something that is more like HTML than any other language for easy adoption, has DreamWeaver tool support, and has the ability to easily achieve lighter logic needs a designer would typically demand, without the heavy programming backround needed to edit JSPs, PHPs, or ASP files.
Our XSL templates allow clients and their designers to skip writing and testing XSL code by choosing a template that best meets your business needs. It is expected that you will adjust the CSS so the template will be styled and colored the way you want. Furthermore, you are free to edit these to rearrange data fields, remove or comment out data fields, add data fields not displayed by default, add your own XSL sorting, and much more. The flexibility is there.
XSL was made by the WorldWideWeb Consortium, the body that governs internet standards, as a response to the growing issue of designers having to become programmers and work with files that include copious amounts of various code ( asp, php, jsp ) they may or may not understand, but should never have to deal with anyway to do their 'design' task. Some people say XSL is still programming, but when compared to JSP, PHP, ASP alternatives, it is a far cry simpler and closer to HTML (what any designer will know well) than any other language.
It also seperates the LOGIC code of a application and the DESIGN 'code' of a shopper interface. This is called a multi tier approach. This frees development teams to add and improve LOGIC code without requiring designers to worry about what LOGIC development takes place and changes over time. A common issue that plauges single tier systems, those that mix LOGIC code with DESIGN code, is that as new 'pages' with better code come out, they don't have any one cleint's specific design adjustments and thus force designers to REDO their work when clients update to a newer software version. IA Modules is a properly designed n-tier platform with clear seperation of design and logic layers to totally avoid this.
To use the following files, save them to your computer and then upload them to your web server to replace the existing version. You must also turn off the XSL cache using the "Design Center" in your Control Panel before you can see changes in XSL files. These files can be edited in DreamWeaver to customize.
Header Layouts
Sample header menu layout showing links for non-category site navigation links. Links change to reflect logged in status and items added to the cart. This layout assumes the category links will be in the left menu.
Right-click here to download and save the file "WSHeader.xsl"
Sample header menu layout showing dynamic user account links that change based on authentication. Also displays ALL top level categories, with room to display an unlimited amount.
Right-click here to download and save the file "WSHeader.xsl"
Sample header menu layout showing categories in a javascript dropdown menu. This can be customized to work with the javascript menu of your choice. This example works with the menu created by http://www.twinhelix.com. Additional files and CSS customization will be required. This layout assumes the category links are not shown in the left menu.
Right-click here to download and save the file "WSHeader.xsl"
Left Menu Layouts
Sample left menu layout showing search field, account options, and expandable item category list
Right-click here to download and save the file "WSMenu.xsl"
Sample left menu layout showing search field, account options, and expanded item category list to 2 levels deep. This template also supports the AltLink setting from the category manager, which lets you specify an alternate page instead of the normal category page. This is useful if you want a page in between.
Right-click here to download and save the file "WSMenu.xsl"
Secured left menu layout that doesn't show any categories or search box unless you are signed in. When authenticated, it is identical to the choice to the left, showing search field, account options, and expanded item category list to 2 levels deep. This template also supports the AltLink setting from the category manager, which lets you specify an alternate page instead of the normal category page. This is useful if you want a page in between.
Right-click here to download and save the file "WSMenu.xsl"
This menu shows each top level category as a bolded header row.
It will expand one top category specified by name in the file. The default name is SHOP CATEGORIES. you can change this to your desired expanded category by editing this value in the file.
It will render every other top level category as a bold header row and then show each subcategory in a drop down jump menu.
Hint: use SortData setting in the category manager to make all drop down categories sort at top and in order you desire.
Right-click here to download and save the file "WSMenu.xsl" Right-click here to download and save the file "_head.htm"
Blank left menu. If you choose to use a header template that has all of the links for your site and you would prefer to use the extra space for your content, you can use this template to make the left menu NOT appear.
Right-click here to download and save the file "WSMenu.xsl"
Note: Using this file also requires a change to your cascading style sheet "store.css" to hide the column in the table layout
Featured Product Layouts
Sample featured template. shows minimum info to feature more products in limited space.
item name, thumbnail, shopper price or sale price and savings
Right-click here to download and save the file "WSHomeProductList.xsl"
Sample featured template. shows thumbnail to left, item name & description, qty, shopper price, regular price
Right-click here to download and save the file "WSHomeProductList.xsl"
Sample featured template. shows thumbnail to left, item name & description, qty, shopper price, regular price. sets sale price in red and strikes through reg price and shows amount saved.
Right-click here to download and save the file "WSHomeProductList.xsl"
Sample featured template. vertical stack, item name, thumbnail, description, shopper price, regular price. sets sale price in red and strikes through reg price and shows amount saved.
Right-click here to download and save the file "WSHomeProductList.xsl"
Category Product List Layouts
Sample category listing showing a thumbnail style layout. Layout is DIV based, allowing to be stretched to various sizes and dynamically change the number of thumbnails per row to take advantage of wide-screen layouts. Product links are Search Engine Optimized by adding the name and description of the item to be part of the actual product link.
Right-click here to download and save the file "WSCategoryProductList.xsl"
Note: Using this file may require changes to your cascading style sheet "store.css" to appear correctly
Sample category listing showing a table layout with one item per row. Product links are Search Engine Optimized by adding the name and description of the item to be part of the actual product link.
Right-click here to download and save the file "WSCategoryProductList.xsl"
Note: Using this file may require changes to your cascading style sheet "store.css" to appear correctly
This template will sort the items according to whatever you want.
see the line: ' <xsl:sort select="./ItemNumber" data-type="number" order="descending"/> '
By default ItemNumber field is used. this is a QBPOS only field. if you use QBFS, and want to sort, you must choose a different field.
The business goal in this case is to sort the newest items at the top. DataType specified to treat the value as a number (so 30 sorts before 200).
Other fields you can access and sort on with ANY QB version could be:
./TimeCreated - to sort newest items at top
./DisplayPrice - to sort highest priced items at top. (hint, for lowest, change order="descending" to order="ascending")
You could further control things by using XSL IF statments to do sorting one way for one or more categories, and other ways for other categories.
Right-click here to download and save the file "WSCategoryProductList.xsl"
This template allows a shopper to add multiple items from a category into their shopping cart at once.
Right-click here to download and save the file "WSCategoryProductList.xsl"
Product Detail Page Layouts
Product detail page showing features for listing styles with different prices, related items (cross sells), and add to registry/add to wishlist buttons
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page showing all features
but showing inventory availability for single items and in drop downs for variation sets.
Clearly communicate that you maintain inventory and accuracy online and in store, unlike competitors who do not.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page showing all features
but shows out of stock status if and only if the item is not in stock for single and variation items.
Warn shopper an item is out of stock so they don't waste time clicking on it.
Since it only says anything when an item IS out of stock, the page may seem less wordy and cluttered.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page showing all features
but hides add to cart form for items that are out of stock. for variation sets, each variation item is hidden if it is out of stock.
Pro: Extreme way to keep shoppers away from out of stock items, could save shopper clicks only to find the item they tried to add is out of stock.
Con: may cause shoppers to wonder why a variation item they saw one day just dissapeared another day.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page with cross sells, wishlist and variation support, but adds display of the three alternate image sets. This one predicts and shows thumbnail of each alt image. it adds javascript rollover event for each thumbnail so the std image is replaced with the alternate image std img size.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page with cross sells, wishlist and variation support, but adds display of the three alternate image sets. This one predicts and shows thumbnail of each alt image. it adds javascript onclick event for each thumbnail so the std image is replaced with the alternate image std img size.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page with personalization layout. It will show item type lists and option lists. it will also increase the qty of any item type lists according to the main item qty set by the shopper.
Thus if you have an additional item list of services to coat the product, and someone orders 2 products, they would order two coating service items too. The XSL dynamically build the JS to achive this. It supports single items and variation set items.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page showing javscript rollover for each style/variation. Extra small thumbnails were supplied for each color. Place the mouse over a color and the larger image changes and the color is selected in the list.
Right-click here to download and save the file "WSProductDetail.xsl"
Product detail page showing variations in a grid layout.
For QuickBooks financial: Right-click here to download and save the file "WSProductDetail.xsl".
Note:
This layout uses the Other Image 2 field for the item Size, and Other Image 3 field for the Color. All possible combinations must exist and be for sale.
Saved Cart Layouts
Sample registry and saved cart layout. This one is minimalistic, focused on showing the least for a site whose shoppers just want to manage one wishlist and one registry.
On v6.04 or newer it does show thumbnail
Right-click here to download and save the file "WSSaved.xsl"
Sample registry and saved cart layout. This one has maximum functionality,
focused on showing all abilities for a site whose shoppers want to manage multiple wishlists and registries for different events or projects! On v6.04 or newer it does show thumbnail
Right-click here to download and save the file "WSSaved.xsl"
Whole Site Template Zip Files
Plain Blue - This is the template set that most systems start with.
Right-click here to download the zip file.
