Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

DIY Tabbed Content Menu for Product Page

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 12-23-2004, 08:54 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

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
Reply With Quote

The following user thanks PhilJ for this useful post:
ADDISON (09-21-2012)
  #2  
Old 12-23-2004, 09:51 AM
 
hooter hooter is offline
 

X-Adept
  
Join Date: Dec 2004
Posts: 519
 

Default

Nice Phil
Thanks
__________________
Blog for X-Cart | Ebay Auction Manager
Reply With Quote
  #3  
Old 12-24-2004, 02:48 AM
  CC's Avatar 
CC CC is offline
 

eXpert
  
Join Date: Jun 2004
Posts: 349
 

Default

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!

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

Thanks again.
__________________
XC 4.2 inc (unofficial) patch release.
Reply With Quote
  #4  
Old 12-26-2004, 10:41 AM
  B00MER's Avatar 
B00MER B00MER is offline
 

X-Guru
  
Join Date: Sep 2002
Location: Keller, TX (Cart-Lab.com)
Posts: 3,165
 

Default

hrmf, looks awfully familar to my tabs mod.
__________________
Cart-Lab - 100+ Social Bookmarks for X-Cart.
Reply With Quote
  #5  
Old 12-26-2004, 03:16 PM
  CC's Avatar 
CC CC is offline
 

eXpert
  
Join Date: Jun 2004
Posts: 349
 

Default

But based on free source...

__________________
XC 4.2 inc (unofficial) patch release.
Reply With Quote
  #6  
Old 12-26-2004, 05:59 PM
 
deonya deonya is offline
 

Member
  
Join Date: Oct 2003
Posts: 18
 

Default 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
__________________
Deonya Fields
--------------------------
X-Cart Gold 4.0.4
--------------------------
http://www.pixellab.biz
Reply With Quote
  #7  
Old 12-27-2004, 06:21 AM
  dalmuti's Avatar 
dalmuti dalmuti is offline
 

eXpert
  
Join Date: Oct 2004
Location: Kansas
Posts: 343
 

Default

Wow, that looks cool.....

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

Louise
__________________
Louise

Studio 57 Designs - X-Cart Customization
Providing X-Cart Services since 2004
Hottest Blog Directory - Submit Your Blog for a Free Listing
Reply With Quote
  #8  
Old 12-27-2004, 04:29 PM
 
deonya deonya is offline
 

Member
  
Join Date: Oct 2003
Posts: 18
 

Default

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.
__________________
Deonya Fields
--------------------------
X-Cart Gold 4.0.4
--------------------------
http://www.pixellab.biz
Reply With Quote
  #9  
Old 12-27-2004, 07:22 PM
  dalmuti's Avatar 
dalmuti dalmuti is offline
 

eXpert
  
Join Date: Oct 2004
Location: Kansas
Posts: 343
 

Default

PhilJ,

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

Thanks again,

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

Studio 57 Designs - X-Cart Customization
Providing X-Cart Services since 2004
Hottest Blog Directory - Submit Your Blog for a Free Listing
Reply With Quote
  #10  
Old 12-28-2004, 04:50 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default

deonya, take out the persistence block of code and add

Code:
class="current"

to the particular tab.

Should do the trick.
__________________
xcartmods.co.uk
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 09:26 PM.

   

 
X-Cart forums © 2001-2020