Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

4 Level SEO friendly Flyout Menus - 4.1.x compatible

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 07-19-2007, 03:58 AM
 
intel352 intel352 is offline
 

X-Wizard
  
Join Date: Dec 2005
Posts: 1,071
 

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

Credit for this mod goes to Alltribes, as he posted the original code in this thread:
X-Cart 4.0.x flyout menus

The code is cleaned up a bit, with an additional change to make it show all levels under 4.1.x (the original code, due to how 4.1.x operates, only displayed the categories at your current viewing level)

-----------------

This uses an unordered list formatted with CSS, so you'll have a link on your front page to all your subcategories, which should boost their pagerank up to whatever pagerank your root level categories are. Just don't expent it to work overnight.

This was tested in IE6(XP), IE7(XP), Firefox (XP&Linux), Konqueror(Linux), Opera (Linux) and Safari (OSX).

First, create the directory 'menu' in your skin1 directory.

The following code has had it's logic changed slightly from the original, to remove any redundant code & logic statements
Inside that directory create menu.tpl and put in the following:
Code:
<ul id="navmenu"> {section name=l1_cat_num loop=$categories} {if $categories[l1_cat_num].parentid eq 0 and $categories[l1_cat_num].categoryid} <li><a href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}{if $categories[l1_cat_num].subcategory_count gt 0}+{/if}</a> {if $categories[l1_cat_num].subcategory_count gt 0} <ul> {section name=l2_cat_num loop=$allcategories} {if $allcategories[l2_cat_num].parentid eq $categories[l1_cat_num].categoryid} <li><a href="home.php?cat={$allcategories[l2_cat_num].categoryid}" alt="{$allcategories[l2_cat_num].category}">{$allcategories[l2_cat_num].category}{if $allcategories[l2_cat_num].subcategory_count gt 0}+{/if}</a> {if $allcategories[l2_cat_num].subcategory_count gt 0} <ul> {section name=l3_cat_num loop=$allcategories} {if $allcategories[l3_cat_num].parentid eq $allcategories[l2_cat_num].categoryid} <li><a href="home.php?cat={$allcategories[l3_cat_num].categoryid}" alt="{$allcategories[l3_cat_num].category}">{$allcategories[l3_cat_num].category}{if $allcategories[l3_cat_num].subcategory_count gt 0}+{/if}</a> {if $allcategories[l3_cat_num].subcategory_count gt 0} <ul> {section name=l4_cat_num loop=$allcategories} {if $allcategories[l4_cat_num].parentid eq $allcategories[l3_cat_num].categoryid} <li><a href="home.php?cat={$allcategories[l4_cat_num].categoryid}" alt="{$allcategories[l4_cat_num].category}">{$allcategories[l4_cat_num].category}</a></li> {/if} {/section} </ul> {/if} </li> {/if} {/section} </ul> {/if} </li> {/if} {/section} </ul> {/if} </li> {/if} {/section} </ul>

Please note, the css styling below is styled specifically for alltribes.com, the creator of this mod. You'll need to change the styling to match your site
Then create menu.css in the same directory with the following content:
Code:
/* Root = Vertical, Secondary = Vertical */ ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 148px; /*For KHTML*/ list-style: none; } ul#navmenu:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu li { float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 2px solid #FFF; border-right-color: #AD9D8A; border-bottom-color: #AD9D8A; padding: 0 6px; display: block; background: #D2C6B2; color: #330000; font: normal 18px/22px Times New Roman, serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #AD9D8A; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #D2C6B2; color: #330000; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #AD9D8A; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #D2C6B2; color: #330000; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #AD9D8A; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #D2C6B2; color: #330000; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #AD9D8A; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 148px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; }


IE, being what it is, needs a little javascript help. So create menu.js in the same directory.

Code:
navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover);

Now edit /skin1/customer/home.tpl to add the new menu.tpl, a link to the CSS and js file. Add the following right before </head>:

Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css"> <!--[if gte IE 5.5]> <script language="JavaScript" src="{$SkinDir}/menu/menu.js" type="text/JavaScript"></script> <![endif]-->

And replace:
Code:
{include file="customer/categories.tpl"}

