Automatically tabbed Fragments

Post Reply
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Automatically tabbed Fragments

Post by norman »

If you have a list of Fragments it is possible to make them appear in tabs with the fragment name as the tab name.
Here's how:

Create a new Fragment Layout called 1 - FirstTabbed Fragment Text Left Of Image
Set its code to be:

Code: Select all

<div class="tabbertext" data-tabid="tabbedfrags">
	{<actinic:variable name="FragmentTitle" />}
	<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22" >
		<a name="<actinic:variable name="FragmentAnchor" />"></a>
	</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
		<actinic:variable formatting="div,style|set-right" name="FragmentImage" />
	</actinic:block>
	<actinic:variable name="FragmentVideo" />
	<actinic:variable formatting="div,style|fragment-text" name="FragmentText" />
</div>
Create a new Fragment Layout called 2 - Subsequent Tabbed Fragment Text Left Of Image
Set its code to be:

Code: Select all

<div class="dp_extra_tab" data-tabid="tabbedfrags" data-tabname="<actinic:variable name="FragmentTitle" />">
	<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22" >
		<a name="<actinic:variable name="FragmentAnchor" />"></a>
	</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
		<actinic:variable formatting="div,style|set-right" name="FragmentImage" />
	</actinic:block>
	<actinic:variable name="FragmentVideo" />
	<actinic:variable formatting="div,style|fragment-text" name="FragmentText" />
</div>
Edit file (in your site folder) tabberv5support.js.
Look for the line:

Code: Select all

				extratabs += '{' + $(this).attr('data-tabname') + '}' + '<div id="' + extratabid + '"></div>'; // tab with placemarker DIV
Add the following on a new line after it

Code: Select all

				if ( tabid == 'tabbedfrags' )	// remove any container around tabbed fragments
					{
					$(this).parent('div.product-details').remove();	
					}
That's it.

To use this set the first Fragment that you want to appear in a tab to use layout 1 - FirstTabbed Fragment Text Left Of Image.

Set subsequent Fragments that you want to appear in tabs to use layout 2 - Subsequent Tabbed Fragment Text Left Of Image.
Norman
Post Reply