[solved] Put content of pb-left-column in a tab?

[venom2506]

Hello!

So I have the following request from my boss:

she wants me to put the product atributes (div: product_atributes) that appears in pb-left-column in a tab, and have the other tabs (accessories, etc) be grouped there as well.

Tabs being dealt with in JS, and me having no knowledge of it for now, I wondered if it was possible at all?

Thank you in advance,

Edited December 5, 2013 by venom2506 (see edit history)

[venom2506]

Should I assume it cannot be done?

[vekia]

you can create own tab manually in product.tpl file,

 

move whole pb-left-column to new div (where other tabs are defined)

<div id="idTab1000">
pb-left-column div here 
</div>

then in:

	<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
		{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
		{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
		{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
		{if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
		{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
		{$HOOK_PRODUCT_TAB}
	</ul>

add new tab:

<li><a id="my_new_tab" href="#idTab1000">{l s='my pb-left-column tab'}</a></li>

[venom2506]

Thank you very much, it appears to work!  I'd like for just the attributes to be moved there though, not the short description and the product's name. Is this possible?

 

Well, I figured it out myself for the position:

move the whole of 

<!-- description and features -->{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}

 

after le {/if} closing 

{if $product->description_short OR $packItems|@count > 0}

then open the idTab1000 div and include the rest ( colors etc).

 

BUT: the tabs don't seem to work anymore :/

 

edit again: well they do work, but it's odd: when I'm on the new tab I created, the clickable area of all the tabs is very narrow, on the top of the buttons. When I click a tab, the whole tag becomes clickable (including the new tab), but reverts back to the mini area when I've reselected the new tab...

 

Last edit: figured that out too, it's the "our_price_display" paragraph that overflows over the tabs. At some point I must have messed up that one, it's been bugging me for a while why it is so huge, but that's another matter entirelly. Thank you very much for your help!

Edited December 5, 2013 by venom2506 (see edit history)

[vekia]

thank you for explanation and step by step solutions

it will be helpful for other merchants here 

 

with regards,

Milos