0

I had a previous post here in which I was able to get a category tree working for 2 levels, however I'm having problems getting to work for a third level. I had edited the original post but never received an answer so that's why I'm creating a new question.

I'm trying to get an accordion menu to work with bootstrap and GWCODE Categories. The problem I'm having is determining when a category depth starts and ends so that I can open and close divs appropriately. I have 3 main categories, multiple 2nd level categories, and multiple 3rd level categories. Here's the code I have so far which I'm trying to get to work for the third level of categories:

{exp:gwcode_categories  style="linear" group_id="1" depth="1|2|3"}
{if depth1_start}
<div class="accordion-group">
    <div class="accordion-level1-header">
    <!-- LEVEL 1 CONTAINER -->
    <h3><a href="{site_url}index.php/{complete_path}">{cat_name}  &raquo;</a> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#{cat_url_title}-level2"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></h3>
    </div>
    {/if}
    {if depth2_start}
    <!-- LEVEL 2 CONTAINER -->
      <div id="{parent_url_title}-level2" class="accordion-level2 collapse">
    {/if}
      {if depth==2}
        <div class="level2-item"><a href="{site_url}index.php/{complete_path}">{cat_name}  &raquo;</a> <a data-toggle="collapse" data-parent="#accordion" href="#{cat_url_title}-level3"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></div>
      {/if}
        {if depth3_start}
        <!-- LEVEL 3 CONTAINER -->
          <div id="{parent_url_title}-level3" class="accordion-level3 collapse">
        {/if}
          {if depth==3}
            <div class="level3-item"><a href="{site_url}index.php/{complete_path}">{cat_name}  &raquo;</a></div>
          {/if}
      {if depth3_end}
        </div><!-- END OF LEVEL 3-->
      {/if}
    {if depth2_end}
      </div><!-- END OF LEVEL 2-->
    {/if}
{if depth1_end}

{/if}
{/exp:gwcode_categories}

The HTML that is output:

<!-- LEVEL 1 CONTAINER -->


<h3><a href="#">Data Solutions  &raquo;</a> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#data-solutions-level2"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></h3>
</div>
<!-- LEVEL 2 CONTAINER -->
<div id="data-solutions-level2" class="accordion-level2 collapse">
  <div class="level2-item"><a href="#/copper">Copper  &raquo;</a> <a data-toggle="collapse" data-parent="#accordion" href="#copper-level3"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></div>
  <!-- LEVEL 3 CONTAINER -->
  <div id="copper-level3" class="accordion-level3 collapse">
    <div class="level3-item"><a href="#/copper/copper-cable">Copper Cable  &raquo;</a></div>
    <div class="level3-item"><a href="#/copper/copper-connectivity">Copper Connectivity  &raquo;</a></div>
    <div class="level3-item"><a href="#/copper/plastics">Plastics  &raquo;</a></div>
  </div>
  <!-- END OF LEVEL 3--> 
</div>
<!-- END OF LEVEL 2--> 
<!-- LEVEL 2 CONTAINER -->
<div id="data-solutions-level2" class="accordion-level2 collapse">
  <div class="level2-item"><a href="#/fibre">Fibre  &raquo;</a> <a data-toggle="collapse" data-parent="#accordion" href="#fibre-level3"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></div>
  <!-- LEVEL 3 CONTAINER -->
  <div id="fibre-level3" class="accordion-level3 collapse">
    <div class="level3-item"><a href="#/fibre/fibre-cable">Fibre Cable  &raquo;</a></div>
    <div class="level3-item"><a href="#/fibre/fibre-connectivity">Fibre Connectivity  &raquo;</a></div>
  </div>
  <!-- END OF LEVEL 3--> 
</div>
<!-- END OF LEVEL 2--> 
1

Here is the approach i used for 2 levels. Id written my own plugin to generate required categories, so would work equally well with gw cats. I also cached the list for a day.

 {exp:stash:set_list name="cats_level1" parse_tags="yes" save="yes" scope="site" replace="yes" refresh="{sn_stash_refresh}" }
        {exp:my_plugin:get_cats level = "1"}
            {stash:cat1_name}{cat_name}{/stash:cat1_name}
            {stash:cat1_id}{cat_id}{/stash:cat1_id}
            {stash:cat1_url}{cat_url_title}{/stash:cat1_url}
            {stash:cat1_count}{cat_count}{/stash:cat1_count}
        {/exp:my_plugin:get_cats}
    {/exp:stash:set_list}

    {exp:stash:get_list name = "cats_level1"}
        {exp:stash:set_list name="cats_level2_{cat1_id}" parse_tags="yes" save="yes" scope="site" replace="yes" refresh="{sn_stash_refresh}" }
            {exp:my_plugin:get_cats level = "2" parent = "{cat1_id}"}
                {stash:cat2_name}{cat_name}{/stash:cat2_name}
                {stash:cat2_url}{cat_url_title}{/stash:cat2_url}
                {stash:cat2_count}{cat_count}{/stash:cat2_count}
            {/exp:my_plugin:get_cats}
        {/exp:stash:set_list}
    {/exp:stash:get_list}

You could then loop through depth 3 (just like depth 2 above) and create your lists for each depth 2 category.

And display like this. I used the params to divide the categories into columns. Three columns for desktop, two columns for mobile and tablets.

{exp:stash:set_list name="params" parse_conditionals = "yes"}
        {if ress == 3}
            {stash:param}limit = "1/3"{/stash:param}
            {stash:param}offset = "1/3"  limit = "1/3"{/stash:param}
            {stash:param}offset = "2/3"{/stash:param}
        {/if}
        {if ress < 3}
            {stash:param}limit = "1/2"{/stash:param}
            {stash:param}offset = "1/2"{/stash:param}
        {/if}
    {/exp:stash:set_list}

  {exp:stash:get_list name = "params"}
  <div class="category_wrap">
                        {exp:stash:get_list:nested  name="cats_level1" scope="site" {params}}
                            <div class="item_wrap category_item rounded">
                                <a href="#" class="toggle rounded_top_left" cat_1="{cat1_id}"><h2 id="cat_{cat1_id}">{cat1_name} <span>({cat1_count})</span></h2></a>
                                <div class="toggle_{cat1_id}" style="display:none;">
                                    <ul>
                                        <li><a href="{path='{segment_1}/category'}/{cat1_url}">All</a></li>
                                        {exp:stash:get_list:nested:inner name="cats_level2_{cat1_id}" scope="site"}
                                        <li><a href="{path='{segment_1}/category'}/{cat2_url}">{cat2_name} ({cat2_count})</a></li>
                                        {/exp:stash:get_list:nested:inner}
                                    </ul>
                                </div>
                            </div>
                        {/exp:stash:get_list:nested}

                    </div>
                {/exp:stash:get_list}

Your inner most get_list will look like this

{exp:stash:get_list:nested:inner:innermost name="cats_level3_{cat2_id}" scope="site"}
<li><a href="{path='{segment_1}/category'}/{cat3_url}">{cat3_name} ({cat3_count})</a></li>
{/exp:stash:get_list:nested:inner:innermost}

Sorry for formatting, not so easy on ipad! Hope that gives you an approach. Code copied from live and edited a little, but not tested.

| improve this answer | |
  • thanks for that @dadonbike. I'll give it a go. I thought it would be possible with gwcode-categories though, so if someone has a solution for that then great. – steve Sep 11 '13 at 10:48

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.