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)

Re: DIY Tabbed Content Menu for Product Page

Thanks to phil and to everyone else that contribute on this mod. I wished I first hit the last page since I was trying to installed myself and started having problem especifically the way the text was posted on the Forum. I was missing the full code.
Thanks and cheers!!!8)

Re: DIY Tabbed Content Menu for Product Page

Awww... I downloaded the zip package above, and could install it. The only problem is that the main product image, its descriptcion, variants, and add to cart button dissapeared.

In other words, in my product page, everything above the tabs doesnt appear. The only thing that appear are the tabs.
Any ideas?

Re: DIY Tabbed Content Menu for Product Page

Hi everyone,

First of all, thanks for this mod, it's great!

Just one silly question ;) I have the mod working, but my description still shows up above the tabbed area as well as in the tabbed area, how do I get rid of the original x-cart one?

TIA!

Re: DIY Tabbed Content Menu for Product Page

I figured it out :) I just removed the appropriate area from product.tpl ;)

Re: DIY Tabbed Content Menu for Product Page

OK, another question. I've modified this so that the short description shows above and then the full description is in the tabbed area. I'd like to add a link in the short description that says "Read full description" that when clicked will simply move the page down to where the full description starts. Ideally I don't want to type this link into every description manually, I'd like it to just be automatic. Would that be hard to do?

Re: DIY Tabbed Content Menu for Product Page

Quote:

Originally Posted by ahjohn

What am i doing wrong?

I'm keep getting this on the product page. Not showing any tabs at all.[*]Product Details[*]Send to Friend [*]Recommended Products [/list]Please help..

thanks

I know this thread is ages old, but the mod is worth it being bumped up to the top yet again.

I'm having the same problem as ahjohn did, but no one had a response to his inquiry. When I copy and paste the code, I don't get tabs but just text above the div container. Does [*] mean something in smarty? I've read over x-cart stuff, smarty stuff and can't seem to locate what this symbol means (I thought it was some sort of Smarty link).

What I'm attempting to use these tabbed menus for is to display extra fields that have been added to product listings. I didn't want to spend much time on why the original code wasn't working for me so I plugged along and managed to get the tabs and div container showing using the code below. However, the tabs or links on the tabs do not bring up the new tab content for the tab that's clicked. On some products, only the 1st tab content is shown and is never replaced, and on other products, no content is ever present. If I look at the page source, the code looks as though it was generated as expected.

/skin1/modules/Extra_Felds/product.tpl:

Code:

{* $Id: product.tpl,v 1.9 2005/11/21 12:42:06 max Exp $ *}

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

<ul id="tablist">

{section name=field loop=$extra_fields}

{if $extra_fields[field].active eq "Y" && $extra_fields[field].field_value ne ""}

  <li><a href="#tabs" rel="sc{$smarty.section.field.iteration}">{$extra_fields[field].field}</a></li

>

{/if}

{/section}

</ul>



<DIV id="tabcontentcontainer">

{section name=field loop=$extra_fields}

{if $extra_fields[field].active eq "Y" && $extra_fields[field].field_value ne ""}

  <div id="sc{$smarty.section.field.iteration}" class="tabcontent">

    <p>{$extra_fields[field].field_value}</p>

  </div>

{/if}

{/section}



</DIV>

/skin1/customer/home.tpl:

Code:

<link rel="stylesheet" href="{$SkinDir}/tabs.css" />

...moved the call to Extra_Fields/product.tpl to desired location in /skin1/customer/main/product.tpl (in bold)

Code:

{* $Id: product.tpl,v 1.147.2.15 2007/05/11 08:00:26 max Exp $ *}

 <script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script>

{include file="main/include_js.tpl" src="main/popup_image.js"}

.

.

.

{if $active_modules.Feature_Comparison ne ""}

{include file="modules/Feature_Comparison/product_buttons.tpl"}

{/if}

<br /><br />

</td>

</tr>

 <tr>

<td>

{if $active_modules.Extra_Fields ne ""}

{include file="modules/Extra_Fields/product.tpl"}

{/if}

</td>

</tr>

</table>

</td>

</tr>

</table>

<input type="hidden" name="productid" value="{$product.productid}" />

