X-Cart forums - DIY Tabbed Content Menu for Product Page

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)

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:

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.

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

But based on free source...

Quote:

The code is adapted from
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

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

Wow, that looks cool.....

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

Louise

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.

PhilJ,

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

Thanks again,

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

deonya, take out the persistence block of code and add

Code:

class="current"

to the particular tab.

Should do the trick.

Wow, thanks for the hard work in setting this up. I hope that the source is truly coming from the open and not just modified from someone like Boomer.

I am all for open source and it really adds to the value of xcart to be able to modify the source to your liking.

I was about to buy a javascript menu from apycom for about $30 but then found an open source one that was much better www.ricom.co.uk

Quote:

Originally Posted by PhilJ

deonya, take out the persistence block of code and add

Code:

class="current"

to the particular tab.

Should do the trick.

I tried doing this but it's not what I am looking for I was thinking of somthing more like an if statment some of my products will have detailed images and some wont some have recamended products and some don't I wanted to try and come up with an if statment that will show tabs only if it's need by that product.

Quote:

Originally Posted by PhilJ

deonya, take out the persistence block of code and add

Code:

class="current"

to the particular tab.

Should do the trick.

:arrow: http://www.cart-lab.com/Tabbed_Product_Menu-p-56.html

Is setup to only display tabs with content relative, if conditions. There is also an extra field by default that can easily be setup to display any other extra fields without hassle. :wink:

Quote:

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.

Put simply, if the content does not exist, then don't display the tab(s).

Solution...

Wrap an IF statement around the individual tab code.

For example with upselling products...

Code:

{if $active_modules.Upselling_Products eq ""}[*]Related Products 

{else}

{/if}

Recommended products...

Code:

{if $active_modules.Recommended_Products eq ""}[*]Recommended Products

{else}

{/if}

etc.

Detailed Images is slightly different...

Code:

{if $images eq ""}[*]Detailed Images

{else}

{/if}

So is Customer Reviews...

Code:

{if $reviews eq ""}[*]Customer Reviews

{else}

{/if}

Heres What I tried

Code:



<TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><tr>

<td width="170" valign="top" nowrap align="right">

<a name="tabs"></a>

<ul id="tablist"> 

{if $images eq ""} [*]Detailed Images 

{else} {/if}[*]



Send to Friend 

{if $active_modules.Upselling_Products eq ""} [*]



Related Products

{else} {/if}

{if $active_modules.Recommended_Products eq ""} [*]



Recommended Items 

{else} {/if}

{if $reviews eq ""} [*]



Customer Ratings 

{else} {/if}[/list]</td>

<td width="10"></td>        

<td bgcolor="#00aeef" width="1"></td>

<td width="10"></td>

<td valign="top">

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

</td></tr></table>

Now only the Send To friend & Customer Review will show up. There could be a cople resonse for this on my part one I have changed the way the tabs look see what I mean http://www.pixellab.biz/product.php?productid=16141&cat=1&page=1 Next is I have moded a few things in my cart but that might not be the reason still what do you think after looking over my code.

The other tabs don't appear, probably because you don't have a detailed image or upselling product, plus you may have not enabled the recommended products module.

Otherwise the code looks fine.

I think the reason why my detailed images are not showing on the products that have them is becuse I have that moded here's a mod I have on my images I am quoting it from another post I made.

Quote:

I have see a few people on the forum looking for a way to have a different image view from the thumbnail upload. Well I have something that might help them accomplish this.

In your <xcart_dir>/skin1/custom/main/product.tpl file, find the following part of code:

Code:
<TD valign="top" align="left" rowspan="2" width="100">
{include file="product_thumbnail.tpl" productid=$product.productid
image_x=$product.image_x image_y=$product.image_y product=$product.product
tmbn_url=$product.tmbn_url id="product_thumbnail"}
</TD>

and replace it with this:
Code:
<TD valign="top" align="left" rowspan="2">
{if $images.0.avail eq "Y"}
{if $images.0.tmbn_url}
[img]{$images.0.tmbn_url}[/img]
{else}
[img]{$xcart_web_dir}/product_image.php?imageid={$images.0.imageid}[/img]
{/if}
{else}
{include file="product_thumbnail.tpl" productid=$product.productid
image_x=$config.Appearance.thumbnail_width product=$product.product
tmbn_url=$product.tmbn_url id="product_thumbnail"}
{/if}
</TD>

This mod will make it so that on the product preview page instead of displaying the thumbnail again it will display the detailed image you upload. This will also create a small problem, your detailed image will be displayed on the page twice. To stop that from happening do this.

In your <xcart_dir>/skin1/modules/Detailed_Product_Images/product_images.tpl file replace the following:
Code:
{section name=image loop=$images}

with this
Code:
{section name=image loop=$images start=1}

Witch will make it skip over the first added detailed image and only display images added after the first.

If you decide not to upload a second detailed image the detailed image box will still appear with no content and you fix that by doing this.
In your <xcart_dir>/skin1/modules/Detailed_Product_Images/product_images.tpl file replace the following:
Code:
{if $images ne ""}

with this
Code:
{if $images ne "" and count($images) 1}

If done correctly when uploading a new product you can upload the thumbnail, then upload a detailed image to be displayed is the products main view, and you still have the ability to add more detailed images that will appear in the correct place.

So everything is correct but I think this mod is preventing my detailed images from showing up

It isn't working for me either, deonya... :(
And i don't use a mod for the Detailed Images.

Same thing happens with Recommended Products - they won't show,
untill i remove the IF statement for it.

Anyone know how to solve this?

Furthermore; i like to add a extra tab where i can put a full
description/overview for the product.
Anyone who can point me in the right direction?

Many thanks in advance!!

