It works on 1.3.4 i've not tried on 1.3.3
I'd suggest you make backup of database and any modified files first.
1. In /customer/products_pages/product_details.tpl
Comment out lines 189-191:
<hr>
<p></p>
{$product.full_description|default:$product.short_description}
2. Below it copy and paste the following:
{* Start Product Tabs Menu *}
<link rel="stylesheet" type="text/css" href="{$skin_dir}/tabcontent.css" />
<script type="text/javascript" language="javascript 1.2" src="{$skin_dir}/tabcontent.js"></script>
<br />
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Description</a></li>
{if $product.tab2_avail == 'Y'}
<li><a href="#" rel="tcontent2">{$product.tab2title}</a></li>
{/if}
{if $product.tab3_avail == 'Y'}
<li><a href="#" rel="tcontent3">{$product.tab3title}</a></li>
{/if}
{if $product.tab4_avail == 'Y'}
<li><a href="#" rel="tcontent4">{$product.tab4title}</a></li>
{/if}
{if $product.tab5_avail == 'Y'}
<li><a href="#" rel="tcontent5">{$product.tab5title}</a></li>
{/if}
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
{$product.full_description|default:$product.short_description}
</div>
<div id="tcontent2" class="tabcontent">
{$product.tab2}
</div>
<div id="tcontent3" class="tabcontent">
{$product.tab3}
</div>
<div id="tcontent4" class="tabcontent">
{$product.tab4}
</div>
<div id="tcontent5" class="tabcontent">
{$product.tab5}
</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
{* End Product Tabs Menu *}
3. In /admin/products_pages/products_update.tpl:
At line 206 copy and paste the following,
{******* START PRODUCT TABS SECTION *******}
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tab2}:</td>
<td> </td>
<td>
<input type="hidden" name="product_data[tab2_avail]" value="N" />
<input type="checkbox" name="product_data[tab2_avail]" value="Y" {if $product_data.tab2_avail == 'Y' || $mode == "add"}checked="checked"{/if} /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
<td > </td>
<td>
<input type="text" name="product_description[tab2title]" size="55" value="{$product_data.tab2title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
<td> </td>
<td>
<textarea id="product_tab2" name="product_description[tab2]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab2|escape:html}</textarea><br />
{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab2');" but_style="text"}
</td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tab3}:</td>
<td> </td>
<td>
<input type="hidden" name="product_data[tab3_avail]" value="N" />
<input type="checkbox" name="product_data[tab3_avail]" value="Y" {if $product_data.tab3_avail == 'Y'}checked="checked"{/if} /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
<td > </td>
<td>
<input type="text" name="product_description[tab3title]" size="55" value="{$product_data.tab3title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
<td> </td>
<td>
<textarea id="product_tab3" name="product_description[tab3]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab3|escape:html}</textarea><br />
{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab3');" but_style="text"}
</td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tab4}:</td>
<td> </td>
<td>
<input type="hidden" name="product_data[tab4_avail]" value="N" />
<input type="checkbox" name="product_data[tab4_avail]" value="Y" {if $product_data.tab4_avail == 'Y'}checked="checked"{/if} /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
<td > </td>
<td>
<input type="text" name="product_description[tab4title]" size="55" value="{$product_data.tab4title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
<td> </td>
<td>
<textarea id="product_tab4" name="product_description[tab4]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab4|escape:html}</textarea><br />
{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab4');" but_style="text"}
</td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tab5}:</td>
<td> </td>
<td>
<input type="hidden" name="product_data[tab5_avail]" value="N" />
<input type="checkbox" name="product_data[tab5_avail]" value="Y" {if $product_data.tab5_avail == 'Y'}checked="checked"{/if} /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
<td > </td>
<td>
<input type="text" name="product_description[tab5title]" size="55" value="{$product_data.tab5title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
<td> </td>
<td>
<textarea id="product_tab5" name="product_description[tab5]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab5|escape:html}</textarea><br />
{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab5');" but_style="text"}
</td>
</tr>
{******* END PRODUCT TABS SECTION *******}
4. Copy the two files tabcontent.css and tabcontent.js to /customer/
5. Copy the two files shade.gif and shadeactive.gif to /customer/images/
6. New Language Variables:
tabtitle = Tab Title
tab2 = Tab 2 Available
tab3 = Tab 3 Available
tab4 = Tab 4 Available
tab5 = Tab 5 Available
7. Table Field Additions: I used PHPMYADMIN but i'm sure it's not hard to write a mysql script to add the fields.
Field Type Collation Null Default
In Table products:
tab2_avail char(1) latin1_swedish_ci No N
tab3_avail char(1) latin1_swedish_ci No N
tab4_avail char(1) latin1_swedish_ci No N
tab5_avail char(1) latin1_swedish_ci No N
In Table Product_descriptions:
tab2 text latin1_swedish_ci No
tab2title varchar(25) latin1_swedish_ci No
tab3 text latin1_swedish_ci No
tab3title varchar(25) latin1_swedish_ci No
tab4 text latin1_swedish_ci No
tab4title varchar(25) latin1_swedish_ci No
tab5 text latin1_swedish_ci No
tab5title varchar(25) latin1_swedish_ci No
The FIRST TAB is always 'Default Full Product Description'.
Now when you edit or add an existing products in admin you will find there are another 4 spaces to put the tab descriptions. You can switch each tab on/off and give each tab an individual title.
If you want to change the tab colours then change the gif's but try to keep the same filenames, otherwise you'll have to edit the tabcontent.css file.
I've included these instructions in the attached file "product tabs.zip" which also include all the neccessary files you need.
If anyone can improve on this then please do.
Sign In
14
