Page 1 of 2
Create sub category for product list
Posted: Thu Aug 09, 2012 4:30 am
by 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
Re: Create sub category for product list
Posted: Thu Aug 09, 2012 10:54 am
by 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;
}
Re: Create sub category for product list
Posted: Fri Aug 10, 2012 12:26 am
by 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
Re: Create sub category for product list
Posted: Fri Aug 10, 2012 5:48 am
by 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
Re: Create sub category for product list
Posted: Fri Aug 10, 2012 12:08 pm
by phillipuniverse
Ah sorry about the typo. Thanks for reporting back and glad that helped!
Re: Create sub category for product list
Posted: Mon Oct 29, 2012 2:34 pm
by 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> )
Re: Create sub category for product list
Posted: Thu Jan 10, 2013 5:38 pm
by 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?
Re: Create sub category for product list
Posted: Fri Jan 11, 2013 11:43 am
by fibernut
Anyone know anything about this?
Re: Create sub category for product list
Posted: Fri Jan 11, 2013 12:38 pm
by phillipuniverse
Is the markup on the page? Are there any errors in your console? As far as I know the above code works.
Re: Create sub category for product list
Posted: Fri Jan 11, 2013 2:59 pm
by 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.