With:
Code:
{include file="menu/menu.tpl"}

Also, you need to make sure this exists at the top of your /skin1/customer/home.tpl:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For 4.1.x compatibility, open /home.php.
Find:
Code:
define('OFFERS_DONT_SHOW_NEW',1); require "./auth.php";

After, add:
Code:
/* Makes fly-out menus show all levels properly */ define("GET_ALL_CATEGORIES", true);


Cheers
__________________
-Jon Langevin
WARNING: Unethical developer - NOT RECOMMENDED
See details here
Reply With Quote
  #2  
Old 07-23-2007, 12:35 PM
 
nevets1219 nevets1219 is offline
 

eXpert
  
Join Date: Jun 2006
Posts: 351
 

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

I've followed all the steps but so far all I see in the source is just
Code:
<ul id="navmenu"> </ul>

I've cleared the cache too.

I suggest the following:
Change
Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css">
to
Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css" type="text/css" />
Just added the bolded part.

I'll continue playing around with the code to see what went wrong but if you have any insight please let me know.

EDIT:
I don't see the absolute need for the bolded part because every category should have a categoryid (which is what I'm assuming you are checking for). However, I would recommend a check to see if that category is available (underlined)
Code:
{if $categories[level_one_cat_num].parentid eq 0 and $categories[level_one_cat_num].categoryid and $categories[level_one_cat_num].avail eq "Y"}

SECOND EDIT:
Well, instead of using section, I changed it to foreach (along with some corresponding code changes to allow foreach to work) and it works. However, it's a bit inefficient because essentially you are looping over the $allcategories over and over to display anything with a matching parentid. Hopefully, I didn't use the counter wrong, I just incremented it once everytime the loops run. If you have a large amount of categories, it could hurt.
Code:
<ul id="navmenu"> {assign var=counter value=0} {foreach from=$categories item=level_one_cat name="Root"} {assign var=counter value=$counter+1} {if $level_one_cat.parentid eq 0 and $level_one_cat.avail eq "Y"} <li><a href="home.php?cat={$level_one_cat.categoryid}" alt="{$level_one_cat.category}">{$level_one_cat.category}{if $level_one_cat.subcategory_count gt 0}+{/if}</a> {if $level_one_cat.subcategory_count gt 0} <ul> {foreach from=$allcategories item=level_two_cat name="Level_Two"} {assign var=counter value=$counter+1} {if $level_two_cat.parentid eq $level_one_cat.categoryid} <li><a href="home.php?cat={$level_two_cat.categoryid}" alt="{$level_two_cat.category}">{$level_two_cat.category}{if $level_two_cat.subcategory_count gt 0}+{/if}</a> {if $level_two_cat.subcategory_count gt 0} <ul> {foreach from=$allcategories item=level_three_cat name="Level_Three"} {assign var=counter value=$counter+1} {if $level_three_cat.parentid eq $level_two_cat.categoryid} <li><a href="home.php?cat={$level_three_cat.categoryid}" alt="{$level_three_cat.category}">{$level_three_cat.category}{if $level_three_cat.subcategory_count gt 0}+{/if}</a> {if $level_three_cat.subcategory_count gt 0} <ul> {foreach from=$allcategories item=level_four_cat name="Level_Four"} {assign var=counter value=$counter+1} {if $level_four_cat.parentid eq $level_three_cat.categoryid} <li><a href="home.php?cat={$level_four_cat.categoryid}" alt="{$level_four_cat.category}">{$level_four_cat.category}</a></li> {/if} {/foreach} </ul> {/if} </li> {/if} {/foreach} </ul> {/if} </li> {/if} {/foreach} </ul> {/if} </li> {/if} {/foreach} </ul> COUNTER = {$counter}<br />
For me counter was 673 using this method.

