Cached Category Tree

The cached_category_tree block is available in all liquid templates as a replacement for site.category_tree. It should be used in theme.liquid for a more extensible category tree.

This will be cached for 2 hours (for performance). To force a cache refresh, set the force param to true (?force=true).

Example Usage

In theme.liquid replace {{ site.category_tree }} with {% include 'category_tree' %}

In your templates/ directory, create a file _category_tree.liquid:

<ul id="category_tree">
  {% cached_category_tree do category %}
  <li class="depth_{{treeloop.depth}}">
    {% if category.leaf? %}
      <a href="{{ category.url }}" class="leaf_category category_tree_{{ category.id }}" id="category_{{ category.id }}">{{ category.name }}</a>
    {% else %}
      <a href="{{ category.url }}" class="nonleaf_category category_tree_{{ category.id }}" id="category_{{ category.id }}">{{ category.name }}</a>
      <ul class="category_tree">{{ child_category_tree }}</ul>
    {% endif %}
  </li>
  {% endcached_category_tree %}
</ul>

Some sample CSS (the .hidden class is the important one):

.hidden    { display: none; }
.depth_1   { background-color: #2E4E74; font-weight: bold; }
.depth_1 a { color: #eee; }
.depth_2   { background-color: #3D5F85; }
.depth_2 a { color: #eee; }
.depth_3   { background-color: #ccc; }
.depth_3 a { color: #111; }

In the head tag of your theme.liquid. This downloads jquery from google. Use your own API key.

<script src="https://www.google.com/jsapi?key=ABQIAAAAHUhuYHxFFdtdBueJCWtglxQR1P6Y3GiZjeB8345hSVh08V0BjxSQrr4g_UArcFqtKsxcWpz_mmxwVQ" type="text/javascript"></script>
<script src="{{ 'category_tree.js' | asset_url }}"></script>
<script language="javascript" type="text/javascript">
//<![CDATA[
  google.load("jquery", "1.6.2");

  google.setOnLoadCallback(function() {
    $.noConflict();
    setupCategoryTree();
    showCategory("{{ current_category.id }}");
    facebox = new Facebox();
  });
//]]>
</script>

And the category_tree.js in your assets/ directory:

function setupCategoryTree() {
  jQuery('ul.category_tree').addClass('hidden');
  jQuery('a.nonleaf_category').click(function(e) {
    e.preventDefault();
    jQuery(e.target.next('.category_tree')).toggleClass('hidden');
  });
}

function showCategory(category_id) {
  jQuery('#category_' + category_id).parents('ul').removeClass('hidden');
}

---

Specifying the root category for the tree

You can now specify the root category for the tree with root_id:

{% cached_category_tree root_id:8 do category %}
{% endcached_category_tree %}

Will only render the Magic Singles category tree.

---

Naming the category tree

If you need to render the same category multiple times on the page with different HTML, you need to name the cache. This can be done with the name attribute:

{% cached_category_tree name:'main' do category %}
{% endcached_category_tree %}

{% cached_category_tree name:'secondary' do category %}
{% endcached_category_tree %}