2

I'm currently using Categories to organize an inventory of products. The hierarchy is straightforward: category, subcategory, and single product entry. The url structure I'm are hoping to use reflects the hierarchy: homepage.com/products/category/subcategory/product

So far, I've been able to display the proper slug for the products section and output a simple nav menu. What I'd like to do now is refine the nav so that it only display the subcategories (children) of the category (parent) of product I'm on. I think I'm looking for something like this but for Categories + Channel section rather than a Structure section.

I have an idea of how to achieve this, but I'm having trouble getting it to work. I think what I'd like to do is pull the url segment, match it to a category, then display its children. I know I'm missing something basic or haven't fully grasped the syntax of Twig. Any help would be appreciated, thank you!

-- edit --

Marion's suggestion was right on:

{% set categories = craft.categories.group('products').level('1') %}

<ul id="sideNav">
  {% for category in categories %}
    {% set activeCat = (category.slug == craft.request.segment(2)) %}
    <li{% if activeCat %} class="active"{% endif %}>
      <a href="{{category.url}}">{{ category.title }}</a>
      {% if activeCat %}
        {% set subCategories = craft.categories.descendantOf(category) %}
        <ul>
          {% for subCat in subCategories %}
            <li><a href="{{subCat.url}}">{{subCat.title}}</a></li>
          {% endfor %}
        </ul>
       {% endif %}
   </li>
  {% endfor %}
</ul>
Community
  • 1
Steph
  • 139
  • 9

2 Answers2

4

I think you don't need or want the {% nav %} tag. This should work with your current nav: 

{% set categories = craft.categories.group('products') %}

<ul id="sideNav">
  {% for category in categories %}
    {% set thisIsActiveCategory = (category.slug == craft.request.segment(2)) %}
    <li{% if thisIsActiveCategory %} class="active"{% endif %}>
      {{ category.title }}
      {% if thisIsActiveCategory %}
        {# loop over the subcategories #}
        {% set subCategories = craft.categories.descendantOf(category) %}
        <ul>
          {% for subCat in subCategories %}
            <li>{{subCat.title}}</li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>
Marion Newlevant
  • 12,047
  • 22
  • 55
  • Marion, I'm going to try this on Monday. Looks a lot closer than what I have been working on. Thanks! – Steph Jul 03 '14 at 23:44
2

The outline of what you want to do looks reasonable. Here are some details: 

{# get the category from the segment #}
{% set parentCategory = craft.categories.slug(craft.request.segment(2)) %}

{# get the children of this category #}
{% set subCategories = craft.categories.descendantOf(parentCategory) %}

{# loop over the subcategories #}
{% for subCat in subCategories %}
  <a href="{{subCat.url}}">{{subCat.title}}</a>
{% endfor %}
Marion Newlevant
  • 12,047
  • 22
  • 55
  • Thanks for your answer Marion. I'm trying to apply this to my current nav setup, which I'll edit into my original question. So far no success, but will keep trying. – Steph Jul 03 '14 at 19:05