Tabber: Displaying Actinic items in additional tabs

Tabbed Product and Fragment Descriptions.
Post Reply
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Tabber: Displaying Actinic items in additional tabs

Post by norman »

It is possible to tweak Tabber to automatically create additional tabs containing other bits of the Product Layout. In the example below we'll move the Components and Attributes to a tab.

1) Go to Design / Library / Layouts / TabbedDescription; right-click TabbedProductDescription and select Copy.

2) Rename that copy to be TabbedProductDescription Customised.

3) Edit TabbedProductDescription Customised and look for the line

Code: Select all

	echo "</ul></div><br><div class=\"tab-container\" id=\"cont_$anc\">$tabhtml</div></div>";			// output all the tab text
4) Immediately above that add

Code: Select all

	echo "<li id=\"\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\">CHOICES</a></li>";
	$tabhtml .= "<div class=\"tab-pane\" id=\"pane_$anc" . "_$panecount\">";
	$tabhtml .= <<<END_OF_CODE
<actinic:variable name="AttributeList" />
<actinic:variable name="ComponentList" />
</div>
END_OF_CODE;
	$panecount++;
5) OK out.

6) Go to Design / Library / Layouts / Products; right-click Standard Layout Using CSS - Tabbed Descriptions and select Copy.

7) Rename that copy to be Standard Layout Using CSS - Tabbed Descriptions Customised.

8) Edit Standard Layout Using CSS - Tabbed Descriptions Customised and look for the line

Code: Select all

         <actinic:variable name="TabbedDescription" value="TabbedProductDescription" />
9) replace that line with

Code: Select all

         <actinic:variable name="TabbedDescription" value="TabbedProductDescription Customised" />
10) Finally, in product layout Standard Layout Using CSS - Tabbed Descriptions Customised look for the lines

Code: Select all

         <actinic:variable name="AttributeList" />
         <actinic:variable name="ComponentList" />
and delete them.

Now if you use layout Standard Layout Using CSS - Tabbed Descriptions Customised for a product and use some Tabber tabs you'll find an extra tab CHOICES containing the Actinic Components and Attributes.

