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.