[bbazinet]

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:

{* $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:

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

{* $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:

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

/***********************************************
* 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:

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