Yup same problem here. I had to lose the IF statements also in order to get the other tabs to show.

Quote:

Furthermore; i like to add a extra tab where i can put a full
description/overview for the product.
Anyone who can point me in the right direction?

I just did this last night. I'm a newb at X-Cart but it worked for me. If there's a better way please post it.

In product.tpl,

AFTER

Code:

<a name="tabs"></a> 

<ul id="tablist">

ADD

Code:

[*]Product Overview

AFTER:

Code:

{/if}

{if $reviews eq ""}[*]Customer Reviews 

{else} 

{/if} 

[/list]<DIV id="tabcontentcontainer">

ADD:

Code:

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

{include file="customer/main/overview.tpl" } 

</div>

Now create a new file called "overview.tpl" and save the following into skin1/customer/main/overview.tpl.

Code:

{* $Id: overview.tpl,v 1.6.2.2 2004/12/10 13:14:52 max Exp $ *}

<table width="100%" border="0">

  <tr>

    <td><SPAN class=>

{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}

</SPAN></td>

    <td></td>

  </tr>

</table>

You can edit this file to change the look of the box and add product titles, images whatever. You can also edit the tabs.js file and change it so the overview tab shows automatically on the page.

Hope that helps.

Thanks alot soleaq - that works great!!
Not bad for a "newb"... :wink:

Any ideas yet how to deal with the IF statements?
I think it's very important that the tabs without content
don't show so that customers don't click on empty tabs.

Thanks again for sharing your code!

PhilJ,

I have a question for you or anyone sle posting in this thread.

I am trying to implement a copy of Boomers Product Enquiry and his send to friend add ons into this script.

Boomer has these scripts set up in stages so that the fiorst stage is the base email setting, the second would show what the email will appear as and the third is letting customer know if the email was sent successfully.

For some reason, when I add these into the tab script, it jumps straight to the sent notification of the add on as if it was already completed with info added etc.

Any idea what I may be doing wrong here?

I love the tab script, it works great. Problem is after I add the two email scripts.

I know this can be done, I have seen it in action, just don't know the scripts well enough to know what I am missing here.

Thanks to all that may help. 8O

markwhoo, I wouldn't advise using those mods within the tabs mod. The 'send to friend' in v4 should work fine in the tabs. I can help you with the 'enquire about this product'. PM if interested.

Quote:

Originally Posted by Jerrad

Thanks for the kind words! Thanks PhilJ for the original code!

Just a note, someone sent me a message asking how to turn the "persistence" on the tabs off.

In tabs.js, find the line below and change "true" to "false"

Code:

//Dynamicdrive.com persistence feature add-on 

///////////////////////////////////////////// 



var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).

This will turn persistence off, so when your customer hits a new product page, the default tab you selected at the top of the tabs.js file will show.

I have it set so the "Overview" tab always shows first.

This might sound silly, but will it hurt search engine ranking because the recommended product list for example is hidden? Thanks.

Quote:

Originally Posted by bluecat

This might sound silly, but will it hurt search engine ranking because the recommended product list for example is hidden? Thanks.

Actually I do not think so.

This mod will work in php base AND it is functional as HTML, so it will just be another link as it already is on the main page.

Just looks cleaner is all. Pages will load faster, switching between tabs is lightening fast.

great addition I think

Thanks for sharing a great mod. Works fine for me

Cheers

Quote:

Originally Posted by markwhoo

Quote:

Originally Posted by bluecat

This might sound silly, but will it hurt search engine ranking because the recommended product list for example is hidden? Thanks.

Thank you. :)

Quick Question about adding product descriptions.

All my descriptions are set in the "short description".

Instead of using this:

Quote:

{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}

Would it be this:
{if $product.descr ne ""}{$product.descr}{else}{/if}

I would like to add the short description to the product summary tab.....anyone give me a hint. I am just learning.

Thanks,

Louise

Code:

{$product.descr}

will suffice :)

Quote:

Originally Posted by bluecat

This might sound silly, but will it hurt search engine ranking because the recommended product list for example is hidden? Thanks.

Since it uses DHTML the content is there for the spiders to see, you just won't until the layer is made visible.

Quote:

This might sound silly, but will it hurt search engine ranking because the recommended product list for example is hidden? Thanks.

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

Quote:

entire script search engine friendly and crawl-able.

Thanks Phil,

Worked like a charm....

Thanks again,
Louise

I know this is probably a whole other mod, but it's linked to this. Does anyone know how to add another piece of information? For instance, another tab with "Additional Information" or "Part Numbers," to a specific product. I know how to add another button and link, but I'd like to add information to each product.

Thanks

Quote:

Originally Posted by bluecat

One solution to this would be to add all of the additional information under the product details.

then modify the product details page to only displat the short description, then add the tab in the tabs menu, make a detail.tpl, call the detail.tpl via the tabs. In the detail.tpl, is where you would have your product detail description. Start off with the short description adding all additional info.

This is one way I have done this and it seems to wirk quite well.

I'm not quite sure how to call the information via the template. What would be an example inside the detail.tpl?

Quote:

Originally Posted by bluecat

I'm not quite sure how to call the information via the template. What would be an example inside the detail.tpl?

This is basic description: {$product.descr}

the detailed description is: {$product.fulldescr}

Place this inside of a small table on your detail.tpl file:

Code:

<SPAN class=>{if $product.fulldescr ne ""}{$product.fulldescr}

{else}{$product.descr}

{/if}

</SPAN>

remember to pull out the full line of code in the description area of the product.tpl, and just leave the {$product.descr}

This way you have a shot description, yet all of the details will show in your detail.tpl.

the array is set up so that if there are NO details, then it will display a repeat of the short description.

Clear as mud? :wink:

Thanks, I will get started. :)

Worked like a charm, thank you very much. :)