PhilJ |
12-23-2004 08:54 AM |
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...
(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...
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 :wink:
|