Stuff and Nonsense

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility.

Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.

Anatomy of a mouse (day 3)

I am not a programmer, I do not have that kind of logical mind. But I have seen that amazing things can be achieved with XSLT.

What makes the site tick?

I thought today that I would run through how Disney Store UK was developed from a designer�s point of view, rather than technical one, looking specifically at XSLT.

I am not a programmer; I don�t have that kind of logical mind. I rely on far cleverer people than me to explain technical things to me in words of one syllable. But I do find what you can do with technologies like XML and XSLT fascinating, even if I don�t understand fully how they work.

The new Disney Store UK has been developed using Karova Store (don�t worry, this isn�t turning into a sales pitch) which separates not only content (XML, XHTML) from presentation (CSS), but also separates functionality (XLST) from the �engine� which drives three applications,

Web site front-end

What the end user sees and the tools and functionality that they use to shop on a store

Developer Control Panel

Used to configure store components online, download and upload CSS, XML and XSLT files

Merchant Control Panel

Used by a store owner to manage products, configure delivery schemes and PSPs, upload images, PDFs etc. and add/edit article page content and downloads

Although the system is large, as someone who normally works only with XHTML and CSS, it allows me to concentrate on the parts of site development that I am familiar with.

Developer control panel

The developer control panel allows me to configure certain aspects of the store, for example navigation components, and the downloads area provides access to components which make up the store. These include,

A set of CSS files covering global styling, page �regions� (eg: navigation or side bar) and specific files for formatting special pages such as the home page or checkout process.)

XML files, for example for configuring product �attributes� (eg: name, code, descriptions etc.). If a customer requires new or different attributes, I simply add them to the attributes file and my changes �cascade� down across all parts of the system including the Merchant Control Panel.

A series of XSLT files provide site functionality. These files may be downloaded and edited, by either choosing from a set of pre-configured functionality templates or by adding new functionality. The point of using XSLT is that sites with complex functionality can be created in less time and without writing a line of ASP or PHP.

Navigation components

There are XSLT files for all navigation components including manufacturers, categories and sub-categories, new and sale items and best-sellers. Take for example the �recently viewed items� palette that I am so fond of. The XSLT is surprisingly simple (even for me) to understand.

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<!-- Test if any products have been viewed -->
<xsl:if test="count(Products/Product)!=0">

<ul>
<!-- For each product viewed, call a template -->
<xsl:for-each select="Products/Product">

<!-- Name of the template to be called (below) -->
<xsl:call-template name="listView"/>
</xsl:for-each>
</ul>
</xsl:if>		
</xsl:template>

<!-- Template 1 
(A plain and simple unordered list) -->

<xsl:template name="listView">
<li>
<a href="detail.aspx?pid={@id}">
<xsl:value-of select="Name/text()"/></a>
</li>		
</xsl:template>

