To combine Tabber and Related Products Upsell.

Post by **norman** » Mon Mar 26, 2012 10:30 pm

This tweak is tested with Tabber V3 and Related Products Upsell V3.

To combine Tabber and Related Products Upsell.

If you use Related Products Upsell and want tabbed descriptions on the Upsell Popup products do the following:

Install both Tabber and Related Products Upsell (in any order).

Check that both work.

Go to Design / Library / Layouts / Upsell Popup / Upsell Popup.

Replace all code in that layout with the code below then OK out and that's it done:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title><actinic:variable name="PageTitle" /></title>
   <actinic:variable name="BaseHref" />
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta name="keywords" content="Keywords" />
   <meta name="description" content="Description" />
   <link href="actinic.css" rel="stylesheet" type="text/css">
   <script language="javascript" type="text/javascript" src="actiniccore.js"></script>
   <script language="javascript" type="text/javascript" src="actinicextras.js"></script>
 
<!-- Start Upsell Customisation -->  
   <script type="text/javascript">
   function testopener(){
   if (window.name == 'RelatedPopup')	// Upsell in a popup window
		{
		if( opener )
			{
			if (! opener.bPageIsLoaded)
				{
				opener.location.reload(true);
				}
			}
		}
	else											// Upsell in a Greybox 
		{
		if( ! top.window )
			{
			alert('Cannot locate product page. Make sure the original product page is being displayed and try again.'); 
			}
		}
	// amend referrer if b2b user
	var inps = document.getElementsByTagName('input');
	for (var i=0; i<inps.length; i++)
		{
		if ( inps[i].name == 'ACTINIC_REFERRER' )
			{
			inps[i].value = inps[i].value.replace(/(PRODUCTPAGE=).*/, '$1<actinic:variable name="SectionPageName" encoding="perl" selectable="false"/>')
			}
		}
    }
   
   function testpopup(){
   if (window.name == 'RelatedPopup')	// Upsell in a popup window
		{
		if( opener )
			{
			setTimeout('window.close()',1000);
			return true;
			}
		else
			{
			alert('Cannot locate product page. Make sure the original product page is being displayed and try again.');
			setTimeout('window.close()',1000);
			return false;
			}
		}
	else											// Upsell in a Greybox 
		{
		if( top.window )
			{
			setTimeout('window.close()',1000);
			return true;
			}
		else
			{
			alert('Cannot locate product page. Make sure the original product page is being displayed and try again.');
			setTimeout('window.close()',1000);
			return false;
			}
		}
   }
   
   function searchhighlight(){	// deal with popup called from search highlighted page
   if (window.name == 'RelatedPopup')	// Upsell in a popup window
		{
		if( opener )
			{
			if ( opener.location.href.match(/sh<actinic:variable name="CGIScriptIDText" /><actinic:variable name="CGIScriptExtension" />/) )	// if highlighted search results
				{
				document.write('<input type="hidden" name="ACTINIC_REFERRER" value="<actinic:variable name="CatalogURL" /><actinic:variable name="SectionPageName" encoding="perl" selectable="false"/>">');
				}
			}
		}	
	}
   </script>
<!-- End Upsell Customisation -->  

	<actinic:variable name="TabberSetup" />

</head>

<body style="background-image:none; background-color:#ffffff;" onload="testopener();">

<!-- Start Upsell Customisation -->  
<form
			method="post" 
			action="<actinic:variable name="OnlineScriptURL" value="Shopping Cart Script URL" />"
			target="<actinic:variable name="SectionPageName" encoding="perl" selectable="false" />"
			onsubmit="return testpopup();"
> 
<!-- End Upsell Customisation -->  

         <input type="hidden" name="SID" value="<Actinic:Variable Name="SectionID"/>" />
         <input type="hidden" name="PAGE" value="PRODUCT" />           
         <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
         <Actinic:SECTION BLOB='<Actinic:Variable Name="SectionCatFile"/>'/>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
            <!-- Hidden field when in trial mode -->
            <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
         </actinic:block>

   <script type="text/javascript">searchhighlight();</script>
   
