X-Cart forums - Menu with Tabs for Product page

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

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

- - Menu with Tabs for Product page (https://forum.x-cart.com/showthread.php?t=33942)

Menu with Tabs for Product page

Here's a tabbed menu for the xcart v4.1.8 product page.

Details regarding this tabbed menu can be found at: http://www.barelyfitz.com/projects/tabber/

Copy the tabber.css file to your /skin1/ directory

Code:

 

/* $Id: tabber.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------

  REQUIRED to hide the non-active tab content.

  But do not hide them in the print stylesheet!

  --------------------------------------------------*/

.tabberlive .tabbertabhide {

 display:none;

}

/*--------------------------------------------------

  .tabber = before the tabber interface is set up

  .tabberlive = after the tabber interface is set up

  --------------------------------------------------*/

.tabber {

}

.tabberlive {

 margin-top:1em;

}

/*--------------------------------------------------

  ul.tabbernav = the tab navigation list

  li.tabberactive = the active tab

  --------------------------------------------------*/

ul.tabbernav

{

 margin:0;

 padding: 3px 0;

 border-bottom: 1px solid #778;

 font: bold 12px Verdana, sans-serif;

}

ul.tabbernav li

{

 list-style: none;

 margin: 0;

 display: inline;

}

ul.tabbernav li a

{

 padding: 3px 0.5em;

 margin-left: 3px;

 border: 1px solid #778;

 border-bottom: none;

 background: #DDE;

 text-decoration: none;

}

ul.tabbernav li a:link { color: #448; }

ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover

{

 color: #000;

 background: #AAE;

 border-color: #227;

}

ul.tabbernav li.tabberactive a

{

 background-color: #fff;

 border-bottom: 1px solid #fff;

}

ul.tabbernav li.tabberactive a:hover

{

 color: #000;

 background: white;

 border-bottom: 1px solid white;

}

/*--------------------------------------------------

  .tabbertab = the tab content

  Add style only after the tabber interface is set up (.tabberlive)

  --------------------------------------------------*/

.tabberlive .tabbertab {

 padding:5px;

 border:1px solid #aaa;

 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed

    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a

    scrollbar when necessary */

 /* overflow:auto; */

}

/* If desired, hide the heading since a heading is provided by the tab */

.tabberlive .tabbertab h2 {

 display:none;

}

.tabberlive .tabbertab h3 {

 display:none;

}

/* Example of using an ID to set different styles for the tabs on the page */

.tabberlive#tab1 {

}

.tabberlive#tab2 {

}

.tabberlive#tab2 .tabbertab {

 height:200px;

 overflow:auto;

}

Now copy the tabber-minimized.js file to your /skin1/ directory

Code:

 

/* Copyright (c) 2006 Patrick Fitzgerald */

function tabberObj(argsObj)

{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}

this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}

tabberObj.prototype.init=function(e)

{var

childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}

if(e.id){this.id=e.id;}

this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}

DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}

if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}

break;}}}

if(!t.headingText){t.headingText=i+1;}

DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}

DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}

e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}

return this;};tabberObj.prototype.navClick=function(event)

{var

rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}

self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}

rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}

self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()

{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)

{var div;if(!this.tabs[tabberIndex]){return false;}

div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}

this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)

{var div;if(!this.tabs[tabberIndex]){return false;}

this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}

return this;};tabberObj.prototype.navSetActive=function(tabberIndex)

{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)

{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)

{var

tempObj,divs,i;if(!tabberArgs){tabberArgs={};}

tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}

return this;}

function tabberAutomaticOnLoad(tabberArgs)

{var oldOnLoad;if(!tabberArgs){tabberArgs={};}

oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}

if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}

Add to the /skin1/customer/home.tpl file the following lines of code under the <head> tag:

Code:

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

Open the /skin1/customer/main/product.tpl file and after the line:

Code:

 

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}

add the following code:

Code:

 

<div class="tabber">

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Product Magnifier</h2>

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

</div>

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>Send to Friend</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Detailed Images</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }

</div>

{/if}

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab">

<h2>Recommended Products</h2>

{include file="modules/Recommended_Products/recommends.tpl" }

</div>

{/if}

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab">

<h2>Reviews</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

</div>

{/if}

</div>

Continued on next post....

Menu with Tabs for Product page (continued)

...continued from previous post.

And delete the following code from the same /skin1/customer/main/product.tpl file:

Code:

 

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<p />

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<p />

{include file="customer/main/send_to_friend.tpl" }

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<p />

{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

{if $active_modules.Upselling_Products ne ""}

<p />

{include file="modules/Upselling_Products/related_products.tpl" }

{/if}

{if $active_modules.Recommended_Products ne ""}

<p />

{include file="modules/Recommended_Products/recommends.tpl" }

{/if}

{if $active_modules.Customer_Reviews ne ""}

<p />

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

{/if}

And in order to notify the customer if there are no detailed product images or no related products when they click on the tab, just modify the two modules below.

Open the skin1/modules/Detailed_Product_Images/product_images.tpl file:

and add the following code before the very last {/if} statement:

Code:

 

{else}

{capture name=dialog} 

No detailed images.

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

And do the same with skin1/modules/Upselling_Products/related_products.tpl

and add the following code before the very last {/if} statement:

Code:

 

{else}

{capture name=dialog} 

No related products.

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"}

That's it.

Please note that all changes were done on files that had no previous modifications and these changes were also done on xcart v4.1.8
I've attached all the necessary files for those who don't like to read and modify. Also included is the detailed javascript file for those who like to tinker with the code.

Have fun.

- MoonDog -

Re: Menu with Tabs for Product page

Another thing,
For those who have a lot of tabs on their product page, you can also nest the tabs.
For nested tabs just place the nested tab(s) between the<div class="tabber">
and the
</div> code

Just replace the code from the first post with the code below to see how nested tabs work.
I also placed the 'Related Products' as the default tab.

Code:

 

<div class="tabber">

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>Send to Friend</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

 

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Detailed Images</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }

