Basic outline of shopping cart that pops in from the right.

cart.css.scss

// --------------- CART
aside#cart{
	position:fixed;
	top:0%;
	right:-100%;
	z-index:9999;
	width:100%;
	height:300px;
	#closeCart{
		cursor:pointer;
		position:absolute;
		color:$black;
		right:	0px;
		bottom:-40px;
	}
	
	#cartTrigger{
		position:fixed;
		top:4%;
		right:0px;
		z-index:9999;
		cursor:pointer;
		
	
	}
	
	#theCart{
		height:300px;
		
		.front-checkout{
		
			text-decoration:none;
		}
		.empty-cart{

			border:none;
			cursor:pointer;
		}
		h5{
			text-align:center;
			margin: 10px;

		}
		table{
			margin-bottom:10px;
			tbody{
				tr{
					height:25px;
					.itemPrice{
						padding-left:20px;
					}
					.cartTotal{
						padding-left:20px;
					}
				}
			}
		}
form{
	margin-top:10px;
}
	}

}

#overlay{
	width:100%;
	height:100%;
	display:block;
	background-color: rgba(#000, .7);
	position: fixed;
	top: 0px;
	z-index:998
}

cart.html.erb

<aside id="cart" data-open=false>
	<div id="cartTrigger">
		<%= mobile_image "cart.png" %>
	</div>

	<div id="theCart">
		<%= render :partial => 'cart_table' %>
		<span id="closeCart" class="mobile">Close (X)</span>
	</div>
</aside>

cart.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
$(document).keyup (e) ->
	if e.keyCode == 27 && $('#cart').data("open") == true
		toggleCart()
		
$(document).on "click", "#cartTrigger", ->
	toggleCart()
	
$(document).on "click", '#closeCart', ->
	toggleCart()

toggleCart =  ->
	if $('#cart').data("open") == false
		$('#cart').data("open", true) 
		$('body').append("<div id='overlay'></div>")
		$('#overlay').show()
		$('#cart').animate
			right: "0%"
	else
		$('#cart').data("open", false)
		$('#cart').animate
			right: "-100%"
		$('#overlay').remove()