Create sub category for product list

[gayath.c]

Hi all,

I am making effort to display sub categories for product list of broadleaf 2.0 heat-clinic starter application. This feature was available for coffee starter application of version 1.6 (and pagination as well). But disappear version 2.0 starter application.

is anyone managed to display sub category for product list for version 2.0 starter application? or is there any easy way to make and display product sub categorize? I needs to sub categorize products and display on the each pages as appeared version 1.6 starter application.

thanks.
gayath

[phillipuniverse]

While we don't provide the subcategory navigation out of the box, this isn't too painful to add.

Check out the nav.html file, which currently looks like this:

Code: Select all

<nav>   
   <div th:remove="all">
      <!--
           This template displays the navigation of the site by looking up the category named "Nav"
           and building a list of the categories sub-categories.                            
      -->
   </div>
   <blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />
   
   <ul>
      <li th:each="category : ${navCategories}">
         <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
      </li>
   </ul>
</nav>


An example of changing this for subcategories, would be to change that to something like this:

Code: Select all

<nav>   
    <div th:remove="all">
        <!--
            This template displays the navigation of the site by looking up the category named "Nav"
            and building a list of the categories sub-categories.                            
        -->
    </div>
    <blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />

    <ul>
        <li th:each="category : ${navCategories}">
            <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
            <ul th:if="!${#lists.isEmpty(category.getChildCategories())}" class="sub-menu">
                <li th:each="cat : ${category.getChildCategories()}">
                    <a th:text="${cat.name}" th:href="@{${cat.url}}"  />
                </li>
            <ul>
        </li>
    </ul>
</nav>


Then, you can add the following styles to your style.css:

Code: Select all

   nav ul li:hover .sub-menu { display: block; }

        nav ul li ul.sub-menu {
        position: absolute;
        top: 181px;
          list-style-type: none;
        background: url(../img/canvas.jpg);
        z-index: 99999;
        display: none;
          width: 253px;
      }

        nav ul li ul.sub-menu li {
            display: block;
            float: none;
        }

        nav ul li ul.sub-menu li:hover {
            background-color: #A9C8CB;
            -webkit-transition: background-color 0.1s ease-in;
            -moz-transition: background-color 0.1s ease-in;
            -o-transition: background-color 0.1s ease-in;
            transition: background-color 0.1s ease-in;
        }

        nav ul li ul.sub-menu img {
            z-index: 99999;
            float: left;
            width: 200px;
            height: 200px;
        }

        nav ul li ul.sub-menu a {
            font: 12px/35px 'ProximaNovaBold', Helvetica, sans-serif;
            color: #342020;
            padding: 10px;
            background: none;
        }



[gayath.c]

Thank you very much pverheyden. This is really helpful for me.

Just small change, need nav.html's <ul> tag make as </ul>

thanks,
gayath

[gayath.c]

In addition to the above change, I made following change to the category object validation which not cause to break the existing code.

In the nav.html file

Previous code :

<ul th:if="!${#lists.isEmpty(category.getChildCategories())}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
<ul>

Updated Code :

<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
<ul>

Thanks,
gayath

[phillipuniverse]

Ah sorry about the typo. Thanks for reporting back and glad that helped!

[limebot]

The Code Correction is missing a closing </ul> tag

<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
<ul> <--- this should be a close tag (</ul> )

[fibernut]

I tried this on version 2.0.2 GA and it does not work correctly. The menus are not displayed on hover and display below the parent category when clicked.

Would there be a problem with the CSS?

[fibernut]

Anyone know anything about this?

[phillipuniverse]

Is the markup on the page? Are there any errors in your console? As far as I know the above code works.

[fibernut]

It is a stock demo site and when I make the above changes, I hover over the categories and no sub menu drops down. When I click to go into a parent category it then shows the sub category below the main nav in a horizontal line overlapping headers etc.
Just to be clear, I copied the CSS you posted into my styles.css just below the comments. I then replace the code in the nav.html partial template with the updated code posted, and the closing tag correct as mentioned in this thread.