I am developing a public website for a client at the moment, and this is my first project with Umbraco as the CMS. On the outset, the community around umbraco is fantastic, and coming from a .NET backgound, I am getting used to it quickly. The fact that I’ve had a lot of interest in SEO and url rewriting helps too, because umbraco uses these concepts alot.
The admin interface is easy to use, and end users should have no trouble getting to grips with content editing and publishing. But like any system, the developer must keep it simple.
The challenge: To create a product line with multiple pages for each product (overview, details & contact form).
The solution: I could have easily create a node for the overview, then created 2 nodes below that for the details and contact form. But this would have required additional training for end users and left gaps for human error to occur, leading to additional product support. So I decided to keep it to a single node, and figure out how to create 3 pages from that node without confusing the user.
I posted a question on our.umbraco to see if anyone had any suggestions, and one answer got me on the right path, and after a little trial and error, I found a great solutions to (possibly) a common CMS problem.
The key to solving this problem is all in the XSLT for your navigation. Here is the full XSLT file for navigation:
[codesyntax lang="xml"]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:param name="currentPage"/>
<!-- Input the documenttype you want here -->
<xsl:variable name="documentTypeAlias" select="string('Product')"/>
<xsl:template match="/">
<!-- The fun starts here -->
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=2]/node [@nodeTypeAlias = $documentTypeAlias and string(data [@alias='umbracoNaviHide']) != '1']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
<ul>
<li>
<a href="{umbraco.library:Replace(umbraco.library:NiceUrl(@id), '.aspx', '/details.aspx')}">
Details
</a>
</li>
<li>
<a href="{umbraco.library:Replace(umbraco.library:NiceUrl(@id), '.aspx', '/enquiry.aspx')}">
Enquire</a>
</li>
</ul>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
[/codesyntax]
This stylesheets find all products at the second level (2 below homepage), then displays the product name with a link, and then displays 3 links below that to the same node, but explicitly defining which template to use. A simple example would look like:
[codesyntax lang="php"]
/{parentNode}/{nodeName}/{templateAlias}.aspx
[/codesyntax]
To acheive this, you need 3 templates for your Document type, the default template (overview), and 2 other templates. The alias of this template is important as it relates directly to the url used above, so make it search engine friendly and pretty short.

The document type itself can then contain an array of fields used across the different templates.

And each template can then use the specific subset of content from the node.

This is a great way to improve the user experience for your content editors while keeping long reams of content pages out of your site.
Recent Comments