Comparing with the other method I posted in the other thread (I'm still trying to figure out how and why it works because I can't seem to merge it with yours though they are almost identical)
Code:
<ul id="navmenu"> {assign var=counter value=0} {foreach from=$categories item=level_one_cat name="Root"} {assign var=counter value=$counter+1} {assign var=one value=$level_one_cat.categoryid} {if $allsubcategories.$one ne ''} {/if} <li><a href="home.php?cat={$level_one_cat.categoryid}"><b>»</b>{$level_one_cat.category|escape:'html'}</a> {else} <li><a href="home.php?cat={$level_one_cat.categoryid}">{$level_one_cat.category|escape:'html'}</a></li> {/if} {if $allsubcategories.$one ne ''} <ul> {foreach from=$allsubcategories.$one item=level_two_cat name="Level Two"} {assign var=counter value=$counter+1} {assign var=two value=$level_two_cat.categoryid} {if $allsubcategories.$two ne ''} <li><a href="home.php?cat={$level_two_cat.categoryid}"><b>»</b>{$level_two_cat.category|escape:'html'}</a> {else} <li><a href="home.php?cat={$level_two_cat.categoryid}">{$level_two_cat.category|escape:'html'}</a></li> {/if} {if $allsubcategories.$two ne ''} <ul> {foreach from=$allsubcategories.$two item=level_three_cat name="Level Three"} {assign var=counter value=$counter+1} <li><a href="home.php?cat={$level_three_cat.categoryid}">{$level_three_cat.category|escape:'html'}</a></li> {/foreach} </ul> {/if} {if $allsubcategories.$two ne ''} </li> {/if} {/foreach} </ul> {/if} {if $allsubcategories.$one ne ''} </li> {/if} {/foreach} </ul> COUNTER = {$counter}<br />
Counter in this case was only 60.

We can ignore the fact that yours run to the 4th level and the other method only runs to the 3rd level because you have
Code:
{if $xxxx.subcategory_count gt 0}
So I don't believe that is the offset.

To give you an idea of how our category structure works:
13 Root Categories.
3 Levels Deep.
47 Subcategories (basically level 2 and level 3 combined).

Will you try both ways to see if you notice any difference? You should be able to just use it directly in menu.tpl.
__________________
4.1.8
Reply With Quote
  #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
  #4  
Old 09-08-2007, 10:14 PM
  DogByteMan's Avatar 
DogByteMan DogByteMan is offline
 

X-Adept
  
Join Date: Mar 2003
Posts: 833
 

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

Without a doubt... No method in this thread seems to work for me on 4.1.8

I can get the floating, bloated, bolded, scattered, covered and smothered + sign. But there is never any flyout categories on mouseover

Did you guys forget a step or something
__________________
Dedicated Server provided by EWD Hosting
X-Cart version 4.1.12
PHP 5.3.2
MySQL server 5.0.87-community
Operation system Linux
Perl 5.008008
dogbytecomputer.com
Reply With Quote
  #5  
Old 09-08-2007, 11:08 PM
 
nevets1219 nevets1219 is offline
 

eXpert
  
Join Date: Jun 2006
Posts: 351
 

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

Are you sure you followed all the instructions? Did you try clearing your cache (both browser's and Smarty's)?
__________________
4.1.8
Reply With Quote
  #6  
Old 09-08-2007, 11:43 PM
  DogByteMan's Avatar 
DogByteMan DogByteMan is offline
 

X-Adept
  
Join Date: Mar 2003
Posts: 833
 

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

Now I didn't clear my browser cache, but I did clear templates C

Every change I would make to code or css would appear on the page fine.... There just isn't any flyout category lists
__________________
Dedicated Server provided by EWD Hosting
X-Cart version 4.1.12
PHP 5.3.2
MySQL server 5.0.87-community
Operation system Linux
Perl 5.008008
dogbytecomputer.com
Reply With Quote
  #7  
Old 09-09-2007, 05:38 AM
  DogByteMan's Avatar 
DogByteMan DogByteMan is offline
 

X-Adept
  
Join Date: Mar 2003
Posts: 833
 

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

I cleared everything but the server and the kitchen sink but still no luck... Here is what I have done

I created a folder within skin1 called menu

In skin1/menu I added the following files

