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)

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.