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

amazon-style tabbed menu for 4.0.x

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 01-19-2005, 02:03 PM
 
steveparks steveparks is offline
 

Advanced Member
  
Join Date: Jan 2003
Location: UK
Posts: 87
 

Default 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:

Code:
.tabmenuitem { font-size: 1em; text-transform: lowercase; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.5em; height: 1.5em; cursor: hand; } .tabmenuitemon { font-size: 1em; text-transform: lowercase; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.5em; height: 1.5em; cursor: pointer; } .tabmenuitem a, .tabmenuitem a:link, .tabmenuitem a:visited { color: #000000; background: #CCCCCC url("images/left-tab.gif") left top no-repeat; height: 1.5em; text-decoration: none; padding-left: 10px; line-height: 1.5em; } .tabmenuitemon a, .tabmenuitemon a:link, .tabmenuitemon a:visited { color: #e32c2c; background: #ECEFF3 url("images/left-tab-active.gif") left top no-repeat; height: 1.5em; text-decoration: none; padding-left: 10px; line-height: 1.5em; } .tabmenuitem a span, .tabmenuitem a:link span, .tabmenuitem a:visited span { background: url("images/right-tab.gif") right top no-repeat; height: 1.5em; line-height: 1.5em; padding-right: 10px } .tabmenuitemon a span, .tabmenuitemon a:link span, .tabmenuitemon a:visited span { background: url("images/right-tab-active.gif") right top no-repeat; height: 1.5em; line-height: 1.5em; padding-right: 10px } .tabmenuitem a, .tabmenuitem a span, .tabmenuitem a:link span, .tabmenuitem a:visited span { display: block; float: left } .tabmenuitemon a, .tabmenuitemon a span, .tabmenuitemon a:link span, .tabmenuitemon a:visited span { display: block; float: left } /* Commented backslash hack hides rule from IE5-Mac \*/ .tabmenuitem a, .tabmenuitem a span, .tabmenuitem a:link span, .tabmenuitem a:visited span { float: none } .tabmenuitemon a, .tabmenuitemon a span, .tabmenuitemon a:link span, .tabmenuitemon a:visited span { float: none } /* End IE5-Mac hack */ .tabmenuitem a:hover { color: #ECEFF3; background: #e32c2c url("images/left-tab-hover.gif") left top no-repeat; height: 1.5em; text-decoration: none; padding-left: 10px } .tabmenuitemon a:hover { height: 1.5em; text-decoration: none; padding-left: 10px } .tabmenuitem a:hover span { background: url("images/right-tab-hover.gif") right top no-repeat; height: 1.5em; padding-right: 10px } .tabmenuitemon a:hover span { height: 1.5em; padding-right: 10px } .submenu { BACKGROUND-COLOR: #ECEFF3; } .submenuitem, .submenuitem a, .submenuitem a:link, .submenuitem a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.9em; text-transform: lowercase; color: #000000; } .submenuitemon, .submenuitemon a, .submenuitemon a:link, .submenuitemon a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.9em; text-transform: lowercase; color: #e32c2c; } .submenuitem a:hover { color: #e32c2c; } .submenuitemon a:hover { color: #e32c2c; text-decoration: none; } .submenumsg { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; font-style: normal; text-transform: lowercase; color: #000000; letter-spacing: 0.04em; }


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

Code:
{if $printable ne ''} {include file="customer/tab_menu_printable.tpl"} {else} <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> <TR><TD align="center"> <TABLE border="0" cellpadding="0" cellspacing="0"> <TR> {if $cat eq 0} <TD align="center" class="tabmenuitemon" nowrap><span>home</span> </TD> {else} <TD align="center" class="tabmenuitem" nowrap><span>home</span> </TD> {/if} {section name=cat_num loop=$categories} {if $categories[cat_num].order_by lt 10} {if $cat eq $categories[cat_num].categoryid || $current_category.parentid eq $categories[cat_num].categoryid} <TD align="center" class="tabmenuitemon" nowrap><span>{$categories[cat_num].category}</span> </TD> {else} <TD align="center" class="tabmenuitem" nowrap><span>{$categories[cat_num].category}</span> </TD> {/if} {/if} {/section} </TR> </TABLE> </TD></TR> <TR><TD class="submenu" align="center" valign="top"> <TABLE border="0" cellpadding="0" cellspacing="0"> {assign var=current_category_top value=$current_category.categoryid_path|regex_replace:"/\/.*/":""} <TR> <TD class="submenuitem"></TD> {if $cat gt 0} {assign var=subcat_count value=1} {section name=sub_num loop=$allcategories} {if $allcategories[sub_num].parentid eq $current_category_top} {if $allcategories[sub_num].categoryid eq $cat || $allcategories[sub_num].categoryid eq $current_category.parentid} <TD class="submenuitemon" align="center" nowrap>{$allcategories[sub_num].category|truncate:20:"...":true}{if $subcat_count eq 7 || $subcat_count eq 14 || $subcat_count eq 21}</TD></TR></TABLE><TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD class="submenuitem">{elseif not %sub_num.last%}<FONT class="submenuitem">|</FONT>{/if}</TD> {assign var=subcat_count value=$subcat_count+1} {else} <TD class="submenuitem" align="center" nowrap>{$allcategories[sub_num].category|truncate:20:"...":true}{if $subcat_count eq 7 || $subcat_count eq 14 || $subcat_count eq 21}</TD></TR></TABLE><TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD class="submenuitem">{elseif not %sub_num.last%}|{/if}</TD> {assign var=subcat_count value=$subcat_count+1} {/if} {/if} {/section} {else} <TD class="submenumsg" align="center" valign="middle">{$lng.lbl_welcome_msg}</TD> {/if} <TD class="submenuitem"></TD> </TR> </TABLE> </TD></TR> </TABLE> {/if}


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:

Code:
<TR> <TD colspan="2" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</TD> </TR>

Add in this:
Code:
<TR> <TD colspan="2" align="center"> { include file="customer/tab_menu.tpl" } </TD> </TR>

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.
__________________
--------------
RHEL3/Apache2/PHP4/MySQL4/Plesk7.5.3
X-Cart 4.0.16 - Live
X-Affiliate
X-AOM
ez-checkout
ez-upsell
--------------
Reply With Quote
  #2  
Old 01-19-2005, 03:16 PM
 
donavichi donavichi is offline
 

X-Adept
  
Join Date: Apr 2004
Location: United Kingdom
Posts: 697
 

Default

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
__________________
Best regards,

Donavichi.
- - -

Website Copywriting || Web Design || FAQs || Home & Garden Blog
Reply With Quote
  #3  
Old 01-19-2005, 03:46 PM
 
steveparks steveparks is offline
 

Advanced Member
  
Join Date: Jan 2003
Location: UK
Posts: 87
 

Default 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.
__________________
--------------
RHEL3/Apache2/PHP4/MySQL4/Plesk7.5.3
X-Cart 4.0.16 - Live
X-Affiliate
X-AOM
ez-checkout
ez-upsell
--------------
Reply With Quote
  #4  
Old 01-19-2005, 05:15 PM
 
donavichi donavichi is offline
 

X-Adept
  
Join Date: Apr 2004
Location: United Kingdom
Posts: 697
 

Default

I'm on IE6, Windows XP SP2.

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

Regards,
__________________
Best regards,

Donavichi.
- - -

Website Copywriting || Web Design || FAQs || Home & Garden Blog
Reply With Quote
  #5  
Old 01-19-2005, 06:31 PM
 
hooter hooter is offline
 

X-Adept
  
Join Date: Dec 2004
Posts: 519
 

Default

Very nice Steve - great job

And I am using Firefox 1.0 as well - no issues that I could see.
__________________
Blog for X-Cart | Ebay Auction Manager
Reply With Quote
  #6  
Old 01-20-2005, 12:13 AM
 
steveparks steveparks is offline
 

Advanced Member
  
Join Date: Jan 2003
Location: UK
Posts: 87
 

Default 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
__________________
--------------
RHEL3/Apache2/PHP4/MySQL4/Plesk7.5.3
X-Cart 4.0.16 - Live
X-Affiliate
X-AOM
ez-checkout
ez-upsell
--------------
Reply With Quote
  #7  
Old 01-20-2005, 05:46 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default

Well done, thanks for sharing the code

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

I always wondered how to mimic the menu at www.play.com
__________________
xcartmods.co.uk
Reply With Quote
  #8  
Old 01-20-2005, 05:56 AM
 
steveparks steveparks is offline
 

Advanced Member
  
Join Date: Jan 2003
Location: UK
Posts: 87
 

Default 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
__________________
--------------
RHEL3/Apache2/PHP4/MySQL4/Plesk7.5.3
X-Cart 4.0.16 - Live
X-Affiliate
X-AOM
ez-checkout
ez-upsell
--------------
Reply With Quote
  #9  
Old 01-21-2005, 03:00 PM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default

Excellent, fair shout for making it more accessible. I can see this becoming a very popular mod.
__________________
xcartmods.co.uk
Reply With Quote
  #10  
Old 01-22-2005, 01:44 PM
 
jdedba jdedba is offline
 

Advanced Member
  
Join Date: Dec 2004
Posts: 96
 

Default

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
__________________
version 4.1.1
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:21 AM.

   

 
X-Cart forums © 2001-2020