<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />

.

.

.

Everything after the {/capture} was left the same as I was not using the tabbed menu for this purpose.

Here are the original tabs.css and tabs.js. No modifications to tabs.js, just a width, height, and font modification to tabs.css.

/skin1/tabs.css:

Code:

#tablist{

padding: 3px 0;

margin-left: 0;

margin-bottom: 0;

margin-top: 0.1em;

font: 10px 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: 350px;

height: 150px;

/* Insert Optional Height definition here to give all the content a unified height */

padding: 5px;

border: 1px solid black;

}



.tabcontent{

display:none;

}

/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

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

page source code:

Code:

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

<ul id="tablist">

  <li><a href="#tabs" rel="sc2">Key Ingredients</a></li>

  <li><a href="#tabs" rel="sc3">All Ingredients</a></li>

  <li><a href="#tabs" rel="sc4">Directions</a></li>

  <li><a href="#tabs" rel="sc5">Tip Zone</a></li>

</ul>



<DIV id="tabcontentcontainer">

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

    <p>Echinacea strengthens the immune system and promotes healing. Desert Parsley Root highly is highly effective against viral infections. Boneset is an unmatched virus and bacteria fighter.</p>

  </div>

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

    <p>Echinacea purpurea flower, Neem leaf, Desert parsley root, Echinacea angustifolia root, Boneset, Wild indigo root, Olive leaf, Ginger root, Purified Water, 25% alcohol, Natural Strawberry, Peach & Raspberry Flavour, Honey, Stevia. (Medicinal ratio 1:5)</p>

  </div>

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

    <p>Add 15-30 drops in water 4-5 times a day as needed at the onset of symptoms, continue for 4 days after symptoms are gone. If prolonged use required, consult a health care practitioner. Do not use if pregnant or breastfeeding.</p>

  </div>

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

    <p>Make sure you continue to use for 4 days after you start feeling better to ensure a full recovery.</p>

  </div>

</DIV>

If anyone can see the error of my ways or point to me another thread or resource on this I'd appreciate it.

Re: DIY Tabbed Content Menu for Product Page

What would make this mod really good is a jscript detector, otherwise bots (google) and people with jscript disabled can't view your content! TO google pages that use this may look like the small description only..

Re: DIY Tabbed Content Menu for Product Page

I'd be interested to know if anyone has had any issues with Google not spidering their tabs content...

Re: DIY Tabbed Content Menu for Product Page

I use phil's mod - love it - to be safe make sure you have detailed description as the visible tab.

my related products are in a hidden tab however and they show up on most indexed pages..

Re: DIY Tabbed Content Menu for Product Page

Thank you very much Phil! It was very easy to add and it took me only 5 minutes to make it work.

Re: DIY Tabbed Content Menu for Product Page

Christine,

You can alter the templates and adjust Phil's code for the custom look you want.

i.e. Alter names on tabs, tab color, text color, tab placement, etc.

Just try working on a copy of your files and experiment (preferably on a test site and not a live site).

Robert

Re: DIY Tabbed Content Menu for Product Page

try something like this...

PHP Code:


		
			
{if $active_modules.Upselling_Products eq ""}

<li><a href="#tabs" rel="tcontent2">Related Products </a></li>

{/if}

Quote:

Originally Posted by ChristineP

I tried Phils code to hide the tab(s) if there is no content in the tabs portion of this mod:
{if $active_modules.Upselling_Products eq ""}[*]Related Products
{else}
{/if}

Is there something missing for v4.1.9?

Christine

Re: DIY Tabbed Content Menu for Product Page

Check whether this modules is in active or not............

Quote:

Originally Posted by ChristineP

Vetrivel, thanks for the reply. I tried your code, but still not getting it to work. This is what I have for the tabs in customer/main/product.tpl and in customer/main/tabs_v4.1.x.tpl

{if $active_modules.Upselling_Products ne ""}
<li><a href="#tabs" rel="tcontent4">Related Items</a></li>
{/if}

When I tried your code below the tab disappears for all products.

Christine

Re: DIY Tabbed Content Menu for Product Page

HI,

This is Look very nice. But when i got mre tabbs, first tabb get overlap?

