DIY Tabbed Content Menu for Product Page

Maree · #**101** 06-02-2005, 03:55 PM

Thank you Telafirma for your reply -

Ryano · #**102** 06-03-2005, 04:54 PM

Hi everyone, I got this mod working great on my site now. Thanks to everyone that helped make it possible.

One thing I noticed is that when you click on a tab for a certain product, and then go to another product, the first tab to show up is the one that was last clicked on the previous product. Instead I would like for Product Details, which is my first tab, to always pop up first each time a product is clicked. Does anyone have a fix for this? Thanks!!!!!

IndieDepot · #**103** 06-03-2005, 11:22 PM

Quote:

Originally Posted by Ryano

Hi everyone, I got this mod working great on my site now. Thanks to everyone that helped make it possible.

One thing I noticed is that when you click on a tab for a certain product, and then go to another product, the first tab to show up is the one that was last clicked on the previous product. Instead I would like for Product Details, which is my first tab, to always pop up first each time a product is clicked. Does anyone have a fix for this? Thanks!!!!!

Yea, that's easy. Just adjust the settings in the "tab.js" file at the top. it asks you what tab you want to show first. Just set it to the number. Also there's another setting at the bottom of the tab.js file that does something as well.

- Shannon

Ryano · #**104** 06-04-2005, 08:38 PM

Got it to work...Thanks again Shannon!

Ryano · #**105** 06-11-2005, 08:33 PM

Hi gang,
Me again, lol. I was trying to use this mod along with the following mod:

http://forum.x-cart.com/viewtopic.php?t=13226&highlight=

The other mod allows you to put the detailed image in place of the thumbnail. The probably that I am now running into is that if I don't have a second detailed image, then the tab "Detailed Images" remains there without an actual image in its box. Has anyone else integrated these two mods together or does anyone know how I can only have the Detailed Image tab show only when there is an actual 2nd detailed image to show? Thank you!

taltos1 · #**106** 06-15-2005, 11:11 AM

Quote:

Originally Posted by markwhoo

Quote:

Originally Posted by taltos1

I just wanted to say thank you for this mod. I am working on my first X-Cart site and this is an awesome mod. THANKS!!!!

UPDATE: Got this working fine, but 1 question. I used CopperB code (from page 4 of this post) and I would like to remove the "Product Details" tab, as that is the same exact info that is in the upper portion of the product info. So then the "send to a friend" tab becomes the first tab. I played with the product.tpl file and was able to make the info under that tab go away, but not the tab itself.. any suggestions. Thanks a lot!

Thanks a lot.

Change the following layout for the tab appearance and names:

Code:

Code: 

 
<a name="tabs"></a> 
<ul id="tablist"> [*]DETAILS [*]MORE INFO [*]SEND TO FRIEND [*]REVIEWS 
{if $product_links ne ""} [*]RELATED PRODUCTS 
{/if} [/list]

Hello,
I edited that area and got rid of the "Product Details" tab, the problem now though, is that even though the tab is gone, and "More Info" is the first tab, under that is the text for product details anway?

taltos1 · #**107** 06-18-2005, 06:00 AM

Anyone...this is eluding me? Thanks

markwhoo · #**108** 06-18-2005, 12:50 PM

Taltos1,

Now you must also go the the content part of the script and adjust to what you modified the tabs to. look at the div tags, these are numbered sc1 sc2 etc.

now you must align this part of the sript to the tabs as they appear.

Code:


 <a name="tabs"></a> <ul id="tablist">[*]Send to Friend[*]Detailed Images[*]Related Products[*]Recommended Products[*]Customer Reviews[/list]
<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>

thepbstore · #**109** 06-21-2005, 01:31 AM

Ok I am having major issues, I am using xcart 3/14 .. here is the example for the site

http://www.thepbstore.com/cart/product.php?productid=16272&cat=0&page=1

I get it installed, the links make others disapear, HOW EVER, how do you get it to be tabbed horizonally? and how do you clean it up so the rest vanish? I am not getting it ..

What it looks like inside the Product.tpl

Code:

 <a name="tabs"><ul id="tablist"> 
{if $product_links ne ""} [*]Related 
{/if} 
{if $images ne ""} [*]Detailed Images 
{/if} [*]Send to Friend 
{if $active_modules.Customer_Reviews ne ""} 
  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"} [*]Reviews 
  {/if} 
{/if} 
{if $recommends} [*]Recommended 
{/if} [/list]<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" hidden=true> {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>
{/capture} 
{include file="dialog.tpl" title=$product.product content=$smarty.capture.dialog extra="width=100%"}

{/if}

I have all my other things completed like it says. Curious what the hell am I doing wrong? just being an idiot? is the skin1.css taking over and changing the format? thanks for everything in advanced, and such

markdstephens · #**110** 07-09-2005, 10:39 AM

Great mod thanks to all.

Have added checks to see if product is part of a specific category by examining the SKU code. We use category prefixes to easily identify a product.

Eg: If SKU begins with a SC eg: SC045, SC183 etc. then we know it is shoes and hence display the tab for the recent press.

Code:

{if substr($product.productcode, 0, 2) == "SC"}[*]Recent Press
{/if}

We have default tab set to 1 in tabs.js

Code:

var initialtab=[1, "sc1"]

which autmatically opens the Detail Images tab if detailed images exist.

Question is I want to be able to set the default tab to say sc6-recent press and have it open automatically if there are no detailed images.

Basically do some sort of logic test in tabs.js. Anyone any ideas

Cheers

4.0.13