Integrating RTD into your website - with a Volusion-based live example

Often, when you already have a website, you have to face the problem of launching the RTD designer.
There are many ways to do so, but sometimes you may be limited also by the system you're using to manage your website itself.

Recently I've helped a user to do a better integration into his website, based on Volusion.
The little piece of code I wrote works nice, and could be used everywhere you can place HTML code.
In the Volusion case, I 've added the code into product description (INVENTORY => PRODUCTS).
However, the code is quite flexible and standalone: this means it could be used also in other systems (like Magento, Joomla, etc...) as well as into a compeltely custom made website.
All you need is the link to the RTD you want to launch, may it be a template or a blank designer.

For this reason I decided to post that code snippet in here.
Also, the user gave me permission of linking his website, so that you can see LIVE how it works and integrates.

To see it in action, go here:
asmartblonde design online

Click any of the products in that page.
The big green Launch Online Designer button and the RTD loaded after clicking it is what my code does.

And here's the code itslef.

<div id='rtd_frame_container'>
	<center>
		<a href="#" OnClick="CloseRTD();" class="rtd_cmdbuttons">Close Online Designer</a>
	</center>
	<iframe allowTransparency='true' id='rtd_frame' scrolling='auto' frameborder='0' marginwidth='0' marginheight='0'></iframe>";
</div>

<center><br>
	<a href="#" OnClick="LauchRTD('http://designer.realtimedesigner.com/YourRtdLink');" class="rtd_cmdbuttons">Launch Online Designer</a>
</center>

<style>
	#rtd_frame_container {
		position: fixed;
		top: 2%;
		left: 0;
		width: 100%;
		height: 90%;
		background-color: transparent;
		display: none;
		text-align: center;
	}
	#rtd_frame {
		margin: 12px 0 0;
		padding: 0;
		width: 1120px;
		height: 100%;
		border: 1px solid black;
		background-color: #DFEFFF;
	}
	.rtd_cmdbuttons {
		background-color:#09ad4a;
		-moz-border-radius:20px;
		-webkit-border-radius:20px;
		border-radius:20px;
		border:1px solid #dcdcdc;
		color:#ffffff;
		font-family:Verdana;
		font-size:30px;
		font-weight:bold;
		padding:6px 76px;
		text-decoration:none;
	}.rtd_cmdbuttons:hover {
		background-color:#1bcc00;
	}.rtd_cmdbuttons:active {
		position:relative;
		top:1px;
	}

</style>
<script>
function LauchRTD(rtdlink) {
	window.location.href='#';
	document.getElementById('rtd_frame_container').style.display='block';
	document.getElementById('rtd_frame').src=rtdlink;
}
function CloseRTD() {
	window.location.href='#';
	document.getElementById('rtd_frame_container').style.display='none';
	document.getElementById('rtd_frame').src='';
}
</script>

All you need to change to use it "as is" is the designer.realtimedesigner.com/etc... string to your own URL.
The code will first display only the Launch Online Designer button.
When clicked, it will make a big Iframe visible by loading your RTD url in it.
Also, it will show above the designer another button to close the designer.

That's it!

Update.

Asmartblonde found some issues because of its specific implementation in Volusion (and, obviously, some IE related bugs...)
So, there's a 2nd version of the code that works slightly different.
The 1st code simulates a sort of popup that colvers the entire design area. This 2nd one display the designer right below the LAUNCH button, but placing it absolutely to grant all the needed horizontal space.

To see it in action, refer to the same link posted in the 1st post. Now it's using this 2nd version.
And finally, here it is:

<center><br>
	<div id='rtd_openbutton' style='display:block'><a OnClick="LauchRTD('http://designer.realtimedesigner.com/YourRtdLink');" class="rtd_cmdbuttons">Launch Online Designer</a></div>
	<div id='rtd_closebutton' style='display:none'><a href="#" OnClick="CloseRTD();" class="rtd_cmdbuttons">Close Online Designer</a></div>
</center>
<div id='rtd_placefinder'></div>
<div id='rtd_frame_container'><br>
	<iframe allowTransparency='true' id='rtd_frame' scrolling='auto' frameborder='0' marginwidth='0' marginheight='0'></iframe>";
</div>

<style>
	#rtd_frame_container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1600px;
		background-color: transparent;
		display: none;
		text-align: center;
	}
	#rtd_frame {
		margin: 12px 0 0;
		padding: 0;
		width: 1120px;
		height: 100%;
		border: 1px solid black;
		background-color: #DFEFFF;
	}
	.rtd_cmdbuttons {
		background-color:#09ad4a;
		-moz-border-radius:20px;
		-webkit-border-radius:20px;
		border-radius:20px;
		border:1px solid #dcdcdc;
		color:#ffffff;
		font-family:Verdana;
		font-size:30px;
		font-weight:bold;
		padding:6px 76px;
		text-decoration:none;
		cursor: pointer;
	}.rtd_cmdbuttons:hover {
		background-color:#1bcc00;
	}.rtd_cmdbuttons:active {
		position:relative;
		top:1px;
	}

</style>
<script>
function LauchRTD(rtdlink) {
	document.getElementById('rtd_frame_container').style.display='block';
	document.getElementById('rtd_frame').src=rtdlink;
	
	var initcoords=findPosRTD(document.getElementById('rtd_placefinder'));
	document.getElementById('rtd_frame_container').style.top=initcoords[1]+'px';
	
	document.getElementById('rtd_openbutton').style.display='none';
	document.getElementById('rtd_closebutton').style.display='block';
}
function CloseRTD() {
	document.getElementById('rtd_frame_container').style.display='none';
	document.getElementById('rtd_frame').src='';
	document.getElementById('rtd_openbutton').style.display='block';
	document.getElementById('rtd_closebutton').style.display='none';
}
function findPosRTD(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}
</script>

Very useful indeed using the Stores feature. See lots of possibilities here. Good work.

Any chance you might be able to retain the contents if this iframe is closed and reopened? That would be incredibly good.

Easy task, you need to just change 2 lines in my latest code.
Just replace the function LauchRTD and function CloseRTD blocks with this:

function LauchRTD(rtdlink) {
	document.getElementById('rtd_frame_container').style.display='block';
	if (document.getElementById('rtd_frame').src!=rtdlink) document.getElementById('rtd_frame').src=rtdlink;
	
	var initcoords=findPosRTD(document.getElementById('rtd_placefinder'));
	document.getElementById('rtd_frame_container').style.top=initcoords[1]+'px';
	
	document.getElementById('rtd_openbutton').style.display='none';
	document.getElementById('rtd_closebutton').style.display='block';
}
function CloseRTD() {
	document.getElementById('rtd_frame_container').style.display='none';
	document.getElementById('rtd_openbutton').style.display='block';
	document.getElementById('rtd_closebutton').style.display='none';
}

Cool. Works. Actually using the 1st code (not in Volusion). I've tried modifying it logically, but not success. Can you put that into the first method?

There's lot's of potential here for many uses.

Even for 1st method, you should only replace the same functions.
The new code:

function LauchRTD(rtdlink) {
	window.location.href='#';
	document.getElementById('rtd_frame_container').style.display='block';
	if (document.getElementById('rtd_frame').src!=rtdlink) document.getElementById('rtd_frame').src=rtdlink;
}
function CloseRTD() {
	window.location.href='#';
	document.getElementById('rtd_frame_container').style.display='none';
}

Basically, it's only about removing from CloseRTD the document.getElementById('rtd_frame').src=''; line (to prevent iframe source from being changed) and add to LauchRTD the if (document.getElementById('rtd_frame').src!=rtdlink) statement to the line loading the designer (simply, if link is the same, just turn it visible. No reload)

Ah thanks. Almost had it right. Didn't remove the last line before the close.

Time to have some fun with this.