Navigation is always a tricky issue when it comes to ecommerce sites where products can number in the thousands. Thankfully Pearl makes it super easy due to the underlying category structure, which takes care of sorting your products, filling your site with body content and, of course, the placement and positioning of your menus. Before we get that far however, it’s worth familiarising yourself with the administration side of things.

Categories & Pages (found under the ‘Website’ tab) are the real core of any website running on Pearl. Along with the Template Manager, you’ll find yourself spending a fair bit of time with them whilst in the build stage. Separated by a unique ID, a ‘category’ can be a simple page (such as ‘about us’); a category with other pages nested inside; and/or can contain products.

A single, standalone page is represented by a paper icon (About Us). A category with products attached has the grey folder icon, and those containing other categories is given a yellow folder icon (click to expand).

You can hard-link to any category within Pearl by using the following convention:

<a href=”/about-us-c-300.html”>About Us</a>

The important part there is the -c-300.html, where the 300 is the ID of the category in question, always preceded by –c-. You can put whatever you want before that however, so href=”/johnny-bobmore-danced-the-fantango-c-300.html” would take you to exactly the same page as the example above.

There are a number of controls for each category that affects its visibility and presentation. First off we’ve got Sort. The system sorts categories alphabetically by default, and again where they’re nested. You can override this by assigning an ascending numerical sort order (each new category is given a sort order of 10). The category with a sort order of –1 will be the first to load when the domain root is accessed (www.domainname.com/), in the instance below simply a category titled ‘home’.

All the top-level categories are sorted manually, whereas those nested within ‘Products’ are alphabetical.

‘Type’ and ‘Template’ define how the category displays its contents. Don’t worry about these for the moment – we’ll discuss them in more detail in the next post.

‘Live’ allows you to activate or hide a category from the website. So if we were to deactivate (by clicking on the red bang icon) ‘About Us’, it would simply disappear from any menus, effectively hiding it from the public. It is still there however, and accessible by using the hard-link link method mentioned above.

Finally, we have Actions:

The pencil allows you to enter the edit screen for a category, the green arrow allows you to move a category, the trash can deletes it, the starred folder icon creates another category within it (turning it into a parent), and the landscape icon pops an image uploader which will attach an image to the category when it’s displayed in tabular form (for example, browsing products by category). Finally, the computer icon lets you preview the category in a new window.

Let’s take a look at editing a category. When you hit the pencil icon on any category, you’ll see the following screen:

Editing a category

On the left of the screen, you can upload a category icon (as per the landscape icon on the categories & pages list), change the sort order and the subcategory display type (which we’ll discuss in the next post), and enter the meta information for search engine optimisation. Upload Files and Upload Images both pop uploaders that allow you to add media that will be used within the category description – a PDF or a flash movie for instance. Category override URL allows you to redirect to another URL when the category is called. Registered Users Only, when checked, hides the page from any visitor who isn’t logged in. Hide Title removes the .pageHeading div from the processed HTML. The Template dropdown allows you to choose which template the system will pull in to wrap the category with – more on this next time. Menu Text is what will be displayed on any dynamic or static menus that pull the category in, whereas Page Title is the header, div.pageHeading, enclosed within the category description. Below this we have the main editor – which you can flip between WYSIWYG rich-text and HTML modes to fully customise the content (’Switch between HTML / designer mode‘).

The contents of your categories will be displayed wherever %CONTENT% occurs (and it should only occur once) within your index.html template. In a three-column ecommerce layout, for example, the central column would be the most likely candidate for the %CONTENT% widget, whereas the left column might be used for a dynamic menu, and the right for special offers, a shopping cart overview, featured items, and so on. Again, we’ll touch on this in more detail in the next post.

So now we’ve got Categories & Pages down, the next thing to figure out is how to actually drop them into a menu on the public-facing side of your website. There are a few options, and they’re all pretty simple. Take a look at this demo site (opens in new window), where we have two methods in action. First, static links using the hard-link method above:

Static links within a footer

Static links are great for dropping navigational elements that aren’t going to change into your index template – such as footer links. The real navigation in this instance comes from the dynamically generated menu sitting in the header:

%DYNAMIC_MENU% in use

This one is the clever menu – controlled by a number of classes, it can be positioned horizontally, vertically, and with mouse-over or mouse-click submenus. Its appearance is completely customisable and can be image-based or pure CSS, all controlled through c_config.js. Essentially an implementation of SmartMenus (opens in new window), we’re not going to attempt to rewrite the documentation when the guys over there have already done a fine job! Worth noting however is that Pearl automatically adds the category ID of each menu item to it’s <li> tag, allowing the easy attachment of scripting events, etc.:

<div id=”dynamic-menu”>
   <ul id=”SM1” class=”MM”>
      <li id=”cat_276”>
      <li id=”cat_299”>
      <li id=”cat_300”>
      <li id=”cat_301”>
      <li id=”cat_302”>
   </ul>
</div>

Simply add %DYNAMIC_MENU% to your template to pull in everything underneath Top. If you want to target a particular category – say, for example ‘Products’ with an ID of 299 – you’d use %DYNAMIC_MENU_299%, appending _[cid] before the closing % symbol.

The last method is a dynamically generated menu that delivers a category’s contents as an unordered list, one level deep only, assigned the ‘static menu’ widget name (the ‘static’ and ‘dynamic’ menus are so-called purely because the latter uses JavaScript). You call it by using %STATIC_MENU_[categoryID]%. Static menus are particularly handy, amongst other things, when it comes to splitting content up into presentational categories – as we’ve used on our own site to produce a ‘features’ menu.

That pretty much covers the way Pearl handles categories, pages and dynamic navigation. Simple and straightforward, but infinitely flexible – which means your site’s navigation can take on almost any form you can imagine.

Next time we’ll be taking a look at  templates in more detail, including the widgets available to us and how to tie multiple templates together. Until then!

-Jay.