Tabbed product details mod

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}
{include file="common_templates/mainbox.tpl" title=$product.product content=$smarty.capture.mainbox}
[COLOR=Red]Add this



[/COLOR]```php








{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 ullist[i].className="" //deselect all tabs
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 if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}

function initializetabcontent(){
for (var i=0; i if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off
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 var ulistlink=ulist[x].getElementsByTagName("a")[0]
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 ullist[i].className="" //deselect all tabs
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 if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}

function initializetabcontent(){
for (var i=0; i if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off
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 var ulistlink=ulist[x].getElementsByTagName("a")[0]
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.

tab-right.gif

tab-left.gif

Can we see an example of this MOD in action? That would be great!



-MAK

Hi advp



Try here, this is just a basic example of what can be done.

Thank you zardos done exactly what you said it works thanks



have a look www.pcparts.net.au

Hi Gregh



Thankyou Gregh, your site looks well and i am glad it helps you.



Play with the CSS side of it a little, for different coloured boxes, borders and text, it is very good.



Thanks again

Cool… thanks. I’ve used that before yeah. Just not with CS-Cart. I will definately try that MOD in my next integration.


[quote name=‘zardos’]Hi advp



Try here, this is just a basic example of what can be done.



[url]http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm[/url][/quote]

Hi,



I need a little advice on setting up this mod.


  1. Do I do a search and replace the template name with the skin I’m using? I’m assuming the answer is yes, but you know what happens when you assume.


  2. I don’t understand what needs to be done to the product_details.tpl. The instruction says to edit the file, but I’m not knowledgeable enough to know what’s supposed to be done here. Am I adding this text somewhere, if so where? Or, do I replace text? If so, could someone give me an example like “Find this section, replace with this code”.


  3. I don’t understand what the dashed lines signify. I’m guessing different sections of the file, but I’m not sure.



    ************************************************

    Nevermind. :rolleyes:



    Took a wild guess at what to do and it worked. Check out [URL=“http://www.NVone.com/Store”]http://www.NVone.com/Store[/URL]



    To answer my own questions;
  4. Nothing to change as far as the skin name is concerned. But, there was a line in the product_details.tpl part (step 4), that I had to remove. Look for this: , and delete it.


  5. This part could have been explained a little better. Find the sections in the file that are similar to each new section, separated by the dashed lines), in the guide and copy the new stuff over the old stuff.


  6. Taken care of in #2.



    Cheers,

    Mike

Guys i like this script but how can we make it actually work like. If there is not Related Products that button shouldnt come up. and I would love it if we can make it look like this. In the attachment

d_48_01.gif

How do I get rid of tabs I don’t want?, And, how can I add custom tabs?



What I need are tabs that are on a product page that I can use for different information that’s related to that specific product. I have lots of computer stuff to sell. I need to be able to have a tab for listing the general sales info, another for detailed specs, and a 3rd for other info.



Have a look at the attached example.



Cool Mod though. Thanks for posting it.



Mike

MultiTab.jpg

I’m pretty sure I’ve got this mod installed correctly, but there are tabs appearing that I don’t want. I have the options turned off in the admin cp, (Settings | Modules), but they won’t go away.



Take a look here: [url]http://nvone.com/Store/index.php?target=products&product_id=1[/url]



The only tabs I want are Detailed Description and Detailed Images. How do I get rid of the rest of them? I found the references to them in each of the files that were created and edited, but I’m reluctant to start deleting things just to see if it works or breaks the cart. Me PHP challenged. :slight_smile:



Thanks,

Mike

Hi MikeK



“There are tabs appearing that I don’t want”. Just comment them out, {xxx}


{*

  • customers also bought
  • *}



    -------------------------------


    ```php {*



    {if $settings.Modules.customers_also_bought == ‘Y’}

    {include file=“addons/customers_also_bought/product_details.tpl”}

    {/if}

    *} ```

    Hi



    Some more tabs, if you need them.



    The above code has been updated for these new tabs.^^^^^

    tabs.jpg

    [quote name=‘zardos’]Hi



    Some more tabs, if you need them.[/QUOTE]



    Hi Zardos,

    can you let me have the code how you did that tab? I like it very much



    you can send it to my inbox or post it here? thanks a lot…

    Hi kickzz



    New code above^^^^^.

    tabs images

    [quote name=‘Gregh’]Thank you zardos done exactly what you said it works thanks



    have a look www.pcparts.net.au[/QUOTE]



    How did you restrict the amount of manufacturer images that show on the bottom of the site?

    I’d like to see this either standard in the next release or a checkbox to turn the mod off or on.

    Had to delete the images i didnt wont to use.

    under manufacturers.

    [quote name=‘Maree’]I’d like to see this either standard in the next release or a checkbox to turn the mod off or on.[/QUOTE]



    Would be nice but this is more on the lines of web design and not the nuts and bolts that make CS work and prefer CS to add more features while steering away from web designs issues. Their are alot of nice little web design mods that can be implemented from dynamicdrive such as tabbed menus.

    Thanks. I see your point. guess I’m trying to avoid upgrade issues as much as possible. I figure if popular changes are coded into CSCart then it would create less problems and I’d be more inclined to upgrade at each new version rather be frightened off at the prospect of unpatchable files…