Thanks,

Re: DIY Tabbed Content Menu for Product Page

AusNetlT
Overlapping may be due to table width configurations or screen resolution.

Re: DIY Tabbed Content Menu for Product Page

Quote:

Originally Posted by PhilJ

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}

PhilJ, this Mod is super awesome!

I am using 4.1.11 and it's work great.

Few things I want to change for the tabs.
Change the order of the tab
Add the Additional images in it
Hide the Short Description for now(cause I don't have enough descriptions)
Change the name of the Recommended products list

Do I have to work on the the product.tpl and tabs_v4.1.x.tpl

One last thing, my "Recently Viewed" not capturing the recently viewed, what I did wrong?

Thanks in advance

X-cart's Newbie

Re: DIY Tabbed Content Menu for Product Page

Seems like this tabs mod is forever hot!
I just got it working on my v.4.2 after a few tweaks and re-using some of my tab mod code from my live 4.0.19 store. The 4.2 is not live and won't be for awhile. Still needs products and stuff. But I thought I'd share anyway.

I wanted to keep the pop-up window for detailed images so I left that code intact and just removed the corresponding tab from the mod. Then I added the remaining tabs code below the detailed image code. Works great.

Re: DIY Tabbed Content Menu for Product Page

Hi, are you able to share your code on the forum? I have a 4.2 . Thanks.

Re: DIY Tabbed Content Menu for Product Page

Questions-
Will this work in 4.2?
How do we make a spec. chart tab with a table for each product page?
Our spec chart takes up a lot of room on our page so if we could put it in a tab it would save space and still be accessible.
Any suggestions?

Re: DIY Tabbed Content Menu for Product Page

I got it working in 4.2....
I do not remember "the how" but I remember it being easy.

Quote:

Originally Posted by ESvideo

Re: DIY Tabbed Content Menu for Product Page

Quote:

Originally Posted by PhilJ

www.xcartmods.co.uk/freebiefiles/X-Cart_Tabs_Mod_v3.zip

Hi, PhilJ have there any problem if fancy category installs? will it work on 4.1.9?

Re: DIY Tabbed Content Menu for Product Page

Quote:

Originally Posted by just_me

AusNetlT
Overlapping may be due to table width configurations or screen resolution.

no screen resolution/size doesn't make any difference, I have up to 20 tabs and am having same issue of tabs overlapping on row 2 & 3, anyone can assist?

Re: DIY Tabbed Content Menu for Product Page

Was also looking at what the correct code was to refer from one tab to another so what i want to do is put an aref from one line of text or pic in one tab to another tab but I am unsure of how to refer to that tab, any help greatly appreciated

Re: DIY Tabbed Content Menu for Product Page

Thanks PhilJ for your codes.Now it is working well on 4.1.9 and 4.1.11.

Now my question to CopperB--

1) Is it possible to add total product page(ie,product name, image, description,add to cart button) along with send to friend,related product in the tabs on the top of the page?

2)Also is it possible to add some custom tabs here?

Thanks to all.

Re: DIY Tabbed Content Menu for Product Page

Has anyone used this with v4.3.1?

Re: DIY Tabbed Content Menu for Product Page

I've been playing with it on 4.2.2 and it seems to be working. I'm using percentages on the width of the div on the products detail page. I notice the tabs overlap on smaller resolutions and forces the div in making the tabs wrap around. I edited the language labels for the different tabs to make them shorter and help with the overlapping. I'm thinking about using a fixed width.

Re: DIY Tabbed Content Menu for Product Page

Has anyone used tabs menu for 4.3 version?????

please leave a post then????

needed urgently................

Re: DIY Tabbed Content Menu for Product Page

Hi Philj,
Interesting mod.I have a custom tab in home page but I want to display NewProducts for 4.4.2 mod http://forum.x-cart.com/showthread.php?t=57790 (Displaying new products) in tab.

How to achieve that?

Thanks.

Re: DIY Tabbed Content Menu for Product Page

This is something I would really like to do in 4.5.0

Can anyone tell me how to do that there? The Tabs are used differently there I think, so this code doesn't work anymore.

Any help would be appreciated!

Thanks a lot in advance!

Best wishes

Manuela