X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   4 Level SEO friendly Flyout Menus - 4.1.x compatible (https://forum.x-cart.com/showthread.php?t=32668)

intel352 07-19-2007 03:58 AM

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

nevets1219 07-23-2007 12:35 PM

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.

nevets1219 07-24-2007 02:27 PM

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

DogByteMan 09-08-2007 10:14 PM

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

nevets1219 09-08-2007 11:08 PM

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)?

DogByteMan 09-08-2007 11:43 PM

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

DogByteMan 09-09-2007 05:38 AM

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?

DogByteMan 09-09-2007 08:19 AM

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

DogByteMan 09-09-2007 07:46 PM

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.

DogByteMan 09-11-2007 12:05 PM

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?

benz 01-01-2008 07:32 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
DogByteMan (and anyone else following this thread!).
I'm on Xcart 4.1.8 and had the same problem, the issue when using nevets code is that it references the $allsubcategories variable, and this isn't in the default categories.php code for this version (or it wasn't in mine at any rate!).

To add it in follow the steps outlined in this post: http://forum.x-cart.com/showthread.php?p=178560#post178560

Once you've done that Using Nevet's menu.tpl code and Intel's javascript and css it all works very nicely in 4.1.8, I've checked it on the following browser/OS combinations with no problems:
FX2.0.0.11, Vista
FX2.0.0.11, Ubuntu
FX2.0.0.11, Mac Osx
IE7.0.6000, Vista
Safari 3.0.3, Vista
Safari 3.0.4, Mac OSx


mltriebe 01-02-2008 03:41 AM

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

Originally Posted by benz
DogByteMan (and anyone else following this thread!).
I'm on Xcart 4.1.8 and had the same problem, the issue when using nevets code is that it references the $allsubcategories variable, and this isn't in the default categories.php code for this version (or it wasn't in mine at any rate!).

To add it in follow the steps outlined in this post: http://forum.x-cart.com/showthread.php?p=178560#post178560

Once you've done that Using Nevet's menu.tpl code and Intel's javascript and css it all works very nicely in 4.1.8, I've checked it on the following browser/OS combinations with no problems:
FX2.0.0.11, Vista
FX2.0.0.11, Ubuntu
FX2.0.0.11, Mac Osx
IE7.0.6000, Vista
Safari 3.0.3, Vista
Safari 3.0.4, Mac OSx




Thanks, that works great for me.

Mike

ramdial 01-03-2008 09:33 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
This worked for me too. Thanks for the update.

daz3 01-12-2008 12:41 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Hi Guys, I just tried this with 4.1.9 and it doesn't seem to work? Does anyone have a 4.1.9 version to share? Thanks! :)

mltriebe 01-12-2008 02:12 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I have it working on 4.1.9 but on the product page the menu is under the image for the product. If any knows how to fix that I would be eternally grateful.

Be sure to add this code:
Code:

in incude/categorie.php

Search for this in your code :
#
# Override subcategory_count for Admin area
#
if(!empty($subcategories) && ($current_area == 'A' || ($current_area == 'P' && $active_modules['Simple_Mode']))) {
$product_counts = func_query_hash("SELECT categoryid, COUNT(*) FROM $sql_tbl[products_categories] WHERE categoryid IN ('".implode("','", array_keys($subcategories))."') GROUP BY categoryid", "categoryid", false, true);
foreach($subcategories as $k => $v) {
$subcategories[$k]['subcategory_count'] = func_query_first_cell("SELECT COUNT(subcat.categoryid) as subc FROM $sql_tbl[categories] USE INDEX (PRIMARY) LEFT JOIN $sql_tbl[categories] as subcat ON subcat.categoryid_path LIKE CONCAT($sql_tbl[categories].categoryid_path, '/%') WHERE $sql_tbl[categories].categoryid = '$k' GROUP BY $sql_tbl[categories].categoryid");
$subcategories[$k]['product_count_global'] = $subcategories[$k]['product_count'];
$subcategories[$k]['product_count'] = isset($product_counts[$k]) ? intval($product_counts[$k]) : 0;
}
}

then add this just below the line :

//Subcategories in menu
function func_getallsubcat()
{
$raj =func_get_categories_list("", true, "all");
$raj1=$raj['all_categories'];
$ll=array();
foreach ($raj1 as $k=>$val)
{
if($val['parentid']!="0")
{
$ll[$val['parentid']][]=$val;
}
}
return $ll;
}
$smarty->assign("allsubcategories", func_getallsubcat());
//Subcategorie in menu - end


Mike

daz3 01-12-2008 03:56 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I'm actually using the Artistic Tune scheme, maybe that doesn't work with the codes. It just give me javascript errors. I really appreciate it if someone can help. Thanks!

benz 01-12-2008 07:19 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
daz, do you have a URL we can see this on?

The only javascript in the menu is used to fix deficiencies in IE, and the conditional comment should hide that from other browsers - try testing with Firefox/Safari/Opera and see if you still get js errors. If you do then it could be something other than the menu causing the problem.

JS Problems could also arise if you have accidently created duplicate element ids on the page.

daz3 01-12-2008 08:34 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Hi benz, thanks for the reply. Below is the url. I've reread the thread couple times already and I did everything I'm supposed to do. It just isn't working for me.

http://www.galaday.com

sales@webosusa.com 01-13-2008 03:28 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Can you put a picture to me so i can see how will looks like? Thans!

mltriebe 01-18-2008 10:28 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
1 Attachment(s)
Anybody know how to fix this issue, I have it working great except for this.

Thanks, Mike

Edit: FIXED I had to add the z-index for the menu in the right place.

2coolbaby 07-25-2008 01:46 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Does anyone know how I can get rid of that ugly plus sign that is before any categories that have a subcategory? Probably something simple, but I can't figure it out.

konadnailart 07-26-2008 04:54 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
goto menu.tpl

look for this line

{assign var=subcatSymbol value='<b id="floatingBold">+</b>'}

just remove the +

This mod works great on 4.1.9

Amost bought a the mod.

Thanks

rick2003 08-22-2008 10:33 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
within the product.tpl, when i review the product, the subcategory will not show any more, please help. Here is the code for menu.tpl

followed exactly the instruction in first page.

website: www.lywoo.com, please click on a product, you will see that the flyout menu is not working anymore. 4.1.9 version xcart

Quote:

{capture name=menu}
<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.ca tegory}{if $level_one_cat.subcategory_count gt 0}{/if}</a>
{if $level_one_cat.subcategory_count gt 0}
<ul id="navmenu1">
{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.ca tegory}{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_ca t.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>
{/capture}
{ include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu cellpadding=$fc_cellpadding}

autobulbs 09-16-2008 03:24 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I assume you've done this:

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);


Now do the same for manufacturers.php and product.php

JWait 09-16-2008 05:05 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Since there appears to several variations with this mod is there a recommendation for which to use with the latest version (4.1.11, and also 4.1.10) of X-cart? Right now I am using the 4-level vertical flyout menu from xcartmods.co.uk but it doesn't validate for XHTML 1.0 Transitional.

PhilJ 09-16-2008 05:56 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
@ JWait, it should validate, unless you are using an older version of the mod.

JWait 09-16-2008 07:39 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
The errors I get are...
Code:

#  Error  Line 201, Column 4: end tag for "ul" which is not finished.

</ul>



Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.


I think it has to do with the fact that the tags are nested (and are unclosed) which isn't allowed for XHTML 1.0 Transitional from what I understand. The instructions said something about using HTML 4.01 Transitional (with a loose.dtd) but that doesn't validate with the rest of the page.
The version I have probably is an older version as I wasn't even aware there is a newer one.

jhug 11-03-2008 06:37 AM

Having a strange issue with this mod
 
I have 3 root level categories that are not showing up when I use this modification in 4.1.9. All three categories have category ids in the 100s (179, 184, 194). This is the only commonality between the categories that I can see. I have tried switching the sort order thinking it might be limiting the number of root categories it was showing to 10, but that does not help. All of the subcategories do show up for the root categories that work (even those with category ids in the 100s (e.g. 172) ).

The only other similarity is that these 3 categories do not have any subcategories. However, I added fake subcategories and products into those subcategories, cleared the template cache, cleared the browser cache and still the root level categories did not appear.

Any thoughts?

stizz 11-14-2008 12:56 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Hey dudes,
We've added the 4 level flyout menus and it works fine! Thanks. Now we would like to change the vertical flyout menu into a horizontal flyout menu... We really don't have a clue where to start :). Is there anyone who knows what we should change????

