X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   DIY Tabbed Content Menu for Product Page (https://forum.x-cart.com/showthread.php?t=11094)

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

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 :wink:

hooter 12-23-2004 09:51 AM

Nice Phil 8)
Thanks

CC 12-24-2004 02:48 AM

Beautiful Phil!

We already had this mod installed when we created our site, but we used tabs images rather than letting CSS do it. Which we might switch to the css boxes as these are much faster loading.

The fact you share the code is great.
Feels more like Open Source here every day! :lol:

I hope X-Cart haven't censored the word: Open & Source if used together. :wink:

Thanks again.

B00MER 12-26-2004 10:41 AM

hrmf, looks awfully familar to my tabs mod. 8O

CC 12-26-2004 03:16 PM

But based on free source...


deonya 12-26-2004 05:59 PM

Thanks allot
 
I was looking for somthing like that for my site I have added it looks sweet even just need to make some color changes.

By the way were do I go to change the color of the content area from that purplish color to white.

you can see it working here on my site http://pixellab.biz

dalmuti 12-27-2004 06:21 AM

Wow, that looks cool.....

Deonya, the word rateing is misspelled....just fyi...should be rating.

Louise

deonya 12-27-2004 04:29 PM

Quote:

Originally Posted by dalmuti
Wow, that looks cool.....

Deonya, the word rateing is misspelled....just fyi...should be rating.

Louise


Thanks


I was wondering if any one knows how I can make the tabs show if that tab is need or relevant to that product so if I don't have a detailed image no tab for that will show so people don;t have to waste time clicking tabs and getting no content if anyone can help me figure that out I would appreciate it.

dalmuti 12-27-2004 07:22 PM

PhilJ,

Thank you so much for the code. I implemented in my site.

Thanks again,

Louise (Dalmuti)
www.birdshopper.com/xcart/home.php

PhilJ 12-28-2004 04:50 AM

deonya, take out the persistence block of code and add

Code:

class="current"

to the particular tab.

Should do the trick.


All times are GMT -8. The time now is 12:14 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.