This is the method I tried originally but couldn't get the list nested correctly.
I've just tried again and just seem to get unexpected results.
I've tried and number of variations, placing <perch:before>, <perch:if id="catDepth" value="2" match="eq"> etc in various configurations but none of them seem to provide a correctly nested list, i.e.
- <ul class="ulv1">
- <li class="llv1">
- <a class="alv1">Level 1 Cat Title</a>
- <ul class="ulv2">
- <li class="llv2">
- <a class="alv2">Level 2 Cat Title</a>
- </li>
- </ul>
- </li>
- </ul>
This is what I'm working with:
- <perch:before>
- <h4>Product Categories</h4>
- <div class="box-content box-category">
- <ul class="ulv1">
- </perch:before>
- <perch:if id="catDepth" value="1" match="eq">
- <li class="llv1">
- <a class="alv1" href="/<perch:category id="pge" value="{pge}">?ctS=<perch:category id="catPath">&ctT=<perch:category id="catTitle">&lyO=<perch:category id="lyO" value="{lyO}">">
- <perch:category id="catTitle" type="smarttext" label="Title" required="true">
- </a>
- <span class="subDropdown <perch:if id="catPath" match="eq" value="{ctS}">minus<perch:else>plus</perch:if>"></span>
- </perch:if>
- <perch:if id="catDepth" value="2" match="eq">
- <perch:before>
- <ul class="ulv2" style="display:none;">
- </perch:before>
- <li class="llv2">
- <a class="alv2" href="/<perch:category id="pge" value="{pge}">?ctS=<perch:category id="catPath">&ctT=<perch:category id="catTitle">&lyO=<perch:category id="lyO" value="{lyO}">">
- <perch:category id="catTitle" type="smarttext" label="Title" required="true">
- </a>
- </li>
- <perch:after>
- </ul>
- </perch:after>
- </perch:if>
-
- <perch:if id="catDepth" value="1" match="eq">
- </li>
- </perch:if>
-
- <perch:after>
- </ul>
- </div>
- <hr class="black">
- <div class="pad25"></div>
- </perch:after>
Display More
This workup is for 2 category levels (catDepth=2) but ultimately I'm trying to do 4 category levels.
Any help on how I structure this to get the desired outcome would be very much appreciated.