I created a file named menu.tpl and placed the following code into it:
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 created a file named menu.css and placed the following code into it:
(I think alltribes site is cool, so no slight to him, but I changed this)
Code:
/* Root = Vertical, Secondary = Vertical */ ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0px none; padding: 0; width: 148px; /*For KHTML*/ list-style-type:none } ul#navmenu:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu li { float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 0px; display: block; background: #EEE; color: #000; font-size: 10px; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #000; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #000; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #000; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; } #floatingBold { float: right; margin-right: 2px; }
Note at the bottom the added #floatingBold css

I created a file named menu.js and placed the following code into it:
Code:
navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover);

Just before </head> in customer/home.tpl I placed this code:
Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css" type="text/css" /> <!--[if gte IE 5.5]> <script language="JavaScript" src="{$SkinDir}/menu/menu.js" type="text/JavaScript"></script> <![endif]-->

And I replaced also in customer/home.tpl:
Code:
{include file="customer/categories.tpl"}

With:
Code:
{include file="menu/menu.tpl"}

I also made sure the following exists at the top of /skin1/customer/home.tpl:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In /home.php I made the following changes:

Find:
Code:
define('OFFERS_DONT_SHOW_NEW',1); require "./auth.php";

After, add:
Code:
/* Makes fly-out menus show all levels properly */ define("GET_ALL_CATEGORIES", true);

OK... now you have it. Where did I go wrong?
__________________
Dedicated Server provided by EWD Hosting
X-Cart version 4.1.12
PHP 5.3.2
MySQL server 5.0.87-community
Operation system Linux
Perl 5.008008
dogbytecomputer.com
Reply With Quote
  #8  
Old 09-09-2007, 08:19 AM
  DogByteMan's Avatar 
DogByteMan DogByteMan is offline
 

X-Adept
  
Join Date: Mar 2003
Posts: 833
 

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

A snippet of my page source... Note the absence of level 2+

Code:
<tr><td><ul id="navmenu"> <li><a href="home.php?cat=506">Clearance</a> </li> <li><a href="home.php?cat=594"><b id="floatingBold">></b>Computer Components</a> <ul> </ul> </li> <li><a href="home.php?cat=438"><b id="floatingBold">></b>Alarm Clocks</a> <ul> </ul> </li> <li><a href="home.php?cat=445"><b id="floatingBold">></b>Audio / Video</a> <ul> </ul> </li> <li><a href="home.php?cat=426"><b id="floatingBold">></b>Cameras</a> <ul> </ul> </li> </ul>

I have done and redone the methods in this thread.... The best I can get is a goodlooking css menu that does not work any better than what was there
__________________
Dedicated Server provided by EWD Hosting
X-Cart version 4.1.12
PHP 5.3.2
MySQL server 5.0.87-community
Operation system Linux
Perl 5.008008
dogbytecomputer.com
Reply With Quote
  #9  
Old 09-09-2007, 07:46 PM
  DogByteMan's Avatar 
DogByteMan DogByteMan is offline
 

X-Adept
  
Join Date: Mar 2003
Posts: 833
 

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

OK I tried this entire thread again from scratch just to make sure I'm not nuts.

If I use the code in intel352's post (post #1 of this thread). I don't even get a menu to show at all. At least with nevets1219's code I get a dang good looking category menu. But alas, there are still no flyout subcats to be seen. My source is still as it was in my earlier post.

Maybe nevets1219 will look at the code I posted and find an obvious error when he signs on next.
__________________
Dedicated Server provided by EWD Hosting
X-Cart version 4.1.12
PHP 5.3.2
MySQL server 5.0.87-community
Operation system Linux
Perl 5.008008
dogbytecomputer.com
Reply With Quote
  #10  
Old 09-11-2007, 12:05 PM
  DogByteMan's Avatar 
DogByteMan DogByteMan is offline
 

X-Adept
  
Join Date: Mar 2003
Posts: 833
 

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

Since I can't get an answer back on this one.... Does anyone know which is the best pay for solution for 250+ categories? Is it the new X-Cart fancycats 4.1.x version?
__________________
Dedicated Server provided by EWD Hosting
X-Cart version 4.1.12
PHP 5.3.2
MySQL server 5.0.87-community
Operation system Linux
Perl 5.008008
dogbytecomputer.com
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 02:52 PM.

   

 
X-Cart forums © 2001-2020