Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

DIY Tabbed Content Menu for Product Page

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #161  
Old 04-14-2007, 08:35 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 3,962
 

Default Re: DIY Tabbed Content Menu for Product Page

www.xcartmods.co.uk/freebiefiles/X-Cart_Tabs_Mod_v3.zip
__________________
XCARTMODS.CO.UK | reBOOT reDUX Template | reBOOT reDUX Changelog | ViViD Template (work in progress)
Reply With Quote
  #162  
Old 04-14-2007, 08:45 AM
  HWT's Avatar 
HWT HWT is offline
 

eXpert
  
Join Date: Jan 2005
Location: Massachusetts, USA
Posts: 392
 

Default Re: DIY Tabbed Content Menu for Product Page

Thank you again!
__________________
x-cart 4.0.13 and 4.1.7 and 4.1.10
Reply With Quote
  #163  
Old 07-27-2007, 06:51 AM
  Qdox's Avatar 
Qdox Qdox is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 57
 

Default 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!!!
__________________
QdoxGroup
X-Cart version 4.1.8 Pro
HandsOnWebHosting.
Web server Apache/2.0.52 (Red Hat)
http://www.justinthenet.com/
Reply With Quote
  #164  
Old 08-03-2007, 01:01 PM
 
typologist typologist is offline
 

Advanced Member
  
Join Date: Jul 2007
Posts: 51
 

Default 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?
__________________
4.1.8 Gold (Unix)
Reply With Quote
  #165  
Old 08-10-2007, 05:35 PM
 
naemsmommy naemsmommy is offline
 

Senior Member
  
Join Date: Jul 2007
Posts: 144
 

Default 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!
__________________
Danielle
Reply With Quote
  #166  
Old 08-10-2007, 06:24 PM
 
naemsmommy naemsmommy is offline
 

Senior Member
  
Join Date: Jul 2007
Posts: 144
 

Default Re: DIY Tabbed Content Menu for Product Page

I figured it out I just removed the appropriate area from product.tpl
__________________
Danielle
Reply With Quote
  #167  
Old 08-13-2007, 08:56 AM
 
naemsmommy naemsmommy is offline
 

Senior Member
  
Join Date: Jul 2007
Posts: 144
 

Default 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?
__________________
Danielle
Reply With Quote
  #168  
Old 10-03-2007, 05:35 PM
 
bbazinet bbazinet is offline
 

Newbie
  
Join Date: Sep 2007
Posts: 3
 

Default 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.
__________________
x-cart 4.1.8 Gold
Reply With Quote
  #169  
Old 10-08-2007, 07:48 AM
 
byronm byronm is offline
 

Advanced Member
  
Join Date: Oct 2007
Posts: 38
 

Default 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..
__________________
X-Cart 4.1.9 / Apache 2.2 / Centos 5 / PHP 5.2.4
Reply With Quote
  #170  
Old 01-06-2008, 02:27 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 3,962
 

Default 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...
__________________
XCARTMODS.CO.UK | reBOOT reDUX Template | reBOOT reDUX Changelog | ViViD Template (work in progress)
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 08:18 PM.

   

 
X-Cart forums © 2001-2020