Swift - make Before text into a tab.

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

Swift - make Before text into a tab.

Post by norman »

You can put text that appears before the first {tab name}... into its own tab.

Edit layout Swift Tabbed Product Description and look for:

Code: Select all

	echo ($before != '' ? '<div id="tbbefore_<actinic:variable name="EncodedProductAnchor" />" class="tabberbefore">' . $before . '</div>' : '');
Replace it with:

Code: Select all

	// make any prefix text into a tab			
	if ($before != '' ) 
		{
		$tabcode = '&#123;Description#125;<h3>Product Description</h3>' . $tabcode;
		}
Norman
Top
graphicz
Posts: 38
Joined: Wed Oct 20, 2010 2:43 pm
Contact:
Contact graphicz

Re: Swift - make Before text into a tab.

Post by graphicz »

There appears to be a typo in the above.
There is a missing ampersand after Description and a ' $before ' is missing

Working code follows:

Code: Select all

// echo ($before != '' ? '<div id="tbbefore_<actinic:variable name="EncodedProductAnchor" />" class="tabberbefore">' . $before . '</div>' : ''); 			
	// make any prefix text into a tab			
	if ($before != '' ) 
		{
		$tabcode = '&#123;Description&#125;<h3>Product Description</h3>'. $before  . $tabcode;
		}
Top
graphicz
Posts: 38
Joined: Wed Oct 20, 2010 2:43 pm
Contact:
Contact graphicz

Re: Swift - make Before text into a tab.

Post by graphicz »

If you would like to show the Extended Information text, image and video in a 'Further Information' tab use the following:

Code: Select all

<!-- START Swift Tabber V403 - Collect some common data -->
<actinic:block php="true">
	$linksinfirsttab = ('<actinic:variable name="TabsLinkPosition" encoding="perl" selectable="false" />' != 'After tabs');
	$sdlinks = <<<'ENDOFLINKS'
	<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
		<p class="product-text"><a href="<actinic:variable name="ProductLinkInfo" />"><actinic:variable encoding="actinic" name="ProductLinkText" /></a></p>
	</actinic:block>
ENDOFLINKS;

	$desc =<<<'ENDOFDESC'
