X-Cart: shopping cart software

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)

PhilJ 04-14-2007 08:35 AM

Re: DIY Tabbed Content Menu for Product Page
 
www.xcartmods.co.uk/freebiefiles/X-Cart_Tabs_Mod_v3.zip

HWT 04-14-2007 08:45 AM

Re: DIY Tabbed Content Menu for Product Page
 
Thank you again!

Qdox 07-27-2007 06:51 AM

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)

typologist 08-03-2007 01:01 PM

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?

naemsmommy 08-10-2007 05:35 PM

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!

naemsmommy 08-10-2007 06:24 PM

Re: DIY Tabbed Content Menu for Product Page
 
I figured it out :) I just removed the appropriate area from product.tpl ;)

naemsmommy 08-13-2007 08:56 AM

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?

bbazinet 10-03-2007 05:35 PM

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.

byronm 10-08-2007 07:48 AM

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

PhilJ 01-06-2008 02:27 AM

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

paul@dimoda.com.au 07-21-2008 04:07 AM

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

clik 07-22-2008 06:50 AM

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.

robertswww 12-21-2008 01:39 PM

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

Vetrivel 02-02-2009 07:04 PM

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


Vetrivel 02-03-2009 05:57 AM

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


AusNetIT 06-10-2009 05:13 AM

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,

just_me 06-11-2009 02:04 AM

Re: DIY Tabbed Content Menu for Product Page
 
AusNetlT
Overlapping may be due to table width configurations or screen resolution.

royng 07-15-2009 03:56 PM

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

James.Schoaf 07-27-2009 09:18 AM

Re: DIY Tabbed Content Menu for Product Page
 
Thanks Phil!

just_me 07-28-2009 10:24 AM

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.

cautious 08-08-2009 03:53 AM

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.

ESvideo 09-17-2009 12:06 PM

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?

James.Schoaf 09-18-2009 06:17 AM

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


Learner 11-21-2009 12:43 AM

Re: DIY Tabbed Content Menu for Product Page
 

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

designtheweb 11-23-2009 11:52 AM

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?

designtheweb 11-23-2009 12:35 PM

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

Learner 01-08-2010 10:47 PM

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.



TruVu 02-24-2010 07:02 AM

Re: DIY Tabbed Content Menu for Product Page
 
Has anyone used this with v4.3.1?

XCart4Life 03-03-2010 11:04 PM

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.

Learner 03-04-2010 11:08 PM

Re: DIY Tabbed Content Menu for Product Page
 
Has anyone used tabs menu for 4.3 version?????

please leave a post then????

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

xtech 05-21-2012 02:19 AM

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.

ManuelaT 09-07-2012 05:06 AM

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


All times are GMT -8. The time now is 05:03 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.