CODE

List Items Under Category Headings with Anchor Menu

Generate a list of items sorted under headings based on the categories those items are related to along with an anchor/jump menu to easily navigate to each heading/section.

Adam Wilson's:
CODE Items Profile

v1.0.0

1. If you have items that are categorised with the system categories feature you can use this code to create a category menu that jumps to the corresponding category heading with those categorised items listed out.

   You can remove the menu if not needed without affecting any of the other functionality.

   NOTE: Since the module_category_list component only outputs categories that are in use by the source module, there will not be any headings without items. Similarly, though, items without any categorisation will not be listed at all.

   Place the below code onto a page where you want your items listed (we are bypassing the regular module list layouts here).

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <!-- MODULE COMPONENTS -->
   {% component source: "YOUR MODULE NAME HERE", layout: "", limit: "1000", type: "module", collectionVariable: "itemData" %}
   {% component module: "YOUR MODULE NAME HERE", layout: "", type: "module_category_list", collectionVariable: "catData" %}
   
   <!-- ANCHOR MENU -->
   <ul class="menu">
   {% for cat in catData.items %}
       <li><a href="#{{cat.FullName | replace: ' ', '-' | replace: '/', '-' | url_encode}}">{{cat.Name}}</a></li>
   {% endfor %}
   </ul>
   
   <!-- CATEGORY HEADINGS & ITEM LIST -->
   {% for cat in catData.items %}
   {% assign catID = cat.Id %}
   <h2 id="{{cat.FullName | replace: ' ', '-' | replace: '/', '-' | url_encode}}">{{cat.Name}}</h2>
   {% for item in itemData.items %}
   {% if item.ItemCategoryIdList contains catID %}
   <p><a href="{{item.Url}}">{{item.Name}}</a></p>
   {% endif %}
   {% endfor %}
   {% endfor %}

   NOTE:
   This can also be used for system Tags as well, by replace the module_category_list component at the top with the module_tag_list component along with a few other adjustments, like this:

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <!-- MODULE COMPONENTS -->
   {% component source: "YOUR MODULE NAME HERE", layout: "", limit: "1000", type: "module", collectionVariable: "itemData" %}
   {% component module: "YOUR MODULE NAME HERE", layout: "", type: "module_tag_list", collectionVariable: "tagData" %}
   
   <!-- ANCHOR MENU -->
   <ul class="menu">
   {% for tag in tagData.items %}
       <li><a href="#{{tag.Name | replace: ' ', '-' | replace: '/', '-' | url_encode}}">{{tag.Name}}</a></li>
   {% endfor %}
   </ul>
   
   <!-- TAG HEADINGS & ITEM LIST -->
   {% for tag in tagData.items %}
   {% assign tagName = tag.Name %}
   <h2 id="{{tag.Name | replace: ' ', '-' | replace: '/', '-' | url_encode}}">{{tag.Name}}</h2>
   {% for item in itemData.items %}
   {% if item.ItemTags contains tagName %}
   <p><a href="{{item.Url}}">{{item.Name}}</a></p>
   {% endif %}
   {% endfor %}
   {% endfor %}

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.