View Single Post
Old 12-23-2004, 08:54 AM
PhilJ PhilJ is offline

Join Date: Nov 2002
Posts: 3,968

Default DIY Tabbed Content Menu for Product Page

Should work in all versions, backup files first!

The code is adapted from

1) Create a file called skin1/tabs.css

#tablist{ padding: 3px 0; margin-left: 0; margin-bottom: 0; margin-top: 0.1em; font: bold 12px Verdana; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: white; } #tablist li a:link, #tablist li a:visited{ color: navy; } #tablist li a.current{ background: lightyellow; } #tabcontentcontainer{ width: 400px; /* Insert Optional Height definition here to give all the content a unified height */ padding: 5px; border: 1px solid black; } .tabcontent{ display:none; }

2) Create a file called skin1/tabs.js

/*********************************************** * Tab Content script- б╘ Dynamic Drive DHTML code library ( * This notice MUST stay intact for legal use * Visit Dynamic Drive at for full source code ***********************************************/ //Set tab to intially be selected when page loads: //[which tab (1=first tab), ID of tab content to display]: var initialtab=[1, "sc1"] ////////Stop editting//////////////// function cascadedstyle(el, cssproperty, csspropertyNS){ if (el.currentStyle) return el.currentStyle[cssproperty] else if (window.getComputedStyle){ var elstyle=window.getComputedStyle(el, "") return elstyle.getPropertyValue(csspropertyNS) } } var previoustab="" function expandcontent(cid, aobject){ if (document.getElementById){ highlighttab(aobject) detectSourceindex(aobject) if (previoustab!="") document.getElementById(previoustab).style.display="none" document.getElementById(cid).style.display="block" previoustab=cid if (aobject.blur) aobject.blur() return false } else return true } function highlighttab(aobject){ if (typeof tabobjlinks=="undefined") collecttablinks() for (i=0; i<tabobjlinks.length; i++) tabobjlinks[i].style.backgroundColor=initTabcolor var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor"tabcontentcontainer").style.backgroundColor=themecolor } function collecttablinks(){ var tabobj=document.getElementById("tablist") tabobjlinks=tabobj.getElementsByTagName("A") } function detectSourceindex(aobject){ for (i=0; i<tabobjlinks.length; i++){ if (aobject==tabobjlinks[i]){ tabsourceindex=i //source index of tab bar relative to other tabs break } } } function do_onload(){ var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1 collecttablinks() initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color") initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color") if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){ var cookieparse=get_cookie(window.location.pathname).split("|") var whichtab=cookieparse[0] var tabcontentid=cookieparse[1] expandcontent(tabcontentid, tabobjlinks[whichtab]) } else expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) } if (window.addEventListener) window.addEventListener("load", do_onload, false) else if (window.attachEvent) window.attachEvent("onload", do_onload) else if (document.getElementById) window.onload=do_onload // persistence feature add-on ///////////////////////////////////////////// var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block). function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function savetabstate(){ document.cookie=window.location.pathname+"="+tabsourceindex+"|"+previoustab } window.onunload=savetabstate // persistence feature add-on /////////////////////////////////////////////

3) in skin1/customer/home.tpl


<LINK rel="stylesheet" href="{$SkinDir}/skin1.css">


<LINK rel="stylesheet" href="{$SkinDir}/tabs.css">

4) find skin1/customer/main/product.tpl

add this code to the top of the page...

<script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script>

then just after...


(or wherever you want the tabs to appear)


<a name="tabs"></a> <ul id="tablist">[*]Send to Friend[*]Detailed Images[*]Related Products[*]Recommended Products[*]Customer Reviews[/list] <DIV id="tabcontentcontainer"> <div id="sc1" class="tabcontent"> {include file="customer/main/send_to_friend.tpl" } </div> <div id="sc2" class="tabcontent"> {if $active_modules.Detailed_Product_Images ne ""} {include file="modules/Detailed_Product_Images/product_images.tpl" } {/if} </div> <div id="sc3" class="tabcontent"> {if $active_modules.Upselling_Products ne ""} {include file="modules/Upselling_Products/related_products.tpl" } {/if} </div> <div id="sc4" class="tabcontent"> {if $active_modules.Recommended_Products ne ""} {include file="modules/Recommended_Products/recommends.tpl" } {/if} </div> <div id="sc5" class="tabcontent"> {if $active_modules.Customer_Reviews ne ""} {include file="modules/Customer_Reviews/vote_reviews.tpl" } {/if} </div> </DIV>

Then remove the block of code that this replaces. ie.




{include file="customer/main/send_to_friend.tpl" } {if $active_modules.Detailed_Product_Images ne ""} {include file="modules/Detailed_Product_Images/product_images.tpl" } {/if} {if $active_modules.Upselling_Products ne ""} {include file="modules/Upselling_Products/related_products.tpl" } {/if} {if $active_modules.Recommended_Products ne ""} {include file="modules/Recommended_Products/recommends.tpl" } {/if} {if $active_modules.Customer_Reviews ne ""} {include file="modules/Customer_Reviews/vote_reviews.tpl" } {/if}

5) I have assumed you have all the above modules enabled. Add or remove tabs if neccessary, adjust the theme colours and styles in tabs.css to suit your website.

Hope you find this useful. Please share code for the good of the forum
XCARTMODS.CO.UK | reBOOT reDUX Template | reBOOT reDUX Changelog | ViViD Template (work in progress)
Reply With Quote