Custom Section List With Sub Sections

[markHPP]

Hello there!

This is my first post here on the boards, although I have been lurking in the shadows for a couple of months. Anyway...

For the past couple of days I've been trying to create a good old fashioned Section List In Bullets with Sub Sections In Bullets. My first port of call was the Advanced Guide (Page 62) but for some reason the code did not work, no matter what I tried (maybe this is just me? Although THIS THREAD hints that the code may be wrong). Next, I searched these very pages in search of an answer, again maybe I wasn't using the right search criteria but I couldn't find a solution that didn't involve some interesting php and I really wanted to avoid that.

So... after hours of messing around with conditions and blocks and variables, I believe I have finally found an interesting solution/work around. I'm posting it here to maybe get your impressions, check for any unforeseen issues or possibly even leave it here for other users after a similar solution.

I found that the variables SectionNameNext and SectionNamePrev only worked on the current SectionLevel. Therefore, if SectionNamePrev is empty it means you are at the beginning of the list and thus SectionNameNext could be used to find the end, allowing me to use these conditions to create a new list using the <ul> and </ul> tags. Like I said it is a bit of a hack but so far, I've had no problems with it!

So, here's the code (finally!):

Update 1: 10/10/2007, should work now. The method is a bit backwards as you can see with the </li> but because of the condition around it, it only renders where needed.
Update 2: 10/10/2007, thanks NormanRouxel! </li> on final top-level section added, I missed that!

<ul id="sectionListSide">
<actinic:block type="EntireSectionList">
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%21%3d%20%22%22%29"></li></actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%3d%3d%20%22%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29" ><ul></actinic:block>
<li<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionID%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22MainSection%3a%3aSectionID%22%20%2f%3e"> id="currentPage"</actinic:block>><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNameNext%22%20%2f%3e%20%3d%3d%20%22%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29" ></li></ul></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e" >
</actinic:block>
</ul>

This should provide you with the following HTML:

<ul id="sectionListSide">
  <li>Section1</li>
  <li>Section2
    <ul>
      <li>Sub-Section1</li>
      <li id="currentPage">Sub-Section2</li>
    </ul>
  </li>
  <li>Section3
    <ul>
      <li>Sub-Section1</li>
    </ul>
  </li>
</ul>

So there we go, combine this with some CSS, maybe highlight the current section and it could be quite powerful. I hope I haven't just made a fool of myself and this has actually been covered elsewhere!

[gabrielcrowe]

Nice first post. welcome to the forum.

hope to see more clever snippets like this one. though this has been covered before.

edit:
Just checked it out and it works great. Now all you need is code to make only the current sub section render and you're set.

[markHPP]

Why, thank you! I figured it had been covered to quite a degree over the months. I just hadn't seen a method quite like this one so I thought I'd throw it out there.

edit for the edit: yeah! I'd like to have that slice of code myself, I've looked into it, believe me! I've not given up yet, though!

another edit: So far, I have a discrete javascript based method which plugs into the above code and doesn't put any code inside the tags... it's nice but I'd rather it was contained within Actinic to make maintenance easier. I'll post it up once I've worked out the kinks if anyone is interested.

[cdicken]

You beauty! I've been totally stuck on this one - I hadn't been able to figure out how to only include the <ul> and the </ul> tags at the start and the end of a list of sub-sections. Lovely.

[markHPP]

@cdicken: You posted just as I edited the post.. the code still isn't perfect I'm afraid, I just found out that the nested list is s'posed to be within <li> tags, otherwise it will not pass validation and that was one of my main goals. It's easy to cheat and stick <li> in front of <ul> and </li> after </ul> but that still wouldn't be ideal. I'm not near my machine with actinic on at the moment but I will get on to fixing it tomorrow! Sorry about that! Talk about making a bad first impression, huh?

I'm also closer to having a current section navigation list working but this is has thrown a spanner in the works!

[cdicken]

Don't worry about that. I'll have a fiddle as well and see if we can come up with something kosher (flippin' validation )

[markHPP]

Hopefully fixed the code now! Updated the first post for easy access. It looks like it does things a bit backwards in its execution but it only renders the </li> where is needs them so there shouldn't be any strays. It's working for me as far as I can tell, feel free to shout at me if it still isn't working!

[Sean Williams]

Hi Mark
is this available to see working? URL?

(I'm too much of a novice to mess around 'testing' your code )

[NormanRouxel]

I'm not seeing a final </li> after the last item if it's a top-level section.

Also it may be worth removing the blank lines as they are being added to the generated code.

[markHPP]

@Sean Williams: I can provide a URL but I'm afraid that the site is a real mess and always under construction (at least for now!). I'm also still on the trial hosting so it's not a final home for the site. So for now there site is HERE. I currently only have the page layout that uses this code on the catalogue pages, you can see it in action on the left hand column. It also has some javascript plugged into it that hides any sub sections that aren't in use (for example, click on handles and the doors sub sections will hide). I will post that code once I have completed and tested it.

@NormanRouxel: I "think" I have fixed the final </li>. However, so far I am unable to test it in cases where sections are omitted from the site list. I'm not even sure if that would cause an issue. Thanks for the blank line advice too! I initially had them in there to improve readability within Actinic.

[cdicken]

I've been playing with the code this morning, and found that the following code generates a nice hierarchical bulleted list with all the sections in the store down to whatever section level you have:

<actinic:block type="EntireSectionList" >

<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%21%3d%20%22%22" ></li></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%3d%3d%20%22%22" ><ul><li></actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%21%3d%20%22%22%29"><li></actinic:block>
<a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNameNext%22%20%2f%3e%20%3d%3d%20%22%22" ></li></ul></actinic:block>

</actinic:block>

I'll be using this for the site map in v9 (as I couldn't work out how to do this for v8) and some of the new themes will also have pretty flyout menus built in.

[markHPP]

Ah, nicely done, glad I could be of some service. My check is in the post, I take it?

I've since been working on a menu that renders all of sibling sub-sections of the current sub-section and it's parent (has this been achieved before? I 'think' it's on the wanted list). The amazing thing is that it is perl and javascript free... Once I have a good example ready I shall post it. A rough version can be seen on the link posted above (navigate to traditional handles or any of the door sub-sections to see it in action).

[cdicken]

My check is in the post, I take it?

Tee hee. Just for the record, I did write my code from scratch (as yours wasn't quite suitable for releasing with the product) but I did base it on your idea about the sibling section variables - so thanks for that.

[gabrielcrowe]

That dear sir, is a very political way of saying: STFU

[RogerCoathup]

Chris,

I've used your code, but notice that it's not really generating a nested list, i.e. it opens a unordered list <ul> displays top level sections as <li> elements until it gets to one with subsections then closes the </ul> before opening another for the subsection list. So they are shown serially rather than nested.

What I'd really like is for a nested list, is for the subsection unordered list to be inside <li> element for it's parent, i.e:

<ul>
<li>Section 1</li>
<li>Section 2
<ul>
<li>Sub Section 2.1</li>
<li>Sub Section 2.2</li>
</ul>
</li>
<li>Section 3</li>
</ul>

Is there anyway to achieve this?