Documentation You are here: start » v » 0.6.0 » docs » defaults » foxybox

Table of Contents

About the FoxyBox

Note: What we're calling “FoxyBox” is a slightly modified version of Cody Lindley's Thickbox. Thickbox is amazing, but we modified it to make it easier to use with FoxyCart. (Defaults to iframe display mode. Default height and width. Removed much of the unnecessary code to keep the filesizes smaller. Etc.)

Modifying FoxyBox

Changing the FoxyBox Size

To change the size of your cart, there are two methods.

The Easy Way

0.3.1+

Just add some code to the <head> section of your template, above your foxycart_includes.js call: 

<script type="text/javascript" charset="utf-8">
	fc_tb_WIDTH = 650;
	fc_tb_HEIGHT = 400;
</script>

You can override this with the method below if you really want to.

0.3.0 and earlier

Pass in x:width and/or x:height parameters in your cart links like this (line break added for legibility): 

<a href="http://yourdomain.foxycart.com/cart?
	name=Product&amp;price=9.99&amp;x:width=450&amp;x:height=350">
	Buy Me!
</a>

Or, if you're using a form: 

<form action="http://YOURDOMAIN.foxycart.com/cart" class="foxycart" method="post">
	<input type="hidden" name="name" value="A great product" />
	<input type="hidden" name="price" value="5.00" />
	<input type="hidden" name="x:width" value="450" />
	<input type="hidden" name="x:height" value="350" />
	<input type="submit" value="Buy It Now!" />
</form>

The x: prefix effectively tells the cart to ignore the value. Otherwise it would be added as a product option.

Changing the Loading Image

This is quite easy as well. First you should grab an image from something like ajaxload.info and stick it on your own server. Then define fc_tb_pathToImage in your <head>, before your foxycart_includes.js call: 

<script type="text/javascript" charset="utf-8">
	fc_tb_pathToImage = "http://www.YOURDOMAIN.com/images/loading.gif";
</script>

This could easily be combined with the above to yield something like this: 

<script type="text/javascript" charset="utf-8">
	fc_tb_pathToImage = "http://www.YOURDOMAIN.com/images/loading.gif";
	fc_tb_WIDTH = 800;
	fc_tb_HEIGHT = 100;
</script>

Using FoxyBox with Dynamically Loaded Links

If you're adding a.foxycart elements after the page loads (via AJAX, for example), the new elements won't have the foxybox behavior attached to the onclick event. You can re-add the foxybox actions to your elements by running fc_tb_init('a.foxycart'); after any new elements are added.

Note that if you call fc_tb_init() multiple times it'll load the thickbox multiple times (which is bad and looks weird), you might want to strip the onclick events that get added with each init prior to running the init again. So it'd look like this: 

$j('a.foxycart').unbind('click');
fc_tb_init('a.foxycart');

Using FoxyBox with Image Maps

FoxyBox normally only binds to links and forms. To bind the FoxyBox to image maps, simple add this to your head section, below the calls to foxycart_includes.js and any other FoxyCart javascript you may be calling: 

<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		fc_tb_init('area.foxycart');
	});
</script>

Page Tools

Site Tools