Documentation You are here: start » integration » foxycart » shadowbox_cart

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

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

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: (as of April 6, 2013, mjijackson.com/shadowbox redirects to github). 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

  • A decent handle on javascript, as this isn't feature complete at this point.
  • Patience, as Shadowbox can be temperemental to get set up properly.

Code

See the “Installation” section above.

Page Tools

Site Tools