Currency Converter for each product with show/hide

[graphicz]

Following on from this KB article
http://community.actinic.com/showthread.php?t=45371
I have implemented the XE currency converter to go in a product layout with a 'show/hide' arrangement. It works with more than one product on a page.

<b>NB: Currency conversion is based on EX VAT price.</b><br />
<span 
   id="viewiframe<actinic:variable name="ProductID" />"
   onclick="DoViewIFRAME<actinic:variable name="ProductID" />('viewiframe<actinic:variable name="ProductID" />','hideiframe<actinic:variable name="ProductID" />','aniframeupstart<actinic:variable name="ProductID" />');" 
   style="line-height: 16px; 
      font-size: 14px; 
      font-weight: bold; 
      font-family: sans-serif; 
      color: brown; 
      background-color: LightBlue;">
<nobr>[View Currency Converter]</nobr>
</span>
<span 
   id="hideiframe<actinic:variable name="ProductID" />" 
   onclick="DoHideIFRAME<actinic:variable name="ProductID" />('hideiframe<actinic:variable name="ProductID" />','aniframeupstart<actinic:variable name="ProductID" />','viewiframe<actinic:variable name="ProductID" />');" 
   style="display: none; 
      line-height: 16px; 
      font-size: 14px; 
      font-weight: bold; 
      font-family: sans-serif; 
      background-color: DarkBlue; 
      color: gold;">
<nobr>[Hide Currency Converter]</nobr>
</span>
<div id="aniframeupstart<actinic:variable name="ProductID" />" align="center" style="display: none;">
<iframe src="http://www.xe.com/pca/input.php?Amount=<actinic:variable name="ProductPriceRaw" />&From=GBP&ToSelect=USD" width="620" height="200" name="Currency" frameborder="0" scrolling="no"></iframe>
</div>

	<script type="text/javascript" language="JavaScript"><!--
function DoViewIFRAME<actinic:variable name="ProductID" />(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "";
document.getElementById(tid3).style.display = "";
}
function DoHideIFRAME<actinic:variable name="ProductID" />(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "none";
document.getElementById(tid3).style.display = "";
}
//--></script>

It throws up an error in preview I guess because of the <actinic:variable name="ProductID" /> in the javascript. When uploaded this becomes just a number of course. Perhaps wrap the javascript in a "IsPreviewMode == False" Blockif.

Posted without any warranty or assurance just in case anyone else finds it useful.

[NormanRouxel]

You can get it to work on the VAT inclusive prices by replacing:

<iframe src="http://www.xe.com/pca/input.php?Amount=<actinic:variable name="ProductPriceRaw" />&From=GBP&ToSelect=USD" width="620" height="200" name="Currency" frameborder="0" scrolling="no"></iframe>

With:

<iframe src="http://www.xe.com/pca/input.php?Amount=<actinic:block type="PriceList"><actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201"><actinic:variable name="TaxInclusivePrice" selectable="false" /></actinic:block></actinic:block>&From=GBP&ToSelect=USD" width="620" height="200" name="Currency" frameborder="0" scrolling="no"></iframe>

[NormanRouxel]

Note that the code in post #1 will not work if you have Product ID's that contain characters that are invalid in JavaScript function names. E.g. "ABC/123".

A quick fix would be to replace all ProductID with EncodedProductAnchor as this is unique per products and never contains special characters other than underscore.

[graphicz]

Thanks Norman - excellent as always

Support couldnt come uo with a tax inclusive variable so thanks for that.

I initially used Product reference but as you say, any full stops etc stopped the javascript working. Support suggested that ProductID was Actinic generated and was numerical only.

EncodedProductAnchor sounds ideal.

[NormanRouxel]

ProductID is only numerical on sites using Auto Generate Product IDs. It contains whatever the customer chooses (with some limitations) otherwise.

Here's how I'd implement it with efficiency in mind:

Put the following into the bottom of layout "Standard JavaScript Header Functions".

<script type="text/javascript" language="JavaScript">
<!--
	function DoViewIFRAME(anc) {
		document.getElementById('viewiframe' + anc).style.display = "none";
		document.getElementById('hideiframe' + anc).style.display = "";
		document.getElementById('aniframeupstart' + anc).style.display = "";
	}
	function DoHideIFRAME(anc) {
		document.getElementById('viewiframe' + anc).style.display = "";
		document.getElementById('hideiframe' + anc).style.display = "none";
		document.getElementById('aniframeupstart' + anc).style.display = "none";
	}
//-->
</script>

Put the following into the bottom of the Actinic StyleSheet:

.showxen{
	line-height: 16px; 
	font-size: 14px; 
	font-weight: bold; 
	font-family: sans-serif; 
	color: brown; 
	background-color: LightBlue;
	}

.hidexen{
	line-height: 16px; 
	font-size: 14px; 
	font-weight: bold; 
	font-family: sans-serif; 
	color: gold;
	background-color: DarkBlue; 
}

Put this into your Product Layouts:

<b>NB: Currency conversion is based on EX VAT price.</b><br />
<span class="showxen" id="viewiframe<actinic:variable name="EncodedProductAnchor" />" onclick="DoViewIFRAME('<actinic:variable name="EncodedProductAnchor" selectable="false" />');">
	<nobr>[View Currency Converter]</nobr>
</span>
<span class="hidexen" id="hideiframe<actinic:variable name="EncodedProductAnchor" />"  style="display: none;" onclick="DoHideIFRAME('<actinic:variable name="EncodedProductAnchor" selectable="false" />');">
	<nobr>[Hide Currency Converter]</nobr>
</span>
<div id="aniframeupstart<actinic:variable name="EncodedProductAnchor" />" align="center" style="display: none;">
	<iframe src="http://www.xe.com/pca/input.php?Amount=<actinic:variable name="ProductPriceRaw" />&From=GBP&ToSelect=USD" width="620" height="200" name="Currency" frameborder="0" scrolling="no"></iframe>
</div>

The above is for VAT exclusive prices. See my post #2 to use VAT inclusive.

[graphicz]

Thank you for tidying that up so nicely Norman, and for the time you have taken.