Content Headers & Footers

🚧

These are referring to the Headers and Footers applied to a Category Listing Page and not the main Page Header and Footer templates applied to all pages.

This is intended to provide header/footer content for Product Listing pages to appear at the start and finish of the list of products (if said list is even included itself).

Aurora Commerce have created a series of Javascript files that can be used on the Front-end to help manage the product listings page. All of these can be found on the demo templates, but for clarity you must include as a minimum: 'product_list.js' and 'product_list_filters.js'.

With these in place, you open up the option to manipulate the content of the page without the need to refresh the whole page itself.

products/index.tpl.html

{*
 * Begin by verifying that there is product data, because if there is not, then you may wish to show an 'Oops' message.
 *}

{if $product_list}

{*
 * If the page is specifically a landing page, we don't show any products at all and 
 * therefore only show the category or filter header and footer code.
 *}

	{if $landing_page}

		{if $filter_template.filter_header}

			{$category_info.category_header}
			{$category_info.category_footer}

		{else}

			{$filter_template.filter_header}
			{$filter_template.filter_footer}

		{/if}
	{/if}

{else}

{*
 * If it's not simply a landing page, we decide to show the header, but only if no filters 
 * are set and we're on the first page so the search engines don't see duplicate content.
 * If there are filters, then we should check to see if the filters have their own header
 * and footer set also.
 *}

		{if $paging.page == '0'}
			{if !$header_filters}
				{$category_info.category_header}
			{elseif $filter_template.filter_header}
				{$filter_template.filter_header}
			{/if}
		{/if}

...

		{if $paging.page == '0'}
			{if !$header_filters}
				{$category_info.category_footer}
			{elseif $filter_template.filter_footer}
				{$filter_template.filter_footer}
			{/if}
		{/if}

	{/if}

{else}

<h1>Oops, there are no products to display.</h1>

{/if}

Breadcrumbs

Breadcrumbs can now be updated as the filters are changed in the Sidebar. To enable this, simply use the HTML below in your templates and create a '_includes/breadcrumbs.tpl.html' template that can be used by the Ajax calls to re-generate this content. Please note the the "template_breadcrumb" class allows the Ajax to find the location of the breadcrumbs when performing its updates, so it is important this is included.

_includes/header.tpl.html

{if $breadcrumbs}
<div class="template_breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
	{include file="_includes/breadcrumbs.tpl.html"}
</div>
{/if}

_includes/breadcrumbs.tpl.html

<ul>
{foreach from = $breadcrumbs item=breadcrumb name="breadcrumbs"}
  {if $smarty.foreach.breadcrumbs.last}
  <li>{$breadcrumb.name}</li>
  {else}
  <li><a href="{$breadcrumb.url}">{$breadcrumb.name}</a></li>
  {/if}
{/foreach}
</ul>

Listing/Page Title

Enabling Ajax Updating

The page title (the H1 tag) can now be updated as the filters are changed in the Sidebar. To enable this, simply use the HTML below in your templates and create a 'products/listings-title.tpl.html' template that can be used by the Ajax calls to re-generate this content. Please note the the "template_main_right" class allows the Ajax to find the location of the H1 tag when performing its updates, so it is important this is included (though in most cases there would be far more content than shown below in this HTML block, this is for illustration purposes only).

products/index.tpl.html

<div class="template_main_right">

...

{if $breadcrumbs}
	<h1>{include file="products/listings-title.tpl.html"}</h1>
{/if}

...

</div> 

The Title Template

Getting the title from Breadcrumbs

products/listings-title.tpl.html

{assign var="breadcrumbs_count" value=$breadcrumbs|count}
{section loop=$breadcrumbs_count step=-1 name="breadcrumbs"}
	{if $smarty.section.breadcrumbs.last}
		{$breadcrumbs[$smarty.section.breadcrumbs.index].name}
	{else}
		{$breadcrumbs[$smarty.section.breadcrumbs.index].name} -
	{/if}
{/section}

Search Results

You can display what the user searched for and if any corrections were made

{if $search_spellcheck}
<div class="infobox"> 
<p>We did not find any results for {$search}</p>                                                    
<p>However, we did find results for <strong>"{$search_spellcheck}"</strong></p>                     
</div>
{elseif $search}                                                                                    
<div class="infobox">
<strong>Product Results for {$search}</strong>
</div>                           
{/if} 

Items per Page

This feature needs to be able to be clickable or via a select tag

<select class="itemsperpage">
  {foreach from = $itemsPerPage item=info key=key}
  <option value="{$key}"{if $key == $selectedItemsPerPage} selected="selected"{/if}>{$info}</option>
  {/foreach}
</select>

Sort By

This feature needs to be able to be clickable or via a select tag

<label for="sortby">Sort By</label>
<select class="sortby">
  {foreach from = $sortByOptions item=info key=key}
  <option value="{$key}"{if $key == $selectedSortBy} selected="selected"{/if}>{$info}</option>
  {/foreach}
</select>

Layout Type

<ul class="layout">
  {if $viewType != 'category'}
  <li><a href="" class="grid{if $viewType == 'grid'} selected{/if}">Grid</a></li>
  <li><a href="" class="list{if $viewType == 'list'} selected{/if}">List</a></li>
  {/if}
</ul>

Sidebar Navigation Filters

The sidebar should consist of the categories as well as filters such as Brand and Price, but is fully customisable and largely automated when the correct Templates are used.

For help managing the Sidebar and its templates, please see the Product Listings Sidebar guide.

Anchors

Product Listing templates may not function correctly with anchors in their URL, as they could be used by search engines. To use anchors, there is an alternative solution, via javascript, that simulates the behaviour of anchors. See the below code for an example of this alternative implementation:

<a class="anchor" data-anchor="viewall">click me to scroll to Viewall</a>
 
and
 
<a name="viewall"/>

Errors

• If someone does not enter a search result, they will be sent back to the home page. To prevent this from happening, you should use Javascript.