<actinic:variable encoding="actinic" name="ProductDescription" />
ENDOFDESC;

	// Convert everything to Tabber generated tabs 
	//	Tabbed Product Description for Swift
	$anc = '<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />';

	// deal with tabs within embedded HTML
	$desc = str_replace('{', '&#123;', $desc);
	$desc = str_replace('}', '&#125;', $desc);

	$panecount = 0;
	$before = '';
	$tabcode = '';
	$after = '';
	$tabhtml = '<div class="tab-content">';
	
	// are there any tabber tabs

	if ( preg_match('/(.*?)(&#123;.+?&#125;.*)$/s', $desc, $bits) )
		{
		$before = preg_replace('/^<br.*?>/i', '', $bits[1]);
		$tabcode = $bits[2];
		if ( preg_match('/(.*?)&#123;&#125;(.*)/s', $tabcode, $bits) )	// optional {} signifies end of tabbed text
			{
			$tabcode = $bits[1];
			$after = preg_replace('/^<br.*?>/i', '', $bits[2]);
			}
		}
	// no tabber tabs so generate first tab from product description
	else
		{
		$tabcode = '&#123;Description&#125;<h3>Product Description</h3>' . $desc;
		}
		
	// text before first tab	
	
	// echo ($before != '' ? '<div id="tbbefore_<actinic:variable name="EncodedProductAnchor" />" class="tabberbefore">' . $before . '</div>' : ''); 			
	// make any prefix text into a tab			
	if ($before != '' ) 
		{
		$tabcode = '&#123;Description&#125;<h3>Product Description</h3>'. $before  . $tabcode;
		}
	// add in the sellerdeck tabs
	
		//Xinfo
	<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInfoText%22%20%2f%3e%20%21%3d%20%22%22" >
		$tabcode .= '&#123;<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInfoLinkText%22%20%2f%3e%20%21%3d%20%22%22"><actinic:variable name="ExtendedInfoLinkText" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInfoLinkText%22%20%2f%3e%20%3d%3d%20%22%22" >Further Informaton</actinic:block>&#125;<p><actinic:variable name="ExtendedInfoText" /></p>
						<actinic:variable name="ExtendedInfoVideo" />
						<actinic:block if="%3cactinic%3avariable%20name%3d%22IsExtendedImageSpecified%22%20%2f%3e" >
						<actinic:variable value="Standard Extended Information Image" name="ExtendedInformationImage" />
						</actinic:block>';	
	</actinic:block>
		// Edit line 5998 of stylesheet
		//	img{
		//	max-width: 100%;
		//	max-height: 100%;
		//	height:auto;
		//}
	
	// Delivery
	<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDeliveryAndReturns%22%20%2f%3e%20%21%3d%20%22%22">
		$tabcode .= '&#123;Delivery &amp; Returns&#125;<actinic:variable name="ProductDeliveryAndReturns" encoding="perl" selectable="false" />';
	</actinic:block>
	
	// Feefo
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsFeefov3%22%20%2f%3e" ><actinic:block if="%3cactinic%3avariable%20name%3d%22CustomerFeedbackEnabled%22%20%2f%3e%20AND%20%0d%3cactinic%3avariable%20name%3d%22DisplayProductFeedback%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22EnableFeefoContentForProducts%22%20%2f%3e%20AND%0d%28%3cactinic%3avariable%20name%3d%22EnableFeefoProductSectionContent%22%20%2f%3e%20OR%0d%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22%29%29" ><actinic:block if="%3cactinic%3avariable%20name%3d%22StaticCustomerFeedbackEnabled%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ProductReviewHTML%22%20%2f%3e%20%21%3d%20%22%22" >					
			$tabcode .= '&#123;Reviews&#125;<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" ><actinic:variable name="FeefoProductFeedback"/></actinic:block>';
	</actinic:block></actinic:block></actinic:block>
	
	// videos
	<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductEmbedVideo%22%20%2f%3e%20%21%3d%20%22%22">
		$tabcode .= '&#123;Videos&#125;<actinic:variable name="ProductVideo" />';
	</actinic:block>
	
	// loop through all items and create Swift tabs
	echo '<div class="col-lg-12 mt-0 mt-md-3 mt-lg-0 p-0">'
		. '<ul class="nav nav-tabs">';
		
	while ( preg_match('/&#123;(.*?)&#125;(.*)/s', $tabcode, $bits) )
		{
		$tabname = $bits[1];
		$tabtext = preg_replace('/^<br.*?>/', '', $bits[2]);
		$tabcode = '';
		if (  preg_match('/(.*?)(&#123;.+&#125;.*)/s', $tabtext, $bits) )	// more tabs?
			{
			$tabtext = $bits[1];
			$tabcode = $bits[2];
			}
		// output current tab
		
		// <li class=" nav-item active"><a data-toggle="tab" class="nav-link active show" href="#home">Description</a></li>
		echo '<li class="nav-item'
			. ($panecount == 0 ? ' active">' : '">')
			. '<a data-toggle="tab"'
			. ' class="nav-link' . ($panecount == 0 ? ' active show"' : '"')
			. ' href="#tbpane' . $panecount . '">'
			. $tabname
			. '<a></li>'; // >
		
		// The tab content
		// if tab content starts with H tag, e.g. <h3 class="tabsub"> ... </h3> then use it as sub-heading
		if ( preg_match('/(^\s*<h\d.*?>)(.*?)(<\/h\d>)(.*)/is', $tabtext, $bits) )
			{
			$tabtext = $bits[1] . $bits[2] . $bits[3] . '<p>' . $bits[4] . '</p>';
			}
		// otherwise just use tab name
		else
			{
			$tabtext = '<h3>' . $tabname . '</h3><p>' . $tabtext . '</p>';
			}
		$tabhtml .= '<div id="tbpane' . $panecount .'"'
					.  ' class="tab-pane fade' . ($panecount == 0 ? ' in active show">' : '">')
					.  $tabtext
					.  ($linksinfirsttab ? $sdlinks : '')
					.  '</div>';
		$panecount++;
		}
	echo '</ul>';
	echo $tabhtml . '</div></div>';

	echo '<div class="tabbersuffix">';
	echo ($after != '' ? '<div id="tbafter_<actinic:variable name="EncodedProductAnchor" />" class="tabberafter">' . $after . '</div>' : ''); 				
	if ( ! $linksinfirsttab ) echo $sdlinks;
	echo '</div>';

</actinic:block>
Top
Post Reply

Return to “Tabber V5 jQuery”