amazon-style tabbed menu for 4.0.x
 

Ok, this is a big moment for me....like going to the pub for your first pint with your dad.

After a while of being completely x-cart ignorant, although extremely well looked after by Shan, I have been teaching myself Smarty, PHP etc, and have now developed my first x-cart mod!

So, bear in mind I'm a complete noob and please don't laugh at my foolish mistakes.

But I hope this proves useful to some people, and acts as a starting point for the experts among you to turn this into something really cool!

I wanted to share it to say thanks to everyone who has shared code on this forum so far, you've helped me learn x-cart!

This mod is for 4.0.x
------------------------

What I wanted to create was a horizontal tab menu, based dynamically on the categories. It should know which category you're in, and display subcategories below the tabs, as well as highlighting the currently active tab. It should also be simple, and accessible to as many browsers as possible - and accessible to as many people as possible - so none of those naughty tab images like amazon itself!

Here's how to implement it:

1. Create 3 sets of tab side images.

Make them 10x20, and store them in your skin1/images folder.

Call them:
left-tab.gif
right-tab.gif
left-tab-hover.gif
right-tab-hover.gif
left-tab-active.gif
right-tab-active.gif

or you can nick these:
http://www.redshop.biz/skin1/images/left-tab.gif
http://www.redshop.biz/skin1/images/right-tab.gif
http://www.redshop.biz/skin1/images/left-tab-hover.gif
http://www.redshop.biz/skin1/images/right-tab-hover.gif
http://www.redshop.biz/skin1/images/left-tab-active.gif
http://www.redshop.biz/skin1/images/right-tab-active.gif


2. Add this CSS code to your skin1/skin1.css file:



3. Create a file called 'skin1/customer/tab_menu.tpl'



5. Create a new language label through the admin interface.

'lbl_welcome_msg' is for a short welcome message about your store, to be displayed when the user is not within a category. You can have this as an empty string.


6. Alter 'head.tpl'

Take a back up first, then, just before the first bit of code that looks like this:


Add in this:

And that should (fingers crossed) work!

You can see it in action at my development store at:

http://www.redleader.biz/xcart/home.php


Thankyou, and any improvements and ideas welcome.

EDITS MADE SINCE FIRST POST
20.01.05 15.00GMT : Added code so that the top tabs are only generated for categories with an 'order by' value of less than 10. So you can have only your main categories on the horizontal tab menu, with all your categories in your vertical categories menu.
10.01.05 15.14GMT : Added 'cursor' paramaters to the CSS as suggested by PhilJ, because IE wasn't showing correct cursor.
14.02.05 23.40GMT : Improved display of subcategories, so the first level of subcategories stay in place as you go into a product or one category further down. Generally improved code a little.
03.04.05 14.25GMT : Updated tab_menu.tpl to better manage the subcategories sub menu. It now truncates long names, and wraps onto more than one line if there are lots of subcats. I also improved the way that it creates the subcategories menu, so that it will keep the first level of subcategories displayed, however deep down into sub-sub-sub-categories you are! (Thanks to fernando for making a post elsewhere that helped me with this).

The next tasks for me on this mod are:
1. change so that the subcategories under the tabs always stay as the 1st set of subcategories of the path you are in, no matter how many levels down you are.
2. Tidy up the code a bit more.

well done, mate, that's wicked!

It's not quite perfect in that it seems to switch from square to rounded corners when you roll the mouse over but I'm sure you'll be on the case and modify the code above when you're done...

I've always wondered how to implement a menu like that. Thanks

Thanks
 

Thanks

Which browser do you use?

I've tested in Firefox 1.0 and IE6 so far, and it worked fine for me in both of those.

I'd appreciate feedback from people with other browsers, and older versions of IE - and advice on how to make this as cross browser compliant as posssible!

There is still a bit of work to make it work at its best in IE, but it works 100% in firefox.

I'm on IE6, Windows XP SP2.

Let me know as you update and I'll gladly test it out.

Regards,

Very nice Steve - great job 8)

And I am using Firefox 1.0 as well - no issues that I could see.

IE problems
 

Thanks hooter!

Donavichi...I've managed to replicate the problem you highlight on another machine. (my machine is IE6 WinXPSP2 as well though, so i don't know why thats different?!?!).
It seems that for the first page or two IE doesn't switch the tab images quickly enough...but after that it gets on fine with them.

Anyone got any ideas as to how to fix this (let alone why IE can't cope with it!)?

Thanks
Steve

Well done, thanks for sharing the code =D>

Might wanna change the link cursor style to "hand".

I always wondered how to mimic the menu at www.play.com

play.com
 

Thanks PhilJ

I've just been to have a look at play.com - they use images (and they don't even use alt tags!!) So that means their menu is inaccessible to people with sight impairments.
It also means that the menu doesn't automatically update if they add categories or change the names.

