Embed the MiniCart in Skin Header

SmithCart > How To
The MiniCart in the header of our site uses 2 instances of the MiniCart module and javascript to display a hidden pane.
 
The first instance of the MiniCart uses the "Mini Cart Summary View" Layout option with a class called "mcLink" added to the "Item(s)" asp:LinkButton control which looks like the following:
 
    <asp:LinkButton ID="btnViewCart" runat="server" onclick="btnViewCart_Click" CausesValidation="false" CssClass="mcLink">
        <asp:Image ID="Image2" runat="server" ImageUrl="~/DesktopModules/Smith.MiniCart/Images/minicart.png" />&nbsp;
        <%= Localization.GetString("item.Text", LocalResourceFile)%>&nbsp;
        <asp:Label ID="lblQty" runat="server" Text="0" CssClass="SmithProdText" />
    </asp:LinkButton>
 
When the asp:LinkButton is clicked, the following Javascript is triggered:
jQuery(document).ready(function($) {
			$(".mcLink").attr("href","javascript://");

	$(".mcLink").on("click",function() {
		$(".MiniCartPane").toggleClass("selected");
	})

}) 
 
The hidden pane contains a second instance of the MiniCart module using the "Mini Cart Detail View" Layout option. The pane is hidden using the following CSS:
 
.MiniCartPane{
	opacity:0;
	position:absolute;
	top:100%;
	right:0;
	border:6px solid #555555;
	background-color:#f0f0f0;
	z-index:999;
	padding:10px;
	visibility:hidden;
	transition: 		all ease-in 500ms;
	-moz-transition: 	all ease-in 500ms; /* Firefox 4 */
	-webkit-transition: all ease-in 500ms; /* Safari and Chrome */
	-o-transition: 		all ease-in 500ms; /* Opera */
	-ms-transition: 	all ease-in 500ms; /* IE9? */
}
 
When the Javascript above is triggered, the hidden pane is displayed using the following CSS:
 
.MiniCartPane.selected{
	opacity:1;
	visibility:visible;
}