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"> 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 */ IE, being what it is, needs a little javascript help. So create menu.js in the same directory. Code:
navHover = function() { 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"> 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); After, add: Code:
/* Makes fly-out menus show all levels properly */ Cheers |
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"> I've cleared the cache too. I suggest the following: Change Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css"> Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css" type="text/css" /> 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"> 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"> 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} 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. |
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 { Then instead of just using the '+', you would do Code:
<b id="floatingBold">+</b> 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 Using $allsubcategories and using the Smarty debug info, we have the following for menu/menu.tpl: Code:
0.05024 Here's what it finally looks like Code:
{assign var=subcatSymbol value='<b id="floatingBold">+</b>'} Code:
|escape:'html' 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 |
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 |
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)?
|
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 |
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>'} 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 */ I created a file named menu.js and placed the following code into it: Code:
navHover = function() { Just before </head> in customer/home.tpl I placed this code: Code:
<link rel="stylesheet" href="{$SkinDir}/menu/menu.css" type="text/css" /> 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); After, add: Code:
/* Makes fly-out menus show all levels properly */ OK... now you have it. Where did I go wrong? |
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"> 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 |
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. |
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?
|
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 |
Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
Quote:
Thanks, that works great for me. Mike |
Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
This worked for me too. Thanks for the update.
|
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! :)
|
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 Mike |
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!
|
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. |
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 |
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!
|
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. |
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.
|
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 |
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:
|
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); After, add: Code:
/* Makes fly-out menus show all levels properly */ Now do the same for manufacturers.php and product.php |
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.
|
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.
|
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. 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. |
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? |
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 |
Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
|
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?
|
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.
|
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... |
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? |
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. |
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. |
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 07:24 PM. |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.