Forum

Thread tagged as: Question, Runway

Looping through all categories, displaying all items within each category

Working on a FAQ page where questions are categorised, and each category is displayed within an accordion panel. The number of categories is unknown and will be managed from the CMS.

Here's the HTML I'm trying to output:

<div id="horizontalTab">
  <ul class="resp-tabs-list">
    <li>**Category 1**</li>
    <li>**Category 2**</li>
    <li>**Category 3**</li>
    <li>**(listing all categories)**</li>
  </ul><!-- /.resp-tabs-list -->
  <div class="resp-tabs-container">
    <div class="category-list">
          <figure>Item 1 (from category 1)</figure>
          <figure>Item 2 (from category 1)</figure>
          <figure>Item 3 (from category 1)</figure>
          <figure>Item 4 (from category 1)</figure>
          <figure>Item 5 (from category 1)</figure>
          <figure>Item 6 (from category 1)</figure>
              <figure>listing all items within the first category</figure>
    </div><!-- /.category-list -->
    <div class="category-list">
          <figure>Item 1 (from category 2)</figure>
          <figure>Item 2 (from category 2)</figure>
          <figure>Item 3 (from category 2)</figure>
              <figure>listing all items within the second category</figure>
    </div><!-- /.category-list -->
    <div class="category-list">
          <figure>Item 1 (from category 3)</figure>
          <figure>Item 2 (from category 3)</figure>
          <figure>Item 3 (from category 3)</figure>
          <figure>Item 4 (from category 3)</figure>
              <figure>listing all items within the third category</figure>
    </div><!-- /.category-list -->
  </div><!-- /.resp-tabs-container -->
</div><!-- /#horizontalTab -->

1) Listing all categories in "resp-tabs-list" ul is straightforward:

<?php
// list all categories
perch_categories(array('set'=>'faq','template'=>'category.tabs.list.html'));
?>

2) resp-tabs-container: this is where I'd like to loop through all categories, each time listing all corresponding items.

How would you proceed? Would you recommend using collections?

Thank you

Stéphane Mégécaze 0 points

3 years ago

Lexi McGee 3 points

3 years ago

<perch:before>
<li>
<div>
<a href="#">products</a>
<ul>
</perch:before>

<li class="">     
<a href="/categories/products/<perch:category id="catSlug" />"><perch:category id="catSlug" class="" /></a>
<ul class="dropdown-menu">

<perch:if exists="subitems">
<perch:category id="subs" encode="false" />
<perch:else />

</ul>
</li>

<perch:after>
</ul>
</div>
</li>
</perch:after>

submenu

<perch:before>
<li>
</perch:before>

<a href="/categories/<perch:category id="catPath" />" style="" title="<perch:category id="catTitle" format="UC" />">
<perch:category id="catTitle" />
</a>

<perch:after>
</li>
</perch:after>

Had to create the following routes with runway

categories/[slug:categorySlug]  /categories
categories/[slug:categorySlug]/[slug:categorySlug2] /categories
categories/[slug:categorySlug]/[slug:categorySlug2]/[slug:categorySlug3]    /categories
categories/[slug:categorySlug]/[slug:categorySlug2]/[slug:categorySlug3]/[slug:categorySlug4]   /categories

Lexi McGee 3 points

3 years ago

Also try this

<?php
perch_categories([
'set' => 'products',
'filter' => 'catParentID',
'sort' => 'catSlug',
'sort-order' => 'ASC',
'match' => 'eq',
'value' => '0',
'template' => 'parentcategory',
'each' => function($item) {
$item['subs'] = perch_categories([
'template' => 'subcategory',
'set' => 'products',
'filter' => 'catParentID',
'match' => 'eq',
'sort' => 'catSlug',
'sort-order' => 'ASC',
'value' => $item['catID']
],true);
return $item;
}
]);
?>

Stéphane Mégécaze 0 points

3 years ago

Thank you very much Lexi for putting me on the right track!

I've ended up using this:

perch_categories([
    'set'=>'faq',
    'each' => function($item) {
        perch_content_custom('FAQ', [
            'template' => 'faq.multilingual.collapsable.html',
            'category'=>$item['catPath'],
            'lang' => $language,
        ]);
    }
]);

Simpler than expected.