It is easy to add additional tabs for other elements. Just repeat steps 3 and 4 (amending the word CHOICES and replacing the two Actinic Variables. Don't change anything else.
Also do step 10 to remove these Variables from their usual place in the product layout.

UPDATED 02-09-2010 to allow better compatibility with embedded HTML. Needs Tabber 2.14 or later.
Norman
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Fix if images are being used inside additional tabs.

Post by norman »

A problem arises if your Actinic content includes layouts that display images and these images are not directly in the Site folder.

In this case Actinic unfortunately uses \ characters in pathnames when accessing images outside the site folder. This means that in certain circumstances folder or filenames beginning with "n", "r", "t" end up looking like \n, \r, \t and this means newline, return and tab to the PHP that this tweak uses. E.g. a filename images\newpic.jpg will be seen as images{newline}ewpic.jpg and we won't find that file!

We can fix this be repairing the Actinic layout that's causing the problem.

For example, if it's the Related Products list, then in whatever layout you're using there try replacing (e.g. in Mini Product Related Products Item) the fragment:-

Code: Select all

<actinic:variable name="ProductImageFileName" />
With

Code: Select all

<actinic:block php="true">echo str_replace('\\', '/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');</actinic:block>
This will repair Actinic's unfortunate use of backslashes.
Norman
mirage23
Posts: 7
Joined: Sun Feb 28, 2010 7:17 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by mirage23 »

Hi,
I have added 5 permanent additional tabs starting with the 'Free UK 24Hr Delivery?' tab.
They all display fine in IE, Firefox & Opera but only the first permanent tab displays in Safari & Google Chrome.
Here is an example of page with this tab layout:
http://www.mirage2000records.co.uk/acat ... _Case.html
Is it a Compatibility problem? Is there anthing I can do to solve it?
Any help would be most appreciated.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by norman »

I'm not sure what's happening.

Try surrounding the tabs with a fixed width DIV. Your expandable width layout may be confusing Tabber.

Also, Tabber is only intended to work with a single row of tab headings. If you have too many headings for the available width, then shorten some or reduce the font size.

Finally, try using standard Tabber and see if you have the same problems there. That will help narrow it down.
Norman
mirage23
Posts: 7
Joined: Sun Feb 28, 2010 7:17 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by mirage23 »

Thanks Norman,
I have tried your suggestions but to no avail- permanent tabs are still not showing in Safari or Chrome.
I've put the Tabber into a Fixed width DIV & Resized the tab header text. I also tried removing all additional tabs but one.
One thing I did notice was that when I resized the Header text that although the text resized properly in IE, Opera & FF the Font size for the extra tabs didn't change in Opera or Safari. This suggests that the permanent tabs arn't loading properly in those two browsers.

This is my customised tabs code:

Code: Select all


<actinic:block php="true">
// Tabbed Product Description V2.05
$anc = '<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />';
$desc = <<<TBPRDSC
<span style='font-size: 12px;'><strong><actinic:variable name="ProductDescription" selectable="false" />
TBPRDSC;

if ( preg_match('/(.*?)(&#123;.+?&#125;.*)/s', $desc, $bits) )	// is there at least one tab?
	{
	$panecount = 0;
	$havepanes = true;
	$tabhtml = '<div class="tab-panes">';
	$before = $bits[1];
	$after = '';
	$tabcode = $bits[2];
	if ( preg_match('/(.*?)&#123;&#125;(.*)/s', $tabcode, $bits) )	// optional {} signifies end of tabbed text
		{
		$tabcode = $bits[1];
		$after = $bits[2];
		}
	echo $before; 
	echo '<br clear="all"><div id="tab-header">';
	echo '<ul id="ul_' . $anc . '">';
	while ( preg_match('/&#123;(.*?)&#125;(.*)/s', $tabcode, $bits) )
		{
		$tabname = $bits[1];
		$tabtext = $bits[2];
		$tabcode = '';
		if (  preg_match('/(.*?)(&#123;.+&#125;.*)/s', $tabtext, $bits) )	// more tabs?
			{
			$tabtext = $bits[1];
			$tabcode = $bits[2];
			}
		// output current tab
		echo '<li id="';
		if ( $panecount == 0) 	// mark first tab so we can set it active
			{
			echo "tab-current";
			}
		echo "\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\"";
		echo "><span style='font-size: 10px;'>$tabname</a></li>";
		$tabhtml .= "<div id=\"pane_$anc" . "_$panecount\"><span style='font-size: 12px;'><strong></br></BR>$tabtext</BR></BR></div>";			// save the contents of the tab for later
		 $panecount++;   
   
   
   echo "<li id=\"\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\">FREE 24HR UK DELIVERY?</a></li>";
   $tabhtml .= "<div id=\"pane_$anc" . "_$panecount\">";
   $tabhtml .= <<<END_OF_CODE
</br></br><span style='font-size: 12px;'><strong>Stock Status:&nbsp;<span style='color: #990000;'>In Stock</span></br></br>
Ships:<span style='color: #990000;'>&nbsp;Same Day (On all orders placed before 4pm)</span></br></br>  
<span style='font-size: 12px;'><strong>Buy <span style='color: #990000;'><actinic:variable name="FreeQualNo" /></span> or More of this Item to Qualify for FREE Parcel Force 24 Delivery (UK Only).</span></br></br>
<span style='font-size: 12px;'><strong>Spend Over £50 on any Parcel Force Shipping Equipment or Bags/Cases and Delivery Is FREE via Parcel Force 24 (UK Only)</span></br></br>
<span style='font-size: 12px;'>The UK Shipping cost on up to <span style='color: #990000;'><actinic:variable name="FreeQualNo" /></span> items is <span style='color: #990000;'><actinic:variable name="UK Shipping Price" />&nbsp;<actinic:variable name="UK Shipping Company" /></span></br></br>
<span style='font-size: 12px;'><strong> Please select Parcel Force Shipping at Checkout</span></strong></BR></BR> 
</div>
END_OF_CODE;
$panecount++;   
   
   
   echo "<li id=\"\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\">INTL SHIPPING INFO</a></li>";
   $tabhtml .= "<div id=\"pane_$anc" . "_$panecount\">";
   $tabhtml .= <<<END_OF_CODE
   
</BR></br><span style='font-size: 12px; color: #000000;'>International Shipping:<span style='font-size: 12px; color: #990000;'> Fee varies by location. The Shipping to your location will be calculated at checkout.</BR></BR>
<span style='font-size: 12px; color: #000000;'>Shipping Methods:</span><span style='font-size: 12px; color: #990000;'> <actinic:variable name="Intl Shipping Info" /></span></BR></BR>
</div>
END_OF_CODE;
$panecount++;   
   
   
   echo "<li id=\"\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\">PRICE MATCH</a></li>";
   $tabhtml .= "<div id=\"pane_$anc" . "_$panecount\">";
   $tabhtml .= <<<END_OF_CODE
</br></br><strong><span style='font-size: 12px; color: #000000;'>Found this item cheaper elsewhere?</BR></BR> 
<span style='font-size: 12px; color: #990000;'>We aim to offer the best value on the web so we will try to match or beat any price (including Shipping) on the net.</BR></BR>  
Simply contact us via Email or Phone us with the full web address of where you have seen it cheaper and we will do our best to match or better it.</span></BR></BR> 

</div>
END_OF_CODE;
$panecount++;
		}
     echo "<li id=\"\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\">GUARANTEE</a></li>";
   $tabhtml .= "<div id=\"pane_$anc" . "_$panecount\">";
   $tabhtml .= <<<END_OF_CODE

</br></br>If you are unhappy for any reason you can return the item to us for a full refund within 7 days of receipt.</BR></BR> 
 
In the unlikely event of an item being faulty please contact us within 28 days- we will cover your return postage costs & send a replacement or refund.</BR></BR> 
</div>
END_OF_CODE;
        
   $panecount++;   
echo "<li id=\"\"><a href=\"#\" onclick=\"return swaptabs('$anc',$panecount)\">RELATED ITEMS</a></li>";
   $tabhtml .= "<div id=\"pane_$anc" . "_$panecount\">";
   $tabhtml .= <<<END_OF_CODE
</br>
<actinic:variable name="ProductRelatedProductsList" />
<!--<actinic:variable name="ProductAlsoBoughtList" />-->

</div>
END_OF_CODE;
   $panecount++;  
   
	echo "</ul></div><br><div class=\"tab-container\" id=\"cont_$anc\">$tabhtml</div></div>";			// output all the tab text
	echo "<script type=\"text/javascript\">pids.push('$anc');</script>";		// save list of tabs to activate on page load
	echo $after; 		
	}
else
	{
	echo $desc;	// no tabs, so output text unaltered
	}
</actinic:block>
Standard Tabber appears to work OK in all browsers but I have implemented some varaibles which i'm not sure will work if entered directly into the Product description (if I decide to use standard tabber)

Any pointers will be most appreciated.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by norman »

Your way is not the way I'd go about this.

Do something like this. Start with the standard Tabber.

Then just above the first (and only) TBPRDSC put your stuff. No PHP needed just use:

Code: Select all

&#123;FREE 24HR UK DELIVERY&#125;
Text for delivery here.
&#123;INTL SHIPPING INFO&#125;
Text for shipping here.
etc.
Norman
mirage23
Posts: 7
Joined: Sun Feb 28, 2010 7:17 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by mirage23 »

Thanks for the quick reply!
Not totally sure on this-
I start with Standard Tabber Layout but this doesn't have the 'End Of Code' in it anywhere.
So where exactly do I add the:
&#123;FREE 24HR UK DELIVERY&#125;
Text for delivery here.
&#123;INTL SHIPPING INFO&#125;
Text for shipping here.

Sorry to be a pain. thankyou.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by norman »

The same place as you showed me the big wodge of code you had amended yourself.

UPDATE: It goes before TBPRDSC; not ENDOFCODE.
Norman
mirage23
Posts: 7
Joined: Sun Feb 28, 2010 7:17 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by mirage23 »

Thanks Norman,
I have now managed to make permanent tabs work in chrome/ safari.
I have Implemented your suggested system of adding before TBPRDSC; but this alone doesn't make it work.
What I found was that both Chrome & Safari don't like the <span style=></span> & <strong></strong> I was using inside the the tabs.
It also doesn't like </br> you have to use <br/> to insert a break.

thanks for all your help with this...

Dave
Matty
Posts: 4
Joined: Thu Sep 22, 2011 4:13 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by Matty »

Code: Select all

 echo "</ul></div><br><div class=\"tab-container\" id=\"cont_$anc\">$tabhtml</div></div>";         // output all the tab text

I recently purchased Tabber & Multi info prompt and want to get the multi info into a tab which I understand I can do using the above info.

Firstly I cannot find the above quoted code in the TabbedProductDescription Customised. Below is the code I have - could someone please highlight exactly where I put the Multi info code in:

Code: Select all

<actinic:block php="true">
// Tabbed Product Description V3.08
$anc = '<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />';
$desc = <<<TBPRDSC
<actinic:variable name="ProductDescription"  selectable="false" />
TBPRDSC;
if ( preg_match('/(.*?)(&#123;.+?&#125;.*)/s', $desc, $bits) )	// is there at least one tab?
	{
	$panecount = 0;
	$tabhtml = '';
	$before = $bits[1];
	$after = '';
	$tabcode = $bits[2];
	if ( preg_match('/(.*?)&#123;&#125;(.*)/s', $tabcode, $bits) )	// optional {} signifies end of tabbed text
		{
		$tabcode = $bits[1];
		$after = $bits[2];
		}
	echo $before; 
	echo '<actinic:variable name="TabPrefix" encoding="perl" selectable="false" /><div id="tabber_' . $anc . '" class="widget"><ul class="tabnav">';
	while ( preg_match('/&#123;(.*?)&#125;(.*)/s', $tabcode, $bits) )
		{
		$tabname = $bits[1];
		$tabtext = $bits[2];
		$tabcode = '';
		if (  preg_match('/(.*?)(&#123;.+&#125;.*)/s', $tabtext, $bits) )	// more tabs?
			{
			$tabtext = $bits[1];
			$tabcode = $bits[2];
			}
		// output current tab
		echo '<li><a href="#tab_' . $anc . '_' . $panecount . '"><span>' . $tabname . '</span></a></li>';
		$tabhtml .= '<div id="tab_' . $anc . '_' . $panecount . '" class="tabdiv"><table id="tabinner"><tr><td>' . $tabtext . '</td></tr></table></div>';			// save the contents of the tab for later
		$panecount++;
		}
	echo "</ul>";
   echo "$tabhtml</div>
";			// output all the tab text
	echo '<actinic:variable name="TabSuffix" encoding="perl" selectable="false" />';
	echo $after; 		
	}
else
	{
	echo $desc;	// no tabs, so output text unaltered
	}
</actinic:block>
This is the Multi info code do I put all of this or which bits as I tried just variables and various options and had no joy:

Code: Select all

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e">
            <br />
            <script language=JavaScript>
             setotherinfo('<Actinic:Variable Name="OtherInfoPrompt"/>', 
				 'NAME="O_<Actinic:Variable Name="ProductID"/>">', '40', '1000');
            </script>
         </actinic:block>

Thanks for any help.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by norman »

Dave.

Try amending:

Code: Select all

$desc = <<<TBPRDSC
<actinic:variable name="ProductDescription" selectable="false" />
TBPRDSC;
To be:

Code: Select all

$desc = <<<TBPRDSC
<actinic:variable name="ProductDescription" selectable="false" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e">
&#123;Personalisation&#125;<script language=JavaScript>setotherinfo('<Actinic:Variable Name="OtherInfoPrompt"/>', 'NAME="O_<Actinic:Variable Name="ProductID"/>">', '40', '1000');</script>
</actinic:block>
TBPRDSC;
Are you sure it's a good idea to put required customer input inside a tab? It may not be obvious to customers that they have to switch to a tab in order to enter something. Also if they leave required fields blank they'll not know about the error bounce until they switch back to that tab.
Norman
Matty
Posts: 4
Joined: Thu Sep 22, 2011 4:13 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by Matty »

Thanks I will try it. You might be right tho, I will ponder on that. Same with choices too cos we know customers never read anything!
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tabber: Displaying Actinic items in additional tabs

Post by norman »

Quite. Most people use additional tabs for things like detailed specifications, usage instructions, etc. Stuff that you only need to see if you really want to.

However there are exceptions:-

I recall someone being really brave and putting Description in the first tab, Attributes in the next, Other Info in another and finally the Add to Cart in the last tab. Tabs were named something like 1 - Details, 2 - Options, 3 - Personalisation, 4 - Buy.

Someone else had a very fixed range of things that always came in about 4 variants. We seriously modified Tabber so it displayed each Product on the page in a different tab, with the tab name being the Product Name. You could even used a Tabbed Product Layout within the tabbed product list! Tabs within tabs!
Norman
leej
Posts: 46
Joined: Thu May 17, 2007 10:03 am
Location: Otley, Leeds
Contact:

Re: Tabber: Displaying Actinic items in additional tabs

Post by leej »

Hi Norman,
Can the same princlple be applied to implementing the Feefo Feedback Functionality? If so is there any way to have the Feefo as the second tab by default. Thanks in advance for any suggestion you have.

UPDATE: Hi Norman, I think I've sorted it =) Thanks.

Lee
Post Reply