Product Description Tabs

[Homar]

I've finally managed to integrate some CSS tabs into the view product page. It's not a quick and easy process, so I thought that I'd post my progress in case anyone wants somthing similar. The aim was to place product details (such as Description, Specifications, Reviews) inside CSS tabs - rather similar to ebuyer.com. It just seems to me like a better way of displaying information to visitors.

Firstly, I started by downloading the selection of CSS tab images made available at exploding-boy.com. If you do a Google search for 'CSS tabs', you'll find it instantly

Now, you need to edit YOUR_SKIN/styleTemplates/content/viewProd.tpl. Open this file up with a HTML editor. You'll need to add some javascript code to that file. It is important that you place the javascript where you want to place the tabs. So decide where you want the tabs to go (I suggest after the div containing the {LANG_MORE_IMAGES} tag) and paste the following code there exactly:

<script type="text/javascript">

/***********************************************

* DD Tab Menu 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 (or "" if no corresponding tab content)]:

var initialtab=[1, "sc1"]



//Turn menu into single level image tabs (completely hides 2nd level)?

var turntosingle=0 //0 for no (default), 1 for yes



//Disable hyperlinks in 1st level tab images?

var disabletablinks=0 //0 for no (default), 1 for yes





////////Stop editting////////////////



var previoustab=""



if (turntosingle==1)

document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')



function expandcontent(cid, aobject){

if (disabletablinks==1)

aobject.onclick=new Function("return false")

if (document.getElementById && turntosingle==0){

highlighttab(aobject)

if (previoustab!="")

document.getElementById(previoustab).style.display="none"

if (cid!=""){

document.getElementById(cid).style.display="block"

previoustab=cid

}

}

}



function highlighttab(aobject){

if (typeof tabobjlinks=="undefined")

collecttabs1()

for (i=0; i<tabobjlinks.length; i++)

tabobjlinks[i].className=""

aobject.className="current"

}



function collecttabs1(){

var tabobj=document.getElementById("tabs1")

tabobjlinks=tabobj.getElementsByTagName("A")

}



function do_onload(){

collecttabs1()

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



</script>

Just below the final line of the code you pasted above, I pasted the following HTML code:

<div id="tabs1">

  <ul>

	<li><a onClick="expandcontent('sc1', this)" title="Description"><span>Description</span></a></li>

		<li><a onClick="expandcontent('sc2', this)" title="Specifications"><span>Specifications</span></a></li>

	<li><a onClick="expandcontent('sc3', this)" title="Reviews"><span>Reviews</span></a></li>

  </ul>

</div>

You can see from the above code that there will be 3 tabs (Description, Specifications, and Reviews).  You should change these as you wish.  You can add or remove as many tabs as you want.  Note that each tab should contain a unique reference.  You can see that from the above code, I've used 'sc1', 'sc2' and 'sc3'.  If you're going to add additional tabs, make sure that you add another reference (e.g. sc4 etc.).



Immediately below the final line of code that you added above, paste the following HTML code:

<DIV id="tabcontentcontainer">



<div id="sc1" class="tabcontent"> 

  <div align="left">

	<p>{TXT_DESCRIPTION}</p>

	<p> </p>

  </div>

</div>



<div id="sc2" class="tabcontent"> 

  <div align="left">

	<p>Product specifications - Coming Soon!</p>

	<p> </p>

  </div>

</div>



<div id="sc3" class="tabcontent">

  <div align="left">

	<p>Product reviews - Coming Soon!</span>!</p>

	<p> </p>

  </div>

</div>



</DIV>

You should notice how in the above code, each div is assigned a reference ID.  This should match the reference that was specified earlier when creating the links (tabs) to the content.  For example, the reference to 'sc3' will display the div with the ID="sc3" in the above code.



I now went onto add the following CSS to YOUR_SKIN/styleSheets/layout.css.  Simply paste the following code below the last line of the layout.css file:

#tabcontentcontainer{

width:95%; /*width of 2nd level content*/

padding-top:10px;

}



	#tabs1 {

	  float:left;

	  width:100%;

	  font-size:93%;

	  line-height:normal;

	  border-bottom:1px solid #BCD2E6;

	  }

	#tabs1 ul {

	  margin:0;

	  padding:10px 10px 0 20px;

	  list-style:none;

	  }

	#tabs1 li {

	  display:inline;

	  margin:0;

	  padding:0;

	  }

	#tabs1 a {

	  float:left;

	  background:url("tableft1.gif") no-repeat left top;

	  margin:0;

	  padding:0 0 0 4px;

	  text-decoration:none;

	  }

	#tabs1 a span {

	  float:left;

	  display:block;

	  background:url("tabright1.gif") no-repeat right top;

	  padding:5px 15px 4px 6px;

	  color:#627EB7;

	  }

	/* Commented Backslash Hack hides rule from IE5-Mac \*/

	#tabs1 a span {float:none;}

	/* End IE5-Mac hack */

	#tabs a:hover span {

	  color:#627EB7;

	  }

	#tabs1 a:hover {

	  background-position:0% -42px;

	  cursor:pointer;

	  }

	#tabs1 a:hover span {

	  background-position:100% -42px;

	  }

	  

.tabcontent{

display:none;

}

Finally, inside your styleSheets folder, upload the 2 images from exploding-boy.com that you want to use. Ensure that you rename them to tableft1.gif and tabright1.gif if you decided not to use those 2 images for your tabs.

You can play around with the CSS and HTML code in order to get things looking the way you want. Using the example I demonstarted above, you'll end up with 3 tabs. One tab will contain your product's description. The other 2 are simply placeholders to demonstrate how you can have multiple tabs.

I actually went on from here to further modify CubeCart by creating a 'specification' field for each product in the database, adding an FCKedit area in the 'add product' section of the admin panel and assigning the field a tag in the viewProd.inc.php file. That allows me to add 'product specifications' to each product

[Guest]

This is great.

You should package this up as a mod and post it to cubecart.org and cubecartforums.org.

[Homar]

This is great.

You should package this up as a mod and post it to cubecart.org and cubecartforums.org.

Thanks! I've put it up on cubecartforums.org. I'm now in the process of uploading a demo CubeCart shop with the mods and tweaks I've made.