Category Left Side Accordion Menu

Question

I have a customer who updates his site categories regularly, according to customer requests, and also adds a single level of subcategories to each category. He uses Categories section under Site Settings on BC admin to add these categories and subcategories.

I want a Category Accordion Menu on the left side of the home page that updates when the site categories are updated at a single location.

When you select a particular subcategory on the Category menu, I want a list of webapp items displayed that are identified with that subcategory.

I do not want to use drop down lists.

Is this possible? I am finding it difficult to find a solution.

Edit - Additional Information

The category menu works, thank you.

I now need to display a selectable list of subcategories in center column of page with the following process:

1. Category is selected on left side column menu with link to category html page (for example - category.html) variable is passed to category page identifying category selected and 2 column subcategory list to display. Only subcategories related to Press releases are listed. Single category page for all categories - dynamic.

2. Select subcategory from 2 column list in center column.

3. Subcategory page is displayed (for example subcategory.html) and related Press Releases are displayed in a summary list under 2 column subcategory list in center column according to variable passed from selection of subcategory. Single subcategory page - dynamic.

4. Press Release page is displayed (for example press-release.html) when a specific Press release is selected from Press Release summary list. A variable is passed from subcategory.html Press Release selection. Single Press Release page - dynamic.

3 variables: What category? What subcategory? What Press Release?

Question: What is the code to display a 2 column subcategory list that have related Press Releases? Category ID variable should be passed to category HTML page. Category, Subcategory and Press Release pages are dynamic, displaying according to variable passed to page.

The categories and Subcategories are created in BC admin under Site settings > categories.

If somebody else understands a solution, please feel free to add your answer.

Answer 1

Your question needs to be broken down into several parts:

• Having BC render suitable HTML
• Creating a nested 'accordion' from that HTML
• Changing the content of the page based on the chosen Classification

I'll address the first part. Here is some example code that will generate nested ul tags to match the Classification structure:

{module_categorylist id="-1" template="" collection="allCats"}  
{% assign oCount = 0 -%}
{% assign thisCatId = "-1" -%}
{% assign parentCatId_L0 = "-1" -%}

<ul>
    {% for cat_L0 in allCats.items -%}
        {% assign oCount = oCount | plus: 1 -%}
        {% if cat_L0.parentId == parentCatId_L0 -%}
            <li>
                <a href="#{{ cat_L0.id }}">
                    {{ cat_L0.name }}
                </a>
                {% assign countedChildren = 0 -%}
                {% for catCounter in allCats.items -%}
                    {% assign oCount = oCount | plus: 1 -%}
                    {% if catCounter.parentId == cat_L0.id -%}
                        {% assign countedChildren = countedChildren | plus: 1 -%}
                    {% endif -%}
                {% endfor -%}

                {% if countedChildren > 0 -%}
                    <span>(+)</span>
                    {% assign parentCatId_L1 = cat_L0.id -%}

                    {% comment -%} Recursion starts here ... {% endcomment -%}

                    <ul>
                        {% for cat_L1 in allCats.items -%}
                            {% assign oCount = oCount | plus: 1 -%}
                            {% if cat_L1.parentId == parentCatId_L1 -%}
                                <li>
                                    <a href="#{{ cat_L1.id }}">
                                        {{ cat_L1.name }}
                                    </a>
                                    {% assign countedChildren = 0 -%}
                                    {% for catCounter in allCats.items -%}
                                        {% assign oCount = oCount | plus: 1 -%}
                                        {% if catCounter.parentId == cat_L1.id -%}
                                            {% assign countedChildren = countedChildren | plus: 1 -%}
                                        {% endif -%}
                                    {% endfor -%}

                                    {% if countedChildren > 0 -%}

                                        <span>(+)</span>
                                        {% assign parentCatId_L2 = cat_L1.id -%}

                                        {% comment -%} Recursion starts here ... {% endcomment -%}

                                        <ul>
                                            {% for cat_L2 in allCats.items -%}
                                                {% assign oCount = oCount | plus: 1 -%}
                                                {% if cat_L2.parentId == parentCatId_L2 -%}
                                                    <li>
                                                        <a href="#{{ cat_L2.id }}">
                                                            {{ cat_L2.name }}
                                                        </a>

                                                        {% comment -%} Recursion ends here ... {% endcomment -%}
                                                    </li>
                                                {% endif -%}
                                            {% endfor -%}
                                        </ul>

                                    {% endif -%}
                                </li>
                            {% endif -%}
                        {% endfor -%}
                    </ul>

                {% endif -%}
            </li>
        {% endif -%}
    {% endfor -%}
</ul>

<p># of classifications: {{ allCats.items | size }}</p>
<p>"operation" count: {{ oCount }}</p>

(I had hoped that this could be done cleanly in BC, but my attempts at proper recursion were foiled by the module_categorylist tag not supporting custom templates, and the misbehavior of for loops in nested include statements.)

Here's an example of the output:

<ul>
    <li>
        <a href="#14606">Company</a>

        <ul>
            <li>
                <a href="#45412">sub Company</a>

                <ul>
                    <li><a href="#45413">Sub Sub Company</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li><a href="#14744">Customers</a></li>

    <li>
        <a href="#45414">Foo</a>

        <ul>
            <li>
                <a href="#45415">Bar</a>

                <ul>
                    <li><a href="#45416">Baz</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li>
        <a href="#14609">Products</a>

        <ul>
            <li>
                <a href="#22634">Sub Products</a>

                <ul>
                    <li><a href="#45418">More Third Level Products</a></li>

                    <li><a href="#45409">Third Level Products</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li><a href="#14075">Root</a></li>

    <li><a href="#14610">Solutions</a></li>
</ul>

<p># of classifications: 14</p>

<p>"operation" count: 224</p>

As for the other parts of your question, I would recommend existing solutions to the nested accordions problem, and note that you can use the module_url tag in combination with a GET request to retrieve items marked with a given Classification.