<!-- Template 2 
(Display the item name plus short description. -->

<xsl:template name="detailView">
<li>
<a href="detail.aspx?pid={@id}">
<xsl:value-of select="Name/text()"/></a> <br />
<xsl:value-of select="DescriptionShort/text()"/>
</li>		
</xsl:template>
</xsl:stylesheet>

The standard XSLT files contain a selection of pre-configured templates and switching between them can be as simple as changing the name of template that is to be called. In this case, change <xsl:call-template name="listView"/> to <xsl:call-template name="detailView"/> to switch between a simple list of links or a list containing descriptions. These XSLT files can also be fully customised, perhaps to include small thumbnail images (as we did on Goppa Fireplaces) or an 'Order' button as is the case on Disney Store UK.

When I have edited these files, they are uploaded to the development web space through the developer control panel. This checks for validation errors during upload and offers feedback if I have done something wrong like forget to close a <li> or </a>. This means that the site will validate right from the start which is a real advantage and saves hours in debugging and validation.

Range pages

Although one of the most complex XSLT files in a store, the range XSLT is also simple in structure and easy to edit if needed. Here a 'root' product template calls other templates further down. One of these is the product display template that uses markup similar to e-commerce definition lists. This template also calls what I term 'micro-templates' which contain structured mark-up.

<xsl:template match="Products">
<xsl:for-each select="Product">
<xsl:variable name="currentProduct"
select="document(concat('Products/',concat(./@id,'.xml')))/Product"/>
<xsl:if test="number($currentProduct/Price/text()) > 0">
<dl>
<dt>
<xsl:call-template name="PictureSmall">
<xsl:with-param name="currentProduct" select="$currentProduct"/>
</xsl:call-template>
<xsl:call-template name="ProductID">
<xsl:with-param name="currentProduct" select="$currentProduct"/>
</xsl:call-template>
</dt>

<dd>
<ul>
<li><xsl:call-template name="ProductName">
<xsl:with-param name="currentProduct" select="$currentProduct"/>
</xsl:call-template></li>
<li><xsl:call-template name="Price">
<xsl:with-param name="currentProduct" select="$currentProduct"/>
</xsl:call-template></li>
</ul>
</dd>

<dd>
<xsl:call-template name="DescriptionShort">
<xsl:with-param name="currentProduct" select="$currentProduct"/>
</xsl:call-template>
</dd>
</dl>
</xsl:if>
</xsl:for-each>
</xsl:template>

If needed, the micro-templates are also very easy to edit, for example this template displays a thumbnail image where one exists and a blank image if no product image is available.

<xsl:template name="PictureSmall">
<xsl:param name="currentProduct"/>
<xsl:choose>
<xsl:when test="$currentProduct/PictureSmall/text()">
<a href="detail.aspx?pid={@id}">
<img src="{$currentProduct/PictureSmall/text()}"
alt="{$currentProduct/Name/text()}" /></a>
</xsl:when>
<xsl:otherwise>
<a href="detail.aspx?pid={@id}"><img src="blank.gif" alt="" /></a>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

Further XSLTs control the functionality on the home page, product 'range' pages, product detail pages, basket and checkout pages and again the aim is to quickly develop flexible functionality that is easily extensible.

Wrapping it up

Working with XSLT looks daunting on a first glance, particularly for me who is not programming minded. But since deciding to learn a little more about this side of development I have seen that amazing things can be achieved with a little knowledge. By utilising XML for data and XSLT to transform it into XHTML, the logical separation of presentation, content and functionality can be taken to a new (for me) level.

Here is a great site for further reading on XSLT. I hope you found this useful.

Tomorrow: Wrapping it up.

Replies

1. #1 On October 8, 2004 12:21 AM patrick h. lauke said:

   an interesting behind the scenes look at the karova platform, that fills in some of the gaps i had after our chat in your kitchen ;-)

   xslt is indeed a wonderful technology, and it gets even more interesting when combined with things like PHP (or, in your case, .Net) to dynamically create/modify the xslt file before applying it to the xml data...plans within plans.

   i've started using some server-side xslt myself, after toying with the client-side variety. my bookmarks and externals are in fact run through a minimal xslt, before being slotted into the main PHP driven template...

2. #2 On October 8, 2004 11:46 AM Phunky said:

   Well the karova store looks like a great base platform for a e-commerce store, after a good few years helping out with the running of a certain shoe store (which has now had its design trampled on!) i would love to be able to throw them a pitch to redevelope it with karova !

   karova sounds great and i would love to get my hands on it to see how it ticks! shame i cant afford it atm...

3. #3 On October 8, 2004 11:47 AM Remco Zieltjens said:

   Well.. this is my first time commenting on this site, so first of all, Hello everyone!

   XSLT.. I've heard so much about it before I found this site. I never really looked into it though, right now I wonder why I didn't. The use of it is now very clear to me, and I shall be reading though the site you linked for more information right after I post this comment! I really do appreciate the kind of walkthrough you are giving us for this project. Highly interesting, especially for someone that's just starting out in the field like me.

4. #4 On October 15, 2004 01:54 PM Tom said:

   I've used XLST before, just to transform some XML feed data into something more meaningfull, but the possabilities are endless. There is a bit of a hard learning curve but its well worth playing with at least.

5. #5 On October 16, 2004 04:38 PM John Oxton said:

   A bit late to the party, again... I know nothing about XSLT but just a quick read through of the code here reminds me very much of textpattern tags. Maybe the comparison is totally incorrect but certainly XSLT suddenly looks very familiar so I am off to investigate further. Thanks for sharing this stuff! :)