Categories Side Menu - sub items

    Hi,


    I'm using Perch Runway and I'm trying to create a side menu using perch_categories([ });


    I currently have 2 layers (each with their own template) that work fine but want to extend this to 4 and really would appreciate some help/guidance.


    This is what I have currently in a layout template which specifies the templates for each layer:



    Once again any help would be very much appreciated.


    Daz

  • drewm

    Approved the thread.

    Not really - thought that's how I tap into each category sub level.


    Don't know if this has any impact on a solution but I'm also running a query to determine whether to display the item or not.

    Not really working as I'd expect for the sub items, anyway this is what I currently have in each of the category templates:


    sidebar.html



    sidebar_subs.html

    Code
    1. <perch:before>
    2. <ul class="ulv2 <perch:if id="catPath" match="eq" value="{currentCat}">active</perch:if>">
    3. </perch:before>
    4. <li class="lilv2">
    5. <a class="alv2 <perch:if id="catPath" match="eq" value="{ctS}">active</perch:if>" 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>
    6. </li>
    7. <perch:after>
    8. </ul>
    9. </perch:after>

    To clarify, I'm trying to display my product categories as a drop down menu using nested list items something like this example: http://itsaboutyou.co/DropMenu/index.html


    I just thought I needed the multiple queries so that I can have the nested list items like this below?


    Hope that makes sense.

    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.

    Code
    1. <ul class="ulv1">
    2.     <li class="llv1">
    3.         <a class="alv1">Level 1 Cat Title</a>
    4.         <ul class="ulv2">
    5.             <li class="llv2">
    6.                 <a class="alv2">Level 2 Cat Title</a>
    7.             </li>
    8.         </ul>
    9.     </li>
    10. </ul>


    This is what I'm working with:

    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.

    Forgive me, it is Friday! It does work the template of course limited to 2.


    This is particularly tricky as the UL's are for each level of catDepth, but there's nothing in the template we can check to see if the item is the first/last in it's catDepth to be able to format the HTML.


    Perch navigation has '<perch:pages id="subitems" encode="false">' which makes this a tonne easier, so not sure what to suggest here. Drew, any suggestions? Happy to create a template as a guide for Perchers if I can figure out the best strategy.

    I thought it was just me being stupid.


    I'm surprised that such a simple thing (correctly formatted nested lists ) be so difficult to implement.


    This was Perch's original selling point - "A CMS should not be dictating your front-end code. With Perch, you bring your own code to your project.".


    Think this is why I went down this route, maybe the answer is something similar?