Thanks in advance!
Greetings from cold rainy Holland!

Peter & Yorick

JWait 11-15-2008 07:35 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
http://www.xcartmods.co.uk/x-cart-4-level-horizontal-dropdown-category-menu-v4x-x-cart-mods-pr-6.html

amxfan 11-18-2008 12:06 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Has anyone tried this on version 4.2? Also it seems the fly outs only go in alphabetical order "levels 2-4" and not the order set in admin. Does anyone know how to change this? lastly how does one add back the category top?

balinor 11-18-2008 12:14 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
It is likely that many mods built for 4.1 will not work on 4.2. I'd also wait for a while before trying to use 4.2 for a live store, as it is still in beta and likely has MANY bugs.

MythNReality 11-25-2008 07:22 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I LOVE this mode and implemented. Unfortunately, there are two problems:
1. It added one category size) space in between first and 2nd category when view with IE.
2. It disabled my (entire) first category!

Too bad that this mod doesn't work...

amxfan 12-04-2008 08:36 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
@balinor
Thanks for the reply.
I working on a mock up using 4.1.1 but will be changing over to 4.2 when released, that is why I ask if anyone has tried this mod on that version.


I have this working fine and it does what I need it to except it seems the fly outs only go in alphabetical order "levels 2-4".

This is going to be for a shoe store so it is kinda important. When I add the categories in the admin section as follows

5 Ankle Boots
10 Knee High Boots
15 Thigh High Boots
20 Chap Boots

it displays as

Ankle Boots
Chap Boots
Knee High Boots
Thigh High boots

No matter what I set it to in the admin section it always displays the same. Has anyone else seen this and do they know of a fix?

Learner 06-14-2010 02:09 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
The mods works well.But one question if Fancy category installed and try to install it over fancy category will it create any problem?
I have a store of about 500 category and sub category and sub sub category,will all the categories, linked products remains the same after installation of this mod?

Can I able to show upto n th level of category??

Waiting for your reply...

Thanks for fine mods.

Learner 06-21-2010 04:44 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I have a store of about 500 category/sub category and sub-sub category.But initially when the page load it will take much much time,which is a real problem.How to solve this problem??

Any solution regarding this issue??

Anyone to solve??

Waiting for reply.

Thanks to all.

Learner 06-24-2010 09:31 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Any solution why the page loading is so high???


All times are GMT -8. The time now is 05:11 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.