X-Cart forums - amazon-style tabbed menu for 4.0.x

Page 2 of 3

Show 40 posts from this thread on one page

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - amazon-style tabbed menu for 4.0.x (https://forum.x-cart.com/showthread.php?t=11567)

mfcopier

03-02-2005 07:11 AM

New to this

Ok this looks good but i am new to this adding files etc so far l have copied the css code but when you say create a new file do i do that by ftp or in the admin at x-cart and where do l put the file???

Step by step if possible

Garry

swordmart

03-03-2005 01:12 AM

Nice mod

Ive just tried this mod, and thx by the way.

I seem to get funny edge's to on my tabs? has any one found a cure?
Also Im new to all this and i was wondering if i want to change the siz of my tabs, can i just replace the pic with my own design and find the code and change size? where would i look?
Thanks in advance

The funny edge is the left corner is always square.

http://swordmart.co.uk/xcart/
test shop

EDIT: fixed!

swordmart

03-07-2005 08:06 AM

Quick question? or not?

hi thanks for sharing this great mod!

I was wondering if it was possable to have 2 lines of tabbed menus? as i have lots of Categories.

Would this take a lot of modding?

Cheers Jamie

mrbiggles

03-12-2005 08:42 PM

Hello

Thankyou for this very nice mod.
I think I have found a way to make the lag in the tab edges go away, I think some people are also having problems with it, I did the following and it works for me.

Please realise I do not have any knowledge of Java and I could well be missing something that is fundamentally wrong.
When it comes to code of any description I am like a parrot, I can copy and make some very basic changes, but have no underlying understanding of what it means.

This is for Tabs.js in the skin1/customer directory.

My fix did not fix :(
I got my mods mixed up, and my positive vibes made me think that I had fixed something I had not, maybe next time.

I hope this can help some people, its a very useful mod.

august

03-16-2005 01:49 PM

I think you also have your posting mixed up. There is no java in this tabs, only for the post on tabbed products detail.

rossco

03-17-2005 08:21 AM

Re: Quick question? or not?

Quote:

Originally Posted by swordmart

hi thanks for sharing this great mod!

I was wondering if it was possable to have 2 lines of tabbed menus? as i have lots of Categories.

Would this take a lot of modding?

Cheers Jamie

Must be someone who's done this because I've seen website run by people on this forum with two or more lines of tabs

steveparks

03-18-2005 02:02 PM

splitting menus onto new lines

Ok, I'll have a look at this over the weekend, and hopefully post some revised code. I think i'll also have the time-lag on the tab rollovers fixed by then.

I have ideas for both that I'm fairly confident about, so its just a case of trying them out.

(by the way i've deliberately done it to all be HTML and CSS based rather than javascript - i'm going for maximum compatibility and accessibility)

Glad you like the mod!

steveparks

04-03-2005 06:30 AM

Update

Hi I've updated the code in my first post, as follows:

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

Those of you who also wanted to wrap the main menu tabs if there were lots of them can look at how i've done it for the subcats and adapt the code for the main tabs. I won't be doing this as I think it'll look messy, and believe in having a smaller number of main tabs.

I'll also work on a way of preloading the rollover images to reduce the delay in displaying them.

steve

mrbiggles

04-03-2005 08:21 AM

Thanks Steve
I have been watching for your update, I would vote this the best free mod on the forum. Thanks very much.
Regards Adam

rossco

04-04-2005 03:59 AM

Good stuff. Been waiting patiently for this

Cheers

salsabeel

09-06-2005 06:57 PM

Does anyone have the tab images that were in the first post? I do not see them anymore.

steveparks

09-07-2005 01:22 AM

tabs

ooops, sorry - have moved server. I'll repost them soon

steve

rossco

09-07-2005 04:03 AM

Steve, Hi

Do you have an idea of what to modify to make the tabs wrap after say 7 tabs?

Thanks

Allan

steveparks

09-07-2005 03:42 PM

amazon tabs mod update

Hi all

OK I've updated the links to the tab images.

Re: having two lines of tabs, I think it would look pretty odd, but if you really really want to do it then have a look at what I've done to split the subcategories into multiple rows if there are too many:

Code:

{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}

The key section to look at within that is:

Code:

{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">

So it whenever the section is processing items 7, 14 and 21 it closes off the existing table and creates a new one. It's a table so that each row is individually centred.

You can then adapt this code to be used with the main tabs.

However I would suggest reducing the number of top level categories that display on tabs instead, but that's only my 2 cents.

steve[/b]

salsabeel

09-08-2005 01:07 AM

steveparks,

Thank you so much for the tab images. One more favor, your website listed in the first post that show the preview is no longer up. Is it possible you can show me these tabs on a functioning website or at least a screenshot? I just want to see how they look and perform before I install them.

Thank you again!

steveparks

09-08-2005 01:40 AM

example site

Hi

They are live on http://www.redshop.biz

PLEASE NOTE: THIS IS A LIVE STORE!!!! please do not place test orders, etc etc.

thanks
steve

salsabeel

09-18-2005 10:26 AM

Is there a way to display sub-sub categories with this mod?

steveparks

09-19-2005 02:16 AM

sub-sub categories

I've only had a few minutes, so this may not work first time - you might have to tweak the code a bit - but this should display the immediate subcategories of the current category/subcategory.

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].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}



{/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}

Lucent88

09-26-2005 08:41 AM

how can I have it like this...

Instead of having subcategories listed under the tab, can I have it listed on the left side menu?

So, on the left side menu (where it usually list all categories) only shows the current categories name then all subcategories under it.

And when you are on the current subcategory the link will be highlighted or shows different css.

I remember seeing this somwhere from this froum, but I can't seem to find it no more.

kevinrm

09-28-2005 07:26 PM

This is one of the best free mods I've ever encountered here - thanks for sharing it.

steveparks

09-29-2005 12:22 AM

Thanks

Thanks kevinrm - feedback much appreciated.

Lucent88 - to do what you want you can edit the current subcategories menu, you wouldn't make that part of this mod.

cheers
steve

RichieRich

09-29-2005 10:34 AM

great mod, thumbs up! Just one thing, im getting a trailing "|" after my last sub-cat... I notice on the example site this is not the case.

Eg. of my problem

Sub cat 1 | Sub Cat 2 | Sub Cat 3 |

If one sub cat is showing, there is no trailing "|" after it, please advise.

rmaskell

10-03-2005 06:24 AM

officeline.biz

I tried the mod from page 1 of this thread and got the result that appears on www.officeline.biz

In step 2 where you say "2. Add this CSS code to your skin1/skin1.css file:", do I replace everything in the skin1.css file with your code or where do I add the code in.

Great looking mod by the way, if only I could get it to work.

Robert

RichieRich

10-03-2005 06:27 AM

Add the code at the end of the current skin1.css file, it seems you have replaced it.

RichieRich

05-06-2006 06:16 AM

has anyone managed to get this working in 4.1.x? I am testing all the modifications, and this ones doesnt show up at all... :?

donavichi

05-26-2006 03:46 PM

Bump:

Is the code at the top of this thread fully working and live on any sites? Forgive me for not reading the whole thing if you've already posted links.

Example(s) much appreciated

steveparks

05-26-2006 03:52 PM

code working

Hi

I have the code working at http://www.redshop.biz (live site). That site is running 4.0.17. I haven't tested the mod on any other configuration.

cheers
steve[/url]

donavichi

05-26-2006 04:00 PM

Cheers - looks good in FF, still has that strange load in IE though - but it looks well usable.

Lucent88

06-15-2006 02:40 PM

I just realize that this only display down to 2 level deep, how can I modify it to have it 1 or 2 more levels deeper?

My Shop > Woman > Shoes > Sandle > product name

I'm only having my store showing the first tab which is (Home, men, women, and houseware), I didn't want it to show the subcategory. The reason for this is I just want my customer to know which section they are in like men or women. If they are in the section of men, I want the tab to be active. At this moment after I pass Sandle, none of the tab is active no more.

Lucent88

06-16-2006 07:21 AM

Quote:

Originally Posted by Lucent88

Let me revise that. What I really meant was that.. When I get to the 3rd level, the active tab of woman is no longer shown as active. How can I keep it active?

cheaperplanet

07-19-2006 01:30 PM

Does anyone hava an update for version 4.12?

It would be highly appreciated.

cheaperplanet

07-21-2006 03:21 PM

amazon style menu for 4.12

Anybody wants the code for xcart 4.12, let me know, i figured it out.

august

07-21-2006 03:37 PM

Can you post it?

cheaperplanet

07-21-2006 05:27 PM

Please copy over the skin1/customer/tab_menu.tpl file with the following code:

Quote:

{if $printable ne ''}
{include file="customer/tab_menu_printable.tpl"}
{else}
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<TR><TD align="left">
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
{if $cat eq 0}
<TD align="left" class="tabmenuitemon" nowrap><span>home</span>
</TD>
{else}
<TD align="left" class="tabmenuitem" nowrap><span>home</span>
</TD>
{/if}
{foreach from=$categories item=c}
{if $c.order_by lt 10}
{if $cat eq $c.categoryid || $current_category.parentid eq $c.categoryid}
<TD align="center" class="tabmenuitemon" nowrap><span>{$c.category}</span>
</TD>
{else}
<TD align="center" class="tabmenuitem" nowrap><span>{$c.category}</span>
</TD>
{/if}
{/if}
{/foreach}
</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_repl ace:"/\/.*/":""}
<TR>
<TD class="submenuitem"></TD>
{if $cat gt 0}
{assign var=subcat_count value=1}
{foreach from=$subcategories item=c key=catid}
{if $c.parentid eq $current_category_top}
{if $c.catid eq $cat || $c.catid eq $current_category.parentid}
<TD class="submenuitemon" align="center" nowrap>{$c.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>{$c.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="slash_submenu">{elseif not %sub_num.last%}|{/if}</TD>
{assign var=subcat_count value=$subcat_count+1}
{/if}
{/if}
{/foreach}
{else}
<TD class="submenumsg" align="center" valign="middle">{$lng.lbl_welcome_msg}</TD>
{/if}
<TD class="submenuitem"></TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>

Cheers

RichieRich

07-23-2006 10:08 AM

Seems to have needed another {/if} after the last {/if} in the code provided, to get this to work on my test site.

Edit: Although having said that, it only displays one home link as the parent category, no other main categories are displayed.

RichieRich

07-24-2006 02:19 AM

whoops i forgot the test site has different positions for the cats, ie. 10, 20 etc, lowered the numbers in categories.php admin page, and the cats show now, in case anyone else missed that like me. :oops:

RichieRich

07-24-2006 03:08 AM

There is a problem with the 4.1x code a few posts ago, in that the sub categories do not even appear after more than one level deep

RichieRich

08-07-2006 01:57 AM

any update on this is appreciated

proboscidian

08-10-2006 06:56 PM

Subcategories only works too!

I commented out the table with the main categories in the tabs and just left the subcategories, and it works great. Only took a few minutes to install, too. Thanks!

in action: www.mineandmillindustrialsupplyco.com

stevenhanton

09-26-2006 09:38 PM

Re: amazon-style tabbed menu for 4.0.x

Has anyone got this working with 4.13. I simple doesn't show anything below where i place the

{ include file="customer/tab_menu.tpl" }

I would really like to get this working.

Thanks

Steve
xcart 4.13 gold

All times are GMT -8. The time now is 09:39 AM.

Page 2 of 3

Show 40 posts from this thread on one page