How to manager your sidebar

There are two methods of managing your sidebar in Aurora and you must be very clear which is currently in use on your site before proceeding. To do this, simply login to your Aurora back-end and go to the Merchandising > Sidebar Filters section. If this section does not warn you that your sidebar is not properly configured, then you are using the New Merchandised Sidebar. Otherwise, you are using the Old Static Sidebar. Please see the relevant section below for guidance on each.

New Merchandised Sidebar

Aurora offers a comprehensive list of merchandising options to help manage your site, including a full product listings Sidebar and Filter Manager.  

You can modify your sidebar to organise what filters should be used, such as Brand, Price and Colour and even include Snippets. All of these can be managed within Aurora, so you can specify what filters should appear when and how you want them to appear without ever needing to know HTML or edit a template.

🚧

We do not recommend that you edit the sidebar HTML, due to the impact it may have on the Aurora back-end and front-end and so we will not cover this here in great detail, outside of what elements are of significant importance and are required to allow it to operate normally.

If you choose to modify this template, then be aware that it is used in the back-end during the 'previewing' process and could become broken if changed. We cannot offer support in the event that changes to this template cause such issues and will require you to revert to the previously working copy to resolve such problems, so it is important for you to maintain back-ups as you work to avoid such issues.

CSS for the Sidebar

The sidebar will for the most part, work with little to no CSS at all (other then your general presentation CSS of course), with the exception of a few minor features that require specific CSS to be enabled. These are listed below for you to include.

.filter_container { overflow: auto;}
.filter_value_hidden, .ac_filter_closed { display: none;}

Maximum filter height

The "Maximum filter height" setting requires the application of the ".filter_container { overflow: auto;}" style to prevent the content that goes over the max defined height from being displayed.

Maximum items to show

The "Maximum items to show" setting requires the application of the ".filter_value_hidden { display: none;}" style to ensure that when an item is deemed to fall outside the configured 'maximum' it is no longer displayed. It is important that the item is still included in the HTML even if it is not visible so that the back-end is able to locate them for management purposes.

Menu open/closed statuses

The filters can support being open or closed, as in their content being hidden on shown on a mouse-click. To this end, the ".ac_filter_closed { display: none;}" style is necessary to ensure that when the filter is set to be 'closed' by Aurora, that the options no longer appear.

Old Static Sidebar

The older method of managing the sidebar relied on the creation of specific blocks of code in the smarty templates to display each filter in whatever fashion was desired. To help you with the management of these, please see one example of how this can be done below.

❗️

This should not be used within the new Merchandised Sidebar Filter Menu Manager's templates as doing so will cause problems on both the front and back-ends.

{if $showFilters.size == 'show'}
<h2>Shop by Size</h2>
<ul>
  {foreach from = $filterInfo.size item=info name="filter"}
  <li{if $info.link_status == 'notavailable'} class="disabled"{/if}>{if $info.link_status == 'clickable' OR $info.link_status == 'selected'}
    <a {if $info.link_status == 'selected'}href="{$info.url}" class="selected"{else}href="{$info.url}"{/if} rel="{$info.filter_abbreviation}">{/if}
    {$info.return}
    {if $info.link_status == 'clickable' OR $info.link_status == 'selected'}</a>{/if}</li>
  {/foreach}
</ul>
{elseif $showFilters.size == 'selected'}
<a class="reset" href="{$existingFilters.size.goBack}">Clear</a>
<h2>Shop by Size</h2>
<ul>
  {foreach from = $filterInfo.size item=info name="filter"}
  <li{if $info.link_status == 'notavailable'} class="disabled"{/if}>{if $info.link_status == 'clickable' OR $info.link_status == 'selected'}
    <a {if $info.link_status == 'selected'}href="{$info.url}" class="selected"{else}href="{$info.url}"{/if} rel="{$info.filter_abbreviation}">{/if}
    {$info.return}
    {if $info.link_status == 'clickable' OR $info.link_status == 'selected'}</a>{/if}</li>
  {/foreach}
</ul>
{/if}

Related Aurora Demo Template Files

includes/navigation_dynamic_new.tpl.html