View Single Post
  #8  
Old 09-30-2007, 08:38 PM
 
MoonDog MoonDog is offline
 

Advanced Member
  
Join Date: Aug 2007
Posts: 93
 

Default Re: Menu with Tabs for Product page

For Hugo and those that installed this menu, here is the way to create a full detailed description tab.

What this mod does:
If you have a full detailed description for your product, then it automatically creates a link that says 'See full description...' when you open the product page . By clicking on this link, the page jumps to the tabbed menu and it opens the 'Full Description' tab.

Here's how to modify your code to do this:

Open the skin1/tabber-minimized.js and insert the following code to the end of the file:

Code:
function tabShow(i){ document.getElementById('mytabber').tabber.tabShow(i); }

Now open the file skin1/customer/main/product.tpl and find this line of code:
Code:
<td>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}</td>
and change it to:
Code:
<td>{if $product.fulldescr ne ""}{$product.descr}<br><br><a href="#mytabber" onClick="javascript:tabShow(3)">See full description...</a>{else}{$product.descr}{/if}</td>
Note!!! - Change the number 3 in the tabShow(3) code to the number of the tab you want to open.
Please note that the first tab is 0 and the second tab is 1 etc.
For instance, if your 'Full Description' tab is the third from the left than change the code to tabShow(2)
Now find the line:
Code:
<div class="tabber">

and change it to:
Code:
<div class="tabber" id="mytabber">
This will allow the page to jump to the menu when clicking on the 'See full description...' link.

We now need to create a 'Full Description' tab by copying the following code and inserting it in any tab location you want.
Code:
<div class="tabbertab" id="description"> <h2>Full Description</h2> {include file="customer/main/full_description.tpl" } </div>
For instance, in my case I added it after the 'Related Products' tab; so I inserted the code right after this code:
Code:
{if $active_modules.Upselling_Products ne ""} <div class="tabbertab"> <h2>Related Products</h2> {include file="modules/Upselling_Products/related_products.tpl" } </div> {/if}
Now create a full_description.tpl file by using the following code:
Code:
{* $Id: full_description.tpl v1.0 2007/09/30 *} {if $product.fulldescr ne ""} {capture name=dialog} {$product.fulldescr} {/capture} {include file="dialog.tpl" title=$lng.lbl_full_description content=$smarty.capture.dialog extra='width="100%"'} {else} {capture name=dialog} No full description {/capture} {include file="dialog.tpl" title=$lng.lbl_full_description content=$smarty.capture.dialog extra="width=100%"} {/if}
and saving this file to the skin1/customer/main folder

Make sure that you have full description content for the product in order to see this work in action. And also add a lbl_full_description language variable in the admin area named 'Full Description'.

I've attached the product.tpl for you to use.

That's it.

- MoonDog -
Attached Thumbnails
Click image for larger version

Name:	Full_Description.jpg
Views:	598
Size:	61.2 KB
ID:	576  
Attached Files
File Type: zip product.zip (3.0 KB, 299 views)
__________________
X-CART Gold v4.1.8
Reply With Quote