</div>

{/if}

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab tabbertabdefault">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

 

<div class="tabbertab">

<h2> More... </h2>

<div class="tabber">

 

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab">

<h2>Recommended Products</h2>

{include file="modules/Recommended_Products/recommends.tpl" }

</div>

{/if}

 

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab">

<h2>Reviews</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

 

</div>

{/if}

 

</div>

</div>

</div>

If you want a certain tab to be open when you go to the product page, then just place 'tabbertabdefault' to the code.
For example find the tab you want open and edit the code to:
<div class="tabbertab tabbertabdefault">
You can see above code how I placed the default tab on the 'Related Products' tab.

That's it.

Remember, you can get more information here: http://www.barelyfitz.com/projects/tabber/

-MoonDog-

Re: Menu with Tabs for Product page

Thank you for this, very useful :)

Re: Menu with Tabs for Product page

Now, are these tabs customized per product or just overall? Do you have an example used on your site?

Re: Menu with Tabs for Product page

Hi Mike,

This tabbed menu is just customized for the product page and not per product. What this tabbed menu does, is it just condenses the product page modules into one convenient menu location. This way the customer just clicks on a tab and doesn't have to scroll all the way down the page to view the other information.

Unfortunately, I don't have a live site yet, but I've attached a couple of images to show what it looks like. Because I have a lot of tabs, I decided to nest two tabs inside a folder called 'More...'. This way it doesn't clutter the layout. The first image is what the menu looks like when you open the product page and the second image is after you click on the 'More...' tab, to see the nested tabs.

Hope this helps.

- MoonDog -

Re: Menu with Tabs for Product page

Very nice mod, thank you for sharing this.

Can you tell me how I can make a detailed discription tab? Everything in the detailed discription area in product modify should go in this tab.

Re: Menu with Tabs for Product page

For Hugo and those that installed this menu, here is the way to create a full detailed description tab.

What this mod does:
If you have a full detailed description for your product, then it automatically creates a link that says 'See full description...' when you open the product page . By clicking on this link, the page jumps to the tabbed menu and it opens the 'Full Description' tab.

Here's how to modify your code to do this:

Open the skin1/tabber-minimized.js and insert the following code to the end of the file:

Code:

function tabShow(i){

document.getElementById('mytabber').tabber.tabShow(i);

}

Now open the file skin1/customer/main/product.tpl and find this line of code:

Code:

 

<td>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}</td>

and change it to:

Code:

 

<td>{if $product.fulldescr ne ""}{$product.descr}<br><br><a href="#mytabber" onClick="javascript:tabShow(3)">See full description...</a>{else}{$product.descr}{/if}</td>

Note!!! - Change the number 3 in the tabShow(3) code to the number of the tab you want to open.
Please note that the first tab is 0 and the second tab is 1 etc.
For instance, if your 'Full Description' tab is the third from the left than change the code to tabShow(2)
Now find the line:

Code:

<div class="tabber">

and change it to:

Code:

 

<div class="tabber" id="mytabber">

This will allow the page to jump to the menu when clicking on the 'See full description...' link.

We now need to create a 'Full Description' tab by copying the following code and inserting it in any tab location you want.

Code:

 

<div class="tabbertab" id="description">

<h2>Full Description</h2>

{include file="customer/main/full_description.tpl" }

</div>

For instance, in my case I added it after the 'Related Products' tab; so I inserted the code right after this code:

Code:

 

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

Now create a full_description.tpl file by using the following code:

Code:

 

{* $Id: full_description.tpl v1.0 2007/09/30 *}

{if $product.fulldescr ne ""}

{capture name=dialog}

{$product.fulldescr}

{/capture}

{include file="dialog.tpl" title=$lng.lbl_full_description content=$smarty.capture.dialog extra='width="100%"'}

{else}

{capture name=dialog} 

No full description

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_full_description content=$smarty.capture.dialog extra="width=100%"}

{/if}

and saving this file to the skin1/customer/main folder

Make sure that you have full description content for the product in order to see this work in action. And also add a lbl_full_description language variable in the admin area named 'Full Description'.

I've attached the product.tpl for you to use.

That's it.

- MoonDog -

Re: Menu with Tabs for Product page

To limit overhead, I wouldn't do the css and javascript include on every page, instead use this code:

Code:

{if $main eq "product"}

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

{/if}

Re: Menu with Tabs for Product page

Quote:

Originally Posted by MoonDog

For Hugo and those that installed this menu, here is the way to create a full detailed description tab.

What this mod does:...

Moondog thank you very very much! implementation was a 5 minute job and it works like a charm.:lol: