View Single Post
  #3  
Old 07-24-2007, 02:27 PM
 
nevets1219 nevets1219 is offline
 

eXpert
  
Join Date: Jun 2006
Posts: 351
 

Default Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible

A CSS recommendation:

Add the following to your menu.css (adjust as necessary)
Code:
#floatingBold { float: right; margin-right: 5px; }

Then instead of just using the '+', you would do
Code:
<b id="floatingBold">+</b>
It'll look very neat this way. However, you'll probably have to move the block of code to the beginning after <li> inside the <a>

One thing I have to note is that the CSS is very well done and nicely documented!

EDIT:
Well, I figured out the difference between both versions. I overlooked one very tiny difference.

You were using $allcategories for sublevels. The other method was using $allsubcategories. $allsubcategories is basically an array that lists each categories' subcategories which means X-Cart has already done the work somewhere and we shouldn't do it again (by traversing through all of $allcategories). Here are some actual numbers to let you see the efficiency of both methods.

Using $allcategories and using the Smarty debug info, we have the following for menu/menu.tpl:
Code:
0.06226 0.01211 0.01254

Using $allsubcategories and using the Smarty debug info, we have the following for menu/menu.tpl:
Code:
0.05024 0.00475 0.00439
0.006 to 0.01 difference (refer to the above post to get an idea of how our categories are structured). I would highly recommend that you switch to this method if you can sacrifice some memory space (you have to store the categoryid of each level temporary, I don't believe you can just do $allsubcategories.$level_one_cat.categoryid (or at least when I did it, it gave me some errors).


Here's what it finally looks like
Code:
{assign var=subcatSymbol value='<b id="floatingBold">+</b>'} <ul id="navmenu"> {foreach from=$categories item=level_one name="Root"} {assign var=one value=$level_one.categoryid} {if $level_one.parentid eq 0 and $level_one.avail eq "Y"} <li><a href="home.php?cat={$level_one.categoryid}">{if $level_one.subcategory_count gt 0}{$subcatSymbol}{/if}{$level_one.category|escape:'html'}</a> {if $level_one.subcategory_count gt 0} <ul> {foreach from=$allsubcategories.$one item=level_two name="Level_Two"} {assign var=two value=$level_two.categoryid} {if $level_two.avail eq "Y"} <li><a href="home.php?cat={$level_two.categoryid}">{if $allsubcategories.$two ne ''}{$subcatSymbol}{/if}{$level_two.category|escape:'html'}</a> {if $allsubcategories.$two ne ''} <ul> {foreach from=$allsubcategories.$two item=level_three name="Level_Three"} {assign var=three value=$level_three.categoryid} {if $level_three.avail eq "Y"} <li><a href="home.php?cat={$level_three.categoryid}">{if $allsubcategories.$three ne ''}{$subcatSymbol}{/if}{$level_three.category|escape:'html'}</a> {if $allsubcategories.$three ne ''} <ul> {foreach from=$allsubcategories.$three item=level_four name="Level_Four"} {if $level_four.avail eq "Y"} <li><a href="home.php?cat={$level_four.categoryid}">{$level_four.category|escape:'html'}</a></li> {/if} {/foreach} </ul> {/if} </li> {/if} {/foreach} </ul> {/if} </li> {/if} {/foreach} </ul> {/if} </li> {/if} {/foreach} </ul>
I've decided to use your code with my modification because I believe your HTML is probably done better. I think, it could use a few more adjustments (such as ending the <li> tagger sooner when we know there is no subcategory - you get cleaner HTML code but you have more checks ==OR== we can put it all on one line :P). You'll notice that I've also added
Code:
|escape:'html'
This will allow & be output as &amp; which is cleaner. A few more revisions and I think the core code of this is done for me, all that's left is the CSS portion.

A good future enhancement would be to create a PHP or Smarty page that generates the TPL which will contain pure HTML and no Smarty code. This will be perfect for people who have a large amount of categories and subcategories. They can generate it every once in a while and use a static flyout to improve the performance. It can dynamically generate it each time a category is modified (requires extensive changes, have to find where categories are modified) or there could be a button (which would be better as long as users don't forget to run it when they change categories). Maybe I'll do it in the future.

EDIT: Code update (7/25/2007). Removed "alt" tags since they are "proprietary to Netscape or Internet Explorer". Added the checks to see if the category is available. I'm going to ignore user's personal order for the time being. Put the symbol into a variable to allow easy modification for the future - it's a constant afterall :P
__________________
4.1.8
Reply With Quote