Hi
This is the updated tabs script 08,09,06, tabbed details on products page.
This was done using the aquarelle skins, but should work in all templates.
[COLOR=Red] Step 1[/COLOR]:
First open your products_detailed.tpl in /skins/xxxxxxx/customer/products_pages/
at the top of this tpl add this line:
[COLOR=Red] Step 2[/COLOR]:
After this code near the bottom add the following:
{/capture}
[COLOR=Red]Add this
{include file="common_templates/mainbox.tpl" title=$product.product content=$smarty.capture.mainbox}
[/COLOR]```php
- {$lang.related_products}
- {$lang.discussion_title_product}
- {$lang.customers_also_bought}
- {$lang.additional_images}
- {$lang.send_to_friend}
{if $settings.Modules.related_products == 'Y'}
{include file="addons/related_products/customer_product_details.tpl"}
{/if}
{if $settings.Modules.discussion == 'Y'}
{include file="addons/discussion/discussion.tpl" object_id=$product.product_id object_type="P" title=$lang.discussion_title_product quicklink="disussion_link"}
{/if}
{if $settings.Modules.customers_also_bought == 'Y'}
{include file="addons/customers_also_bought/product_details.tpl"}
{/if}
{if $product.image_pairs}
{include file="products_pages/additional_images.tpl" product=$product show_detailed_link="Y"}
{/if}
{if $settings.Modules.send_to_friend == 'Y'}
{include file="addons/send_to_friend/send_to_friend.tpl" notes_data=$product.product}
{/if}
```[COLOR=Red] Step 3[/COLOR]:
Add this CSS to your Style.css at the bottom.
```php
/* Custom tabs */
#slidetabsmenu {
float: left;
width: 100%;
font-size: 90%;
line-height: normal;
border-bottom: none;
}
* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}
#slidetabsmenu ul{
list-style-type: none;
margin-left: 20px;
padding: 0;
}
#slidetabsmenu li{
display: inline;
margin: auto;
padding: 0;
}
#slidetabsmenu a {
float: left;
background: url('images/tab-left.gif') no-repeat left top;
margin: auto;
padding: 0 0 0 9px;
text-decoration: none;
}
#slidetabsmenu a span {
float:left;
display: block;
background: url('images/tab-right.gif') no-repeat right top;
padding: 3px 14px 3px 5px;
font-weight: 700;
color: #333;
background-color: inherit;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block!important;
}
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */
#slidetabsmenu a:hover span {
color: #000;
background-color: inherit;
}
#slidetabsmenu #current a {
background-position: 0 -125px;
}
#slidetabsmenu #current a span {
background-position: 100% -125px;
color: #000;
background-color: inherit;
}
#slidetabsmenu a:hover {
background-position: 0 -125px;
}
#slidetabsmenu a:hover span {
background-position: 100% -125px;
}
/* /Custom tabs */
```[COLOR=Red] Step 4[/COLOR]:
copy this script to a new js file, call it tabs.js and copy that file to your skins/xxxxxx/customer/
```php //** Tab Content script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: June 29th, 06
var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered?
////NO NEED TO EDIT BELOW////////////////////////
var tabcontentIDs=new Object()
function expandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for (var i=0; i
if (typeof tabcontentIDs[ulid][i]!="undefined") //if tab content within this array index exists (exception: More tabs than there are tab contents)
document.getElementById(tabcontentIDs[ulid][i]).style.display="none" //hide all tab contents
}
linkobj.parentNode.className="selected" //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content
saveselectedtabcontentid(ulid, linkobj.getAttribute("rel"))
}
function savetabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof tabcontentIDs[ulid]=="undefined") //if this array doesn't exist yet
tabcontentIDs[ulid]=new Array()
tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute
}
function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}
function getullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName("li")
for (var i=0; i
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}
function initializetabcontent(){
for (var i=0; i
setCookie(arguments[i], "")
var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x
if (ulistlink.getAttribute("rel")){
savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
ulistlink.onclick=function(){
expandcontent(this)
return false
}
if (ulist[x].className=="selected" && clickedontab=="") //if a tab is set to be selected by default
expandcontent(ulistlink) //auto load currenly selected tab content
}
} //end inner for loop
if (clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
var culistlink=getullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!="undefined") //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
else //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
}
} //end outer for loop
}
function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}
```Or use this script more updated script
```php
//** Tab Content script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: Nov 8th, 06
var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered?
////NO NEED TO EDIT BELOW////////////////////////
var tabcontentIDs=new Object()
function expandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for (var i=0; i
if (typeof tabcontentIDs[ulid][i]!="undefined") //if tab content within this array index exists (exception: More tabs than there are tab contents)
document.getElementById(tabcontentIDs[ulid][i]).style.display="none" //hide all tab contents
}
linkobj.parentNode.className="selected" //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content
saveselectedtabcontentid(ulid, linkobj.getAttribute("rel"))
}
function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
if (thetab.getAttribute("rel"))
expandcontent(thetab)
}
function savetabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof tabcontentIDs[ulid]=="undefined") //if this array doesn't exist yet
tabcontentIDs[ulid]=new Array()
tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute
}
function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}
function getullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName("li")
for (var i=0; i
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}
function initializetabcontent(){
for (var i=0; i
setCookie(arguments[i], "")
var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x
if (ulistlink.getAttribute("rel")){
savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
ulistlink.onclick=function(){
expandcontent(this)
return false
}
if (ulist[x].className=="selected" && clickedontab=="") //if a tab is set to be selected by default
expandcontent(ulistlink) //auto load currenly selected tab content
}
} //end inner for loop
if (clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
var culistlink=getullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!="undefined") //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
else //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
}
} //end outer for loop
}
function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}
``` [COLOR=Red]
Step 5[/COLOR]:
Comment this bit of code out:
```php
[COLOR=Red]{*[/COLOR]
{if $settings.Modules.customers_also_bought == 'Y' && $customers_also_bought}
• {$lang.customers_also_bought}
{/if}
{if $related_products}
• {$lang.related_products}
{/if}
{if $settings.Modules.product_reviews == 'Y'}
• {$lang.product_reviews}
{/if}
{if $settings.Modules.send_to_friend == 'Y'}
• {$lang.send_to_friend}
{/if}
[COLOR=Red]*}[/COLOR]
```[COLOR=Red]
Step 6[/COLOR]:
You can comment out {**} these lines of code below that you have already added with step 2:
{$product.full_description|default:$product.short_description}
<--------------comment these bit of code out--------------------->
```php
[COLOR=Red]{*{if $product.image_pairs}
{include file="products_pages/additional_images.tpl" product=$product show_detailed_link="Y"}
{/if}*}
{*include file="new_tabs.tpl"*}[/COLOR]
{/capture}
{include file="common_templates/mainbox.tpl" title=$product.product content=$smarty.capture.mainbox}
[COLOR=Red]{*{if $settings.Modules.customers_also_bought == 'Y'}
{include file="addons/customers_also_bought/product_details.tpl"}
{/if}*}[/COLOR]
[COLOR=Red] {*{if $settings.Modules.related_products == 'Y'}
{include file="addons/related_products/customer_product_details.tpl"}
{/if}*}[/COLOR]
[COLOR=Red] {*{if $settings.Modules.product_reviews == 'Y'}
{include file="addons/product_reviews/product_details.tpl"}
{/if}*}[/COLOR]
[COLOR=Red] {*{if $settings.Modules.send_to_friend == 'Y'}
{include file="addons/send_to_friend/send_to_friend.tpl" notes_data=$product.product}
{/if}*}[/COLOR]
```[COLOR=Red] Step 7[/COLOR]: Copy the images to your image folder, skins/xxxxxx/customer/images/
*****Make sure you make backup's of your files*******
[U][COLOR=Red]Updated for CS-Cart 1.3.4 sp3[/COLOR][/U]
That is it, have fun.
The above example has different tabs, you can also change the tab style and colours when you get a little more use to it.