With my menu, if you increase the text size the menu grows with it and doesn't break - so it works if people need very large print on the screen.It should also work in screen readers.

My aim was to have a really accessible menu - and one that didn't rely on javascript.

It also updates automatically from the categories in the DB, so doesn't need any maintenance.

steve

Excellent, fair shout for making it more accessible. I can see this becoming a very popular mod.

Steve,

Thank you very much for sharing the mod.

Today I went to the file download area in X-cart Support and realized the 4.0.11 has been released.

So I just installed a fresh 4.0.11 version with demo data, and then followed your steps to inplement you tab mod. I only get the Home tab shows up. If I click on a category on the left-hand Categories menu, the subcategories show up under the Home tab, but the selected category still does not show up on the tab. Do I need to turn on something in the Admin area to make it work?

Or does somebady know there is a change in version 4.0.11 on defining these x-cart cat variables?

Very nice mod. I really like it.

Regards,

Jeff

Ok, I found my problem. I am not sure what .order_by presents, but if I change 10 to 50 or comment the below line out, the main categories shows up on the tab.


So, if there are too many categories, the tab will be too wide. Can put the menu into two rows?

I am still trying two problems:

1. If I want to add an additional tab to the menu, the color change will not be right. For example, add below line to the tab_menu.tpl

<TD align="center" class="tabmenuitem" nowrap><span>Test</span>
</TD>

2. Once I click on a subcategory, the red color on the text of subcategroy will be kept. I guess it can be fixed by css file, but donot know how yet.

Thanks again.

Jeff

explanation
 

Just to clarify to everyone:

1. Order_by
order_by is the numeric value that you can assign to each category from the admin area in x-cart. That value determines in which order the categories appear in the category menu.

Because you don't want there to be too many tabs in the tab menu, I've set it so that only Categories with an order_by of less than 10 will show up in the tabs - that way you can have only your most important categories on this key menu...and the rest on the side menu.

To decide which tabs appear in your tab menu, simply log in to your admin area, select 'Categories' from the menu on the left, and assign values of less than 10 to the categories you want to appear in the tab menu. They will appear in order of these numbers, so give the ones you want to be further on the left the lowest number.

This provides a simple method for you or your customers to control the tab menu without delving into code all the time.

Adding more tabs
The tabs (except the 'home' tab) are added dynamically from your category structure. You do not need to add any more code to add more tabs. Just give the categories an order_by value of less than 10.
If you really want to add more tabs to static pages or similar then you can do this in the code, but i'd advise having this on the speedbar, so that you can easily change or update them from the admin area. You can change the look and feel of the speedbar easily (see other posts in these forums), see www.redleader.biz/xcart/home.php (my development site) for an example.

[/b]

I tried to implement this, but there was a square background behind the tab that matched whatever color I used on the tab itself. How do I get rid of that? Also, can I do it like on this site? www.wholefamilymarket.com? I really like how theirs are, and that is the kind of info I wanted on my tabs, I don't really want product categories, I just want them to be for additional info.

Thanks!

Speed bar
 

Hi Danielle

It looks like they've just moved the speed bar, which is simple enough to do (search for 'speedbar' on this forum), then you can set what the tabs are from the admin backend.

Re: the square edges you're getting. it does seem to be a problem that IE doesn't load the corner images quickly enough. If you hold the mouse over a tab for a little bit, it will then load thee image, and it will be fine after that.
Anyone got any ideas for a workaround for this? Firefox handles it absolutely fine.

I have one idea which is to load the rollover images into the page on the page loading, with them just being allowed dimensions of 1x1. then IE should have them cached.
I'll try this over the weekend.
steve

different image for each category?
 

This is a nice mod, good job.

I am wondering if it is possible to add to it, what I am hopeing for is to have a unique image for each category (category icon), something that can be used in place of the text (then with the text as the alt tag)

Right now, as we are developing our store, we making a static menu across the top with a different image/rollover for each category. A dynamic category list like this would be more practicle, if we need to deactivate a category, we dont have physically remove the link,etc.

Would this be possible with this mod, or is there another mod that can accomplish this?

Thanks

Hmmm nope mine never became rounded. You could see the rounded image over top of the square image. Whatever color I changed the tab too, that changed the background behind it. The square edges did not ever disappear.

browser?
 

Hi Danielle

Could you let me know what OS, browser etc you were viewing it on please? I'll see if i can work out what was going on.

anyone else had this problem? anyone else got it working ok?

cheers
steve

Hi, I am using Windows XP, IE6.

Thanks!
Danielle

Images instead of text
 