<table width="100%" cellspacing="0" cellpadding="10" border="0">
   <tr>
      <td width="25%" align="center" valign="top">
			<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
				<img src="<actinic:variable name="ProductImageFileName" />"
					border="0"
					width="<actinic:variable name="ProductImageWidth" />"
					height="<actinic:variable name="ProductImageHeight" />"
					alt="<actinic:variable name="ProductName" encoding="strip"/>" />
			</actinic:block>
			<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
				<img src="<actinic:variable name="DefaultProductImage" />"
					border="0"
					alt="<actinic:variable name="ProductName" encoding="strip"/>" />
			</actinic:block>
      </td>
      <td width="75%" valign="top">
         <a name="<Actinic:Variable Name="EncodedProductAnchor"/>">
         <b><Actinic:Variable Name="ProductName"/></b></a>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
            Ref: <actinic:variable Name="ProductReference" />
         </actinic:block>
         
         <br />         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e">
            <a href="<Actinic:Variable Name="ProductLinkInfo"/>">
               <Actinic:Variable Name="ProductLinkText"/>
            </a>
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e">
            <br />
            <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable Name="ProductID" />" COMPONENTID=-1><Actinic:Variable Name="RetailCustomerMessage"/></Actinic:PRICE_EXPLANATION>
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e">
				<b>
				<Actinic:PRICES PROD_REF="<actinic:variable Name="ProductID" />" RETAIL_PRICE_PROMPT="<Actinic:Variable Name="ProductPriceDescription"/>">
            <actinic:variable name="PriceListRetail" />
            </Actinic:PRICES>
            </b>
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e">      
            <br /><actinic:variable name="DiscountList" value="Standard Discount List" />
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e">
            <br />
            <span class="actrequired"><Actinic:Variable Name="OtherInfoPrompt"/></span><br />
            <input type="text" name="O_<actinic:variable Name="ProductID"/>" size="40" maxlength="1000" value="" />
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e">
            <br />
            <span class="actrequired"><actinic:variable name="DatePrompt"/></span><br />
            <actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" />
         </actinic:block>
         
         <actinic:variable name="AttributeList" />
         <actinic:variable name="ComponentList" />
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e">
            <br />
            <span class="actrequired"><Actinic:Variable Name="QuantityPrompt"/></span>
            &nbsp;
            <input type="text" name="Q_<actinic:variable Name="ProductID"/>" size="4" value="<Actinic:Variable Name="DefaultQuantity"/>" />
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e">
            <input type="hidden" name="Q_<actinic:variable Name="ProductID"/>"  value="<actinic:variable name="DefaultQuantity"/>" />
         </actinic:block>

         <br /><actinic:variable name="CartError" />

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e">
            <br /><actinic:variable name="AddToCartButton" />
         </actinic:block>

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e">
            <br /><br /><strong><span class="actrequired"><br /><Actinic:Variable Name="OutOfStock"/></span></strong>
         </actinic:block>

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e">
            <br /><br /><strong><span class="actrequired"><Actinic:Variable Name="CatalogSuspended"/></span></strong>
         </actinic:block>
         
      </td>
   </tr>
   <tr>
		<td colspan="2">
			<actinic:variable name="TabbedDescription" value="TabbedProductDescription" />
		</td>
	</tr>
</table>
</form>
</body>
</html>

leej · Post by **leej** » Mon Sep 19, 2016 9:43 am

Morning Norman,
In relation to this article I've recently upgraded a clients site and tabber to V16. Upon testing the site on a development server the tabber works fine on the product pages. When I click on the related products the page appears however the tabber functionality doesn't activate.

The Upsell plugin hasn't been upgraded as it looked as if was working fine within V16.

You can view the development site via : http://thefluffyclouds.co.uk/acatalog/F ... matic.html

Any help, as always is appreciated.
Regards.
Lee.

****UPDATE***
I've just checked Firebug and the it looks like tabber isn't activating due to an issue within the tabberv5support.js file:

Code: Select all

ReferenceError: HideLoadingDialog is not defined
var dp_tabber_HideLoadingDialog = HideLoadingDialog;

Post by **norman** » Mon Sep 19, 2016 6:00 pm

Upsell for SD 2016 and Tabber V5 will work together. You don't need to replace any layouts. Just edit layout Upsell Popup and after the line:

Code: Select all

<!-- END Reduced Javascript Header Functions -->

Add a single line:

Code: Select all

<actinic:variable name="TabberSetup" />

Upsell for an earlier SellerDeck won't have all the required code to integrate properly with Tabber (or SD 2016 for that matter). Upgrading it is recommended and I can't support add-ons that are being used on versions of SD they are not designed for.

A p.s. I noticed that the tab header background panel was a bit skew. Adding this line into layout Upsell Popup just above TabberSetup seems to fix it:

Code: Select all

<style>.ui-tabs .ui-tabs-nav {padding: 0;}</style>

leej · Post by **leej** » Wed Sep 21, 2016 10:00 am

Hi Norman,
I've implemented the updated version of the Up-seller and have followed the instructions that you gave in your earlier post. Unfortunately the same error is occurring which is preventing the tabber from displaying.

I've kept to the original layout with no customization apart form putting the Tabber setup within the popup page.

If you check the previous link you will see the updated site. Any help and assistance, as always, is greatly appreciated.

Post by **norman** » Wed Sep 21, 2016 1:33 pm

You've put the Tabber Setup line in the wrong place. Place it as per my previous post.

Drillpine.Biz Support Forum

To combine Tabber and Related Products Upsell.

To combine Tabber and Related Products Upsell.

Re: To combine Tabber and Related Products Upsell.

Re: To combine Tabber and Related Products Upsell.

Re: To combine Tabber and Related Products Upsell.

Re: To combine Tabber and Related Products Upsell.