0

I am displaying all of a channel's parent and child categories. The client's design is kinda tricky so the goal is each parent group is in a row, each parent name is in a tag and its children are in a list...

<div class="row">
   <h3>Breakfast</h3>
   <ul>
      <li>Coffee</li>
      <li>Bakery</li>
   </ul>
</div>

<div class="row">
   <h3>Lunch</h3>
   <ul>
      <li>Sandwiches</li>
      <li>Salads</li>
   </ul>
</div>

I have kinda output this result with channel categories...

<div class="row">
   {exp:channel:categories channel="catering" style="linear"}
      {if "{parent_id}" == 0}
         <h3>{category_name}</h3>
      {if:else}
         <li>{category_name}</li>
      {/if}
   {/exp:channel:categories}
</div>

It comes out like...

<div class="row">
   <h3>Breakfast</h3>
      <li>Coffee</li>
      <li>Bakery</li>
   <h3>Lunch</h3>
      <li>Sandwiches</li>
      <li>Salads</li>
</div>

But how do I get each parent group properly wrapped in a <div> and the <li> items wrapped in <ul></ul> tags? Are there more advanced conditionals I need to be using?

Thank you for any suggestions.

0

Ok... This can be confusing.

Can you try this, please?

{exp:channel:categories channel="catering" style="linear"}
    {if parent_id == 0 OR count == 1}
        {if count > 1 AND count != total_results}
                </ul>
            </div>
        {/if}
        <div class="row">
            <h3>{category_name}</h3>
            <ul>
    {/if}
    {if parent_id != 0}
        <li>{category_name}</li>
    {/if}
    {if count == total_results}
            </ul>
        </div>
    {/if}
{/exp:channel:categories}
| improve this answer | |
0

Confusing indeed, but yes, that pretty much did the trick.

Except the parent category was repeating as the first item in the list, so I added && parent_id != 0 to the second {if parent_id}

This is the final working code...

{exp:channel:categories channel="catering" style="linear"}
    {if parent_id == 0 OR count == 1}
        {if count > 1 AND count != total_results}
            </ul>
            </div>
        {/if}

        <div class="row">
        <h3>{category_name}</h3>
        <ul>
    {/if}
    {if parent_id && parent_id != 0}
        <li>{category_name}</li>
    {/if}
    {if count == total_results}
        </ul>
        </div>
    {/if}
{/exp:channel:categories}

Many thanks for your help!

| improve this answer | |
  • I'm glad it helped. I moved your update into the answer. Can you please, close this comment and mark the answer? Thanks! – Robson Sobral Nov 16 '14 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.