Hi Aaron

What you want is possible.

In the code I posted above, look for:


Then within each of the two TD tags, you will see:

Change this (in both cases) to be:

Then create icons with exactly the same names as your categories, in a folder called CatIcons in the root directory. You can of course choose to use a Smarty variable to give the directory, and this would be best practice, but i use the directory above to illustrate.

You can also change what the images are called, so you could use categoryid or order_by or similar by changing the code above and the image name.

You can even tweak the code to have different images for whether a category is active or not.

cheers
steve

XP IE6
 

Hi Danielle

I have IE6 and XP, and i can't seem to recreate the problem....they're just slow to load but they do appear.

Could you try out my development site, and see if you have the same issue with the tabs there please?
http://www.redleader.biz/xcart/customer/home.php

Thanks
Steve

Very nice.
Thanks alot

I checked out your site last night and it looked great...

thanks
 

Hi Danielle

Thanks!

In that case, its worth checking the code, and the CSS have copied across ok into your installation...it doesn't sound like a browser issue.

If you check against my first post in this forum, and make sure that nothings been missed out.

cheers
steve

Steve,

i'm having a slight issue on versoin 4.0.11

tab function work great and it displays the subcategory menu.

however, when i click on a link from the subcategory, the subcategory menu disappears.

also, i'm not sure how to do step # 5

5. Create a new language label through the admin interface.

'lbl_welcome_msg' is for a short welcome message about your store, to be displayed when the user is not within a category. You can have this as an empty string.

i want to do something like this, which i believe is from your code?

http://www.b4umovie.com/films/customer/home.php?cat=381


thanks again for such great work! excellent and clear code.

=D> =D> =D> !

Updated code
 

Hi mpj

I'm afraid I can't claim any credit for the menu on the site you gave the link to - i think thats all their own work, as it funcctions differently to mine.

I've updated the code on my site, so I'll go and dig it out and update it in my first post above. That keeps the sub menu open when you go down below it - but at the moment only one more level - i'm trying to work out how to make it work however many levels you go down.

To do the step five, log into your admin interface. On the right hand side menu you'll see an option for Languages. click that, then select to edit the language you want.
Then scroll down the screen and you'll see a blank entry near the bottom. In the first box of this blank entry on the left enter 'lbl_welcome_msg', in the second box type some kind of note to rremind you what it is such as 'menu welcome message', and then in the third box enter the text you want to be displayed.
Then click add/submit/save (can't remember what the button says) and you've done it!

watch out for updated code in my first post soon. I'll put a note at the bottom of it when i've updated it.

hi Steve!

I'm trying to implement this code with your script. This would keep the current subcategory listed.

It's not my code, I got it from someone on this forum. Sorry I dont remember the original thread.

HTH.

Thanks for your kind reply.

update done
 

Hi Mpj

I've now updated the code in my first post.

Thanks for posting that bit of code. I'll have a play with it.

Steve

code works like a charm on 4.0.11

many many thanks for a great code and programmer!

=D> =D> =D>

one last thing, css related, code works fine ! :)


Here is my CSS. It works fine in Firefox but IE doesn't seem to understand the "height: 20px" atrribute, under "A href " conditions.

My CSS


My HTML

While using IE, the CSS woks for "Small Dog" and "Big Bird" but the CSS atribute " height: 20px; " would not show up for "Small Dog".

only " height: 20px;" doesn't show for "Small Dog", other attributes like hover, link, etc. are fine.

Please help.

Thanks

to answer my own question:

" <a>, is an inline element and does not take height or width dimensions. Probably what you want is {line-height: 20px;} "

:D

thanks gary!

is there a way to limit the subcategories to 10? or even better just make the subcategories become two rows if say they are over 10.

display of category can be set by


this refers the the category position list.



Steve,

Please check your PM as I have updated the code a bit, but just need to resolve one slight issue.

Thanks.

Yes I realize that is how you limit the main categories but I want to limit the subcategories to a limit of 10 or so.

anyone?

I am guessing here but you could try changing categories to subcategories


Worth a try. I might be wrong.

use



hth

mpj

I can limit the main categories. That's no problem. Just change the {if $categories[cat_num].order_by lt 12} line to whatever number you want.

My situation is that I want to limit the subcategories that show up under the main category.

Check this out. It spreads my site out huge. http://www.kcautosound.com/store/home.php?cat=2 I need to limit the subcategories down to like ten. Sure I can just create another main category to pick up but would like to keep them all in the same main category.[/url]

Hey thanks. Got it to work. Also got it to show more than ten main categories without extending the whole screen. Thanks guys.

well I spoke too soon. had it looking good with firefox but then I tested it with explorer and all the menus are in a straight line down...lol