type:
integration
supports-foxycart-version-from:
0.3.2
supports-foxycart-version-to:
0.6.0
system:
Flash, Actionscript
name:
Loading the Thickbox (Foxybox) from Flash
description:
How to load the Foxybox from a Flash movie (using Actionscript) for easy Flash ecommerce
tag:
thickbox, foxybox
date:
2008-08-11
developer:
http://www.mediajar.com/

Loading Thickbox from Flash

Please note: The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please post in our forum, but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance.

Description

This page applies for FoxyCart v0.6.0 and previous.

If you'd like to use FoxyCart with your Flash site and you'd like to use the default Thickbox (aka “Foxybox”) behavior, you'll need some actionscript.

Installation

Copy and modify the actionscript below. It is commented so you can hopefully learn what's going on and modify if you need.

This blog entry might also help, and this code is based on that method. Please note that FoxyCart uses a modified version of Thickbox, and all tb_ functions are renamed fc_tb_, so tb_show() would become fc_tb_show() in the default foxycart_includes.js file you're likely using.

If you can improve this page, please feel free to do so.

Requirements

  • Flash + actionscript skills
  • Patience to play around with this

Code

/**
* "Buy" or "add to cart" button handler - called when buy button is clicked.
*
* This function uses the built in "ExternalInterface" class (see flash help) to allow Flash to communicate back and forth
* between the browser using the prebuilt Foxycart javascript libraries:
*   https://www.foxycart.com/v/0.3.2/raw/foxycart.js
*   https://www.foxycart.com/v/0.3.2/raw/foxybox.js
*
* Understanding the "ExternalInterface" class and knowing what's going on in the foxycart javascript
* libraries is essential for understanding what this function is doing.
*/
 
// must first import ExternalInterface class
import flash.external.ExternalInterface;
 
// variable to hold the unique product code used to populate the "Code" property of the Foxycartt
var combinedCode = "<set via some function>";
 
clickBuyButtonListener.click = function(eventObject:Object):Void  {
	trace(combinedCode); // checking to see that combinedCode variable has been set from other functions
 
	// Get the product name from the interface -
	// In this case it the text in a dynamic text field with the instance name "heading_txt"
	// inside a movie clip with the instance name "data_mc"
	var prodName:String = data_mc.heading_txt.text;
 
	// Get the user selected color attribute from the interfaces color comboBox
	var prodColor:String = data_mc.colorCombo.text;
 
	// get the user selected size attribute from the interfaces size comboBox
	var prodSize:String = data_mc.sizeCombo.text;
 
	// Go get a sessionID by calling "fc_AddSession()" from foxycart.js
	// This overcomes Safari's method of handling 3rd-party cookies which prevented the cart to update correctly
	// Foxycart team wrote this function specifically to address this issue (more info on the foxycart wiki)
	var fc_sessionID:String = String(ExternalInterface.call("fc_AddSession"));// the String(ExternalInterface...)) is to case the return value as a string
 
	// custom function that resets the intercace after the buybutton is clicked
	resetAfterBuyBtnClick();
 
	// Now, need to hide flash elements on the page before the thickbox shopping cart is called.  This is because
	// Thickbox does not play nice with Flash elements and they conflict, causing flickering, etc.
	// So, call the prepared "fc_PreProcess" javascript function following the instruction on the Foxycart Wiki here:
	// http://wiki.foxycart.com/integration:flash:hiding_flash_on_page_overlay
	// Note, here the built in Flash "ExternalInterface" class.  See the Flash help for more info
	ExternalInterface.call("fc_PreProcess");
 
	// Armed with a session ID, call "fc_tb_show" from foxybox.js (using Flash's "ExternalInterface" class)
	// note: It's a good ideo to actually take a look at this function in the Foxycart javascript libraries
	// The applicable libraries can be viewed here (note version may change - at the time of this writing version is 0.3.2 )
	//   https://www.foxycart.com/v/0.3.2/raw/foxycart.js
	//   https://www.foxycart.com/v/0.3.2/raw/foxybox.js
	ExternalInterface.call("fc_tb_show",null,foxycartLink+"name="+prodName+"&amp;price="+prodPrice+"&amp;color="+prodColor+"&amp;size="+prodSize+"&amp;code="+combinedCode+"&amp;category="+fc_sessionID,false);
};

Site Tools