Table of Contents
type:
integration
system:
FoxyCart
name:
shadowbox_cart
description:
Uses Michael J. I. Jackson's Shadowbox cross-browser, cross-platform javascript media viewer / modal window script to display the FoxyCart cart.
tags:
cart
date:
2008-03-19
version:
0.1
developer:
http://www.themancan.com/

shadowbox

Description

Uses Shadowbox to display the FoxyCart cart, rather than the default modified Thickbox.

Shadowbox is pretty slick, and can be used instead of the default Thickbox based FoxyBox quite easily. PLEASE DON'T USE THIS unless you have a decent handle on javascript and are willing to try something that's currently unsupported and feature incomplete. It DOES NOT WORK WITH FORMS, only links at this point.

Installation

NOTE: Below describes how to apply Shadowbox for LINKS but not forms.

  1. First, make sure you remove any foxybox.css or theme.foxybox.css files you might have called in your <head> section.
  2. Download Shadowbox: http://mjijackson.com/shadowbox/. Stick it somewhere on your server that makes sense, like /assets/js/shadowbox/
  3. Add the necessary Shadowbox file calls to your <head> section, probably something like this: 
    	<link rel="stylesheet" type="text/css" href="shadowbox/build/css/shadowbox.css" />
	<script src="shadowbox/build/js/adapter/shadowbox-jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="shadowbox/build/js/shadowbox.js" type="text/javascript" charset="utf-8"></script>
  4. Next let's add a script tag to the <head> section, below your foxycart_includes.js call. Make sure you read the comments so you know what's going on: 
    <script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		// Un-bind the onclick action, which is part of the foxycart_includes.js file by default.
		// You can set the width and height of the shadowbox here.
		$j('a.foxycart').unbind('click').attr('rel','shadowbox;height=400;width=560');
		// Shadowbox seems to set the href when it's initialized, so we'll need to append
		// session IDs to all .foxycart links prior to initializing it.
		// This only happens if cookies are accepted but 3rd party cookies are denied.
		if (typeof(fc_CookieFix) == "function") { 
			fc_CookieFix();
		}
		// Initialize Shadowbox
		Shadowbox.init();
	});
</script>
  5. If you're in the habit of assigning astronomical z-index values, you may want to throw in an override after that: 
    <style type="text/css" media="screen">
	#shadowbox_overlay {
	  z-index: 998000;
	}
	#shadowbox_container {
	  z-index: 999000;
	}
</style>
  6. Test. If the loading image isn't showing up, you'll need to add an option to the init(), something like this:
      var options = {
      loadingImage:     '/path/to/your/shadowbox/images/loading.gif'
  };
  Shadowbox.init(options);

Requirements

Code

See the “Installation” section above.