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

X-Guru
  
Join Date: Nov 2002
Posts: 3,950
 

Default DIY Tabbed Content Menu for Product Page

Should work in all versions, backup files first!

The code is adapted from
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

1) Create a file called skin1/tabs.css

Code:
#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

Code:
/*********************************************** * Tab Content script- б╘ Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ 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 aobject.style.backgroundColor=document.getElementById("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 //Dynamicdrive.com 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 //Dynamicdrive.com persistence feature add-on /////////////////////////////////////////////

3) in skin1/customer/home.tpl

underneath...

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

add...

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

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

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

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

then just after...

Code:
{/capture}

(or wherever you want the tabs to appear)

add

Code:
<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.

after...

Code:
{/capture}

remove...

Code:
{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 Template | Changelog
Reply With Quote