How to have <div> added in <ul> category menu link list generated by CMSB generated

Hi,

That's an interesting problem. I've looking into it and you can do it, but you can't use the _listItemStart and _listItemEnd pseudo fields.

What you can do is use the _hasChild and _isLastChild pseudo fields to manually create the <ul> and <li> tags. For example:

<div>
<ul>
<?php foreach ($categories as $category): ?>
<li><?php echo $category['name'];?>

<?php if ($category['_hasChild']): ?>
<div>
<ul>
<?php else: ?>
</li>
<?php endif ?>

<?php if ($category['_isLastChild'] && !$category['_hasChild']): ?>
</ul>
</div>
<?php endif ?>

<?php endforeach ?>
</ul>
</div>

Hope this helps get you started.

Thanks, Jason.

Two things:

[1] I'd like to understand _isLastChild better. When I first looked at the code in your reply, I didn't understand this line:

<?php if ($category['_isLastChild'] && !$category['_hasChild']): ?>

To me, this says that if the item is _isLastChild and it does not have a child. I didn't understand how something could be both _isLastChild but also have a child itself -- I had been assuming that _isLastChild meant the ultimate very last child at the very end of a branch (and since its the last item it would not have children), thus a last child item would not by definition have a child. But your code made me think that _isLastChild might instead mean the last child _in a level_ (and the last child in a level can have children below it on a sub level).

So, what exactly does _isLastChild specifically mean? Does it mean last child in a level, and not the ultimate very last child at the very end of a branch?

[2] At first your code did not work and outputted only php errors about undefined variables. I tweaked it a little by replacing the variable names you used to be the ones I used and it output the list without php errors, but it did not output and render the list properly. My list should be indented like this:

1st No Alpha Test Category
Cats
Dogs
- Alaskan Huskie
-- Musher Huskie
-- Sarah Palin Huskie
- Boxers
-- Long Hair
-- Short Hair
Fish

Using _listItemStart did generate it indented like this, as I should be.

BUT your code put Fish indented in one level, putting it at the same level as Alaskan Huskie and Boxers, i.e., as a sub of Dogs, and not at the same level as Dogs as it should be as shown immediately above. Here's what your code generated after I tweaked it to use the correct variable names:

1st No Alpha Test Category
Cats
Dogs
- Alaskan Huskie
-- Musher Huskie
-- Sarah Palin Huskie
- Boxers
-- Long Hair
-- Short Hair
- Fish


And here's the code that generated this (i.e., your code that I corrected the variable names in):

<div>
<ul>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<li><?php echo $categoryRecord['name'];?>

<?php if ($categoryRecord['_hasChild']): ?>
<div>
<ul>
<?php else: ?>
</li>
<?php endif ?>

<?php if ($categoryRecord['_isLastChild'] && !$categoryRecord['_hasChild']): ?>
</ul>
</div>
<?php endif ?>

<?php endforeach ?>
</ul>
</div>

And here's the the html for this that got generated using your code:

<div>
367 <ul>
368
369 <li>1st No Alpha Test Category
370
371
372 </li>
373
374
375
376
377
378 <li>Cats
379
380
381 </li>
382
383
384
385
386
387 <li>Dogs
388
389
390 <div>
391 <ul>
392
393
394
395
396
397 <li>Alaskan Huskie
398
399
400 <div>
401 <ul>
402
403
404
405
406
407 <li>Musher Huskie
408
409
410 </li>
411
412
413
414
415
416 <li>Sarah Palin Huskie
417
418
419 </li>
420
421
422
423 </ul>
424 </div>
425
426
427
428 <li>Boxers
429
430
431 <div>
432 <ul>
433
434
435
436
437
438 <li>Long Hair
439
440
441 </li>
442
443
444
445
446
447 <li>Short Hair
448
449
450 </li>
451
452
453
454 </ul>
455 </div>
456
457
458
459 <li>Fish
460
461
462 </li>
463
464
465
466 </ul>
467 </div>
468
469
470
471</ul>
472</div>


So the question now is, with this testing feedback from me, what should the code be to output and generate the list properly with the correct indentation?

It looks like a closing </ul> to close the sub level under Dogs needs to be added before the <li> is generated before Fish. In other words, it seems that the code has to somehow adjust for what sub level, or sub sub level or sub sub sub level, the item immediately above Fish is at. I'm hoping the code you reply with will adjust for this, since the above is just a simple working example and my actual site may have different or more levels than this simple working example. I'm guessing it probably is something like some code that selects the last child in a level that adds the closing </ul> for sub levels to close it off else the item below will be included in the same level.

Thanks in advance, looking forward to the code you can supply.

David

Thanks,
David

Hi David

Thanks for posting :). I think the best thing to do here would be setup a sample template with an example menu hardcoded on it exactly how you want everything to display. Do you have that already? Can you attach a copy for me to work with?

From there, I'll also get you to send me a copy of the schema file for that section (you'll find it in /data/schema).

With all of this, I can create a local copy of what you are working on and it will be much easier for me to test out.

The alternative would be for me to guess some code and let you test it, then tweak from there.

Let me know what you think. Thanks!

Thanks Ross. Let's for now do the second thing you said, i.e., give me some code you think will work and I'll test it and let you know the results. You should probably be able to give me some code that will create the unordered list structure that needs to work for this.

Thanks,
David

Hi David,

_isLastChild indicates if it's the last child in a given branch. So we only want to close off a </ul> if it's the last child and has no children itself.

We can try also closing the </li> tag when closing a <ul> like this:



<div>
<ul>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<li><?php echo $categoryRecord['name'];?>

<?php if ($categoryRecord['_hasChild']): ?>
<div>
<ul>
<?php else: ?>
</li>
<?php endif ?>

<?php if ($categoryRecord['_isLastChild'] && !$categoryRecord['_hasChild']): ?>
</li>
</ul>
</div>
<?php endif ?>

<?php endforeach ?>
</ul>
</div>

Give this a try and let us know if this works for you.

Hope this helps