Page Comparison

Templates are one of the huge benefits to using the UltraCart Catalog system. A template driven site can have 80,000 products that have over 100,000 pages, yet the look and feel might be controlled by a dozen or so templates. If a merchant wants to update the look and feel or functionality of the site they simply edit the templates for the site and it instantly updates. By removing the hand edited nature of every single page on a website, a massive reduction in the amount of man power required to maintain a large e-commerce site is instantly achieved.

In the UltraCart Catalog system a template is simply HTML code that contains Velocity scripting embedded into it. The template is "rendered" by the Velocity engine which merges the template with the appropriate data for the page. The Velocity script on the page has an opportunity to process and manipulate the data and ultimately output additional HTML code such as the item description, navigation links, etc. Rendering can be viewed as a simple math equation:

...

The first thing to do is create a new template called "snip_topnav" with the following template code:

## Fetch the root group of the site.
#set($rootGroup = $group.getRoot())

## Output a table with the link to our home page and 
## then another row with links to each high level group
<table>
  <tr>
    <td colspan="$rootGroup.getChildren().size()">
      <a href="${baseUrl}${menuGroup.getPath()}">$rootGroup.getTitle()</a>
    </td>
   </tr>
   <tr>
     #foreach($menuGroup in $rootGroup.getChildren())
       <td>      
          <a 
href="${baseUrl}${menuGroup.getPath()}">$menuGroup.getTitle()</a>
       </td>
     #end
   </tr>
</table><br><br>

Next go back to each of the other two existing templates and edit "template_group" and "template_item". At the top of each of the templates enter the text #ucTemplate("snip_topnav") as shown below:



The text #ucTemplate("snip_topnav") is a custom velocity directive that causes the snippet to be included exactly at the location of the #ucTemplate directive. Make sure that no additional spaces are introduced between the directive, parenthesis, and quotes on an include directive or it will not work. Now the sample store has a consistent top navigation for group and item pages as shown below:

It is permissible for one template to include another template that in turn includes additional templates. UltraCart will automatically expand the templates before passing the expanded template through the Velocity rendering engine. A good rule of thumb is to utilize an included snippet whenever any piece of HTML/Velocity code can be shared between two high level group or item templates. Good candidates for snippet templates are the HTML head section, top navigation, side navigation, footer, custom tracking code, paging navigation, etc. Reuse is not the only compelling reason to use templates. The other is manageability of the code. It is often easier to work on a 50 line snippet of HTML code than a 1000 line single template.

The most basic catalog sites will have three templates that are users: template_home, template_group, and template_item. The template_home would be the home page template and would typically have a more sophisticated look and functionality than a standard group template. In reality there will be additional high level templates within a catalog each time a page renders data in a different fashion. For instance an electronics store may have different a different group template for the cell phone product category than other items in order to display additional information or have an alternate format.