Floating shopping cart for EDD from 2012

functions.php

<?php
/**
 * Checkout button.
 */
function themeblvd_checkout_button(){
	
	global $edd_options;
	
	return '<a href="' . get_permalink( $edd_options['purchase_page'] ) . '" class="checkout"><span class="inner">Checkout<i class="icon-shopping-cart"></i></span></a>';

}

/**
 * Add primary item to cart (Ajax).
 */
function themeblvd_ajax_add_to_cart() {
	
	if ( isset($_POST['download_id']) && check_ajax_referer( 'edd_ajax_nonce', 'nonce' ) ) {
		
		global $post;
		
		if( ! edd_item_in_cart( $_POST['download_id'] ) ) {
			
			$options = is_numeric( $_POST['price_id'] ) ? array( 'price_id' => $_POST['price_id'] ) : array();
			
			$key = edd_add_to_cart( $_POST['download_id'], $options );
			
			echo themeblvd_checkout_button();
			
			echo '[(=>)]';
			
			echo edd_get_cart_quantity();
			
			echo '[(=>)]';
			
			echo themeblvd_floating_cart( $_POST['current'] );
	
		} else {
	
			echo 'incart';
	
		}
	
	}
	
	die();

}
add_action( 'wp_ajax_themeblvd_add_to_cart', 'themeblvd_ajax_add_to_cart' );
add_action( 'wp_ajax_nopriv_themeblvd_add_to_cart', 'themeblvd_ajax_add_to_cart' );

/**
 * Floating Shopping cart
 *
 * @param string $current_page Current page's URL
 */
function themeblvd_floating_cart( $current_page ) {
	
	global $post;
	
	global $edd_options;
	
	$cart_items = edd_get_cart_contents();
	
	if( $cart_items ) {
	
		$output .= '<ul>';
	
		foreach( $cart_items as $key => $item ) {
	
			$remove_url = add_query_arg( array('cart_item' => $key, 'edd_action' => 'remove' ), $current_page );
	
			$output .= '<li>';
	
			$output .= '<span class="item-title">'.get_the_title( $item['id'] ).'</span>';
	
			$output .= '<span class="item-price">'.edd_currency_filter( edd_get_cart_item_price( $item['id'], $item['options'] ) ).'</span>';
	
			$output .= '<a href="'.$remove_url.'" title="Remove item from cart" class="remove"><i class="icon-remove-sign"></i></a>';
	
			$output .= '</li>';
	
		}
	
		$output .= '<li class="floater-total"><span>Total: ' . edd_currency_filter( edd_format_amount( edd_get_cart_amount() ) ) . '</span><a href="' . get_permalink( $edd_options['purchase_page'] ) . '" class="checkout">Checkout</a></li>';
	
		$output .= '</ul>';
	
	} else {
	
		$output .= '<p class="note">Your shopping cart is empty.</p>';
	}
	
	return $output;

}

header.php

// somewhere within header.php ...

?>
<ul class="user-menu">
    <li>
        
        <!-- Button to open the floating shopping cart. -->
        <a href="<?php echo get_permalink( $edd_options['purchase_page'] ); ?>" class="floater-trigger button" id="my-cart">
            <i class="icon-shopping-cart"></i> My Cart (<span class="cart-num"><?php echo edd_get_cart_quantity(); ?></span>)
        </a>
        
        <!-- Floating shopping cart, initially hidden. -->
        <div id="floating-cart" class="floater">

          <div class="floater-inner">

            <span class="pointer"><i class="icon-sort-up"></i></span>

            <div class="floater-head">

              <span>Shopping Cart</span>

              <a href="#" title="Hide shopping cart" class="close-floater">
                <i class="icon-remove-circle"></i>
              </a>

            </div>

            <div class="ajax-mitt"><?php echo themeblvd_floating_cart( edd_get_current_page_url() ); ?></div>

          </div>

        </div><!-- #floating-cart (end) -->
    </li>
    <!-- Other menu items probably ... -->
</ul>

<?php
// Add to cart button needs to go somewhere in site...

// This ".buy-jumpstart" button is what triggers JavaScript
// to add this specific item to the cart and update the
// floating cart.

// In this specific case, when Jump Start was added to the cart,
// since it's the only product on the site, the checkout button
// will display instead.

if ( edd_get_cart_quantity() ) :

    echo themeblvd_checkout_button();

else :

    $jumpstart_id = 123; // EDD product ID of item being added to cart.

    ?>
    <a href="#" class="buy-jumpstart" data-id="<?php echo $jumpstart_id; ?>" data-nonce="<?php echo wp_create_nonce( 'edd_ajax_nonce' ); ?>" data-current="<?php echo edd_get_current_page_url(); ?>">
        <span class="inner">
            Buy Jump Start <em>$65</em>
            <span class="loader"></span>
        </span>
    </a>
    <?php
endif;

style.css

/* Floaters (general) */
.floater {
	background-color: #f5f5f5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f3fdfd), to(#ece8e8));
	background-image: -webkit-linear-gradient(top, #f3fdfd, #ece8e8);
	background-image: -moz-linear-gradient(top, #f3fdfd, #ece8e8);
	background-image: -o-linear-gradient(top, #f3fdfd, #ece8e8);
	background-image: -ms-linear-gradient(top, #f3fdfd, #ece8e8);
	background-image: linear-gradient(top, #f3fdfd, #ece8e8);
	border-top: 5px solid #FFC525;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-box-shadow: 5px 5px 5px #000;
	-webkit-box-shadow: 5px 5px 5px #000;
	box-shadow:0 0 5px #000, inset 0 -1px 2px #ffffff;
	color: #555555;
	display: none;
	position: absolute;
	top: 26px; /* Animate to top: 31px; */
	right: 0;
	width: 250px;
}
.floater .floater-inner {
	border: 1px solid #0C233A;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	margin: 0 -1px;
	padding: 15px;
}
.floater .pointer {
	color: #FFC525;
	font-size: 18px;
	position: absolute;
	top: -9px;
	right: 5px;
}
.floater .floater-head {
	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dbdbdb));
	background-image: -webkit-linear-gradient(top, #ffffff, #dbdbdb);
	background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
	background-image: -o-linear-gradient(top, #ffffff, #dbdbdb);
	background-image: -ms-linear-gradient(top, #ffffff, #dbdbdb);
	background-image: linear-gradient(top, #ffffff, #dbdbdb);
	border-bottom: 1px solid #cccccc;
	font-family: "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;
	font-weight: bold;
	margin: -15px -15px 15px -15px;
	padding: 5px 10px;
	text-shadow: 1px 1px 0 #f7f7f7;
}
.floater .floater-head span {
	line-height: 20px;
}
.floater .close-floater {
	color: #666666;
	float: right;
	font-size: 20px;
	margin: 3px -5px 0 0;
}
.floater .close-floater:hover {
	color: #000000;
}

/* Floating Shopping Cart */
#floating-cart .edd-cart-item-title {
	display: block;
	font-size: 13px;
	font-weight: bold;
}
#floating-cart .edd-cart-item-separator {
	display: none;
}
#floating-cart .note {
	text-align: center;
	color: #444444;
	font-size: 12px;
	font-style: italic;
}
#floating-cart li {
	border-top: 1px solid #dddddd;
	float: none;
	padding: 5px;
}
#floating-cart .remove {
	float: right;
	font-size: 16px;
	color: #666666;
	margin-top: 2px;
}
#floating-cart .remove:hover {
	color: #000000;
}
#floating-cart .item-title {
	margin-right: 5px;
}
#floating-cart .item-price {
	color: #999999;
	font-style: italic;	
}
#floating-cart .floater-total span {
	font-weight: bold;
	display: inline-block;
	padding: 3px 0;
}
#floating-cart .checkout {
	background-color: #4e8ac6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4e8ac6), to(#244c81));
	background-image: -webkit-linear-gradient(top, #4e8ac6, #244c81);
	background-image: -moz-linear-gradient(top, #4e8ac6, #244c81);
	background-image: -o-linear-gradient(top, #4e8ac6, #244c81);
	background-image: -ms-linear-gradient(top, #4e8ac6, #244c81);
	background-image: linear-gradient(top, #4e8ac6, #244c81);
	border: 1px solid #132b41;
	-moz-border-radius: 99px; 
	-webkit-border-radius: 99px; 
	border-radius: 4px;
	color: #ffffff;
	display: inline-block;
	float: right;
	font-family: "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 100%;
	padding: 5px 10px;
	text-shadow: 1px 1px 0 #132b41;
}
#floating-cart .checkout:hover {
	background-color: #579adc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#579adc), to(#2d5fa0));
	background-image: -webkit-linear-gradient(top, #579adc, #2d5fa0);
	background-image: -moz-linear-gradient(top, #579adc, #2d5fa0);
	background-image: -o-linear-gradient(top, #579adc, #2d5fa0);
	background-image: -ms-linear-gradient(top, #579adc, #2d5fa0);
	background-image: linear-gradient(top, #579adc, #2d5fa0);
}

/* Click Protect */
.click-protect { /* Gets appended to add to cart button temporarily via JavaScript When buy button is clicked */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
}

/* Loader -- Used on add-to-cart button, when ajax is happening. */
.loader {
	background: #103156 url('../images/loader.gif') center center no-repeat;
	background-size: 16px 16px;
	border: 1px solid #112c49;
	-moz-border-radius: 99px; 
	-webkit-border-radius: 99px; 
	border-radius: 99px;
	display: none; /* Fades in via JS */
	position: absolute;
	top: 4px;
	right: 8px;
	text-indent: -9999px;
	width: 20px;
	height: 20px;
}

theme.js

jQuery( document ).ready( function( $ ){
  
	// Add Jump Start to cart
	$( '.buy-jumpstart' ).on( 'click', function() {

		var el            = $( this ),
			added         = el.closest( '.nav-middle' ).find( '.added' ),
			item_download = el.attr( 'data-id' ),
			current_page  = el.attr( 'data-current' ),
			item_price_id = false,
			referrer      = el.attr( 'data-nonce' );

		$.ajax({
			type: "POST",
			url: edd_scripts.ajaxurl,
			data: {
		        	action: 'themeblvd_add_to_cart',
		        	download_id: item_download,
				price_id : item_price_id,
				current : current_page,
		        	nonce: referrer
	        	},
			beforeSend: function()
			{
				el.addClass( 'loading' ).find( '.loader' ).fadeIn();
				el.closest( 'li' ).css( 'position', 'relative' ).prepend( '<div class="click-protect"></div>' );
			},
			success: function(response)
			{	
			   	// Wait 1.5 seconds
				setTimeout(function () {
					
					var elements = response.split( '[(=>)]' );
					
					// Update "My Cart" Quantity
					$( '#my-cart .cart-num' ).html( elements[1] );
					
					// Update floating shopping cart
					$( '#floating-cart .ajax-mitt' ).html(elements[2]);
					
					// Replace Buy button with Checkout button
					el.closest( 'li' ).html( elements[ 0 ] );
					
					// Fade in and slide down success message
					added.css( {
						'display': 'block',
						'opacity': 0
					} ).animate( {
						top: '+=20',
						opacity: 1
					}, 300, function() {
						setTimeout( function () {
							added.fadeOut();
						}, 2000 );
					} );
					
				}, 1500);
				
			}
		} );
        
		return false;
	} );
	
	// Floaters
	$( '.floater-trigger' ).on( 'click', function(){
		
        	var el = $( this ),
			floater = el.next( '.floater' );
		
		// It's open. so just close it.
		if( el.hasClass( 'active' ) ) {
			floater.hide().css( 'top', '26px' ).closest( 'li' ).find( '.floater-trigger' ).removeClass( 'active' );
			return false;
		}
		
		// Remove any open floaters
		$('.floater-trigger').each( function() {
			
			var current = $(this);
			
			if ( current.hasClass( 'active' ) ) {
				current.next('.floater').hide().css('top', '26px').closest('li').find('.floater-trigger').removeClass('active');	
			}
		} );
		
		// Only animate if not currently active
		if( ! el.hasClass( 'active' ) ) {
			
			// Now is active
			el.addClass( 'active' );
			
			// Fade in and slide down success message
			floater.css({
				'display': 'block',
				'opacity': 0
			}).animate({
				top: '+=5',
				opacity: 1
			}, 300);

		}

		return false;
	} );

	$('.floater .close-floater').on( 'click', function() {
		
		$(this).closest( '.floater' ).hide().css( 'top', '26px' ).closest( 'li' ).find( '.floater-trigger' ).removeClass( 'active' );
	} );

} );