Tweaking the Interprise Suite eCommerce Minicart Display
Visitors to your eCommerce website will enjoy seeing a ‘mini cart’ while they shop around. A minicart is a smaller, stripped down version of their full shopping cart, typically placed on side panels or inside website headers. As a web designer, I am happy to take advantage of the Interprise Suite eCommerce (ISE) Skin Tokens for displaying a minicart inside my custom design skins [i.e., (!MINICART!) ]. But, I like to make some modifications to the default minicart display and I believe you might too.
There are a few CSS and Javascript workarounds I’ll discuss to get around having to edit any C#, because the minicart markup is generated directly by the ISE code-behind, and is not easily accessible without the need to recompile your code-base.
Notes on this example: I assume the reader to have an intermediate skill level for writing valid CSS and also manipulating HTML elements (DOM) with Javascript. In my example, I have used JQuery to traverse, manipulate, and edit some elements because it works great, it’s feature-rich, and appears to have no conflicts with ISE core Javascript libraries. You can use whichever Javascript package you prefer. You may also want to refer to a previous post: Creating Custom Design Skins for Interprise Suite.
The Generated ISE Minicart HTML Markup
By default, the minicart HTML generated by the ISE code-behind comes out looking like this:
- <table width=”150″ cellpadding=”0″ cellspacing=”0″ border=”0″>
- <tr><td align=”left” valign=”top”>
- <img src=”skins/Skin_1/images/minicart.gif” border=”0″><br>
- <table width=”190″ cellpadding=”4″ cellspacing=”0″
border=”0″ style=”border: 1px solid #444444;”> - <tr><td align=”center” valign=”top”>
- <a href=”p-1-product-abc.aspx”>Product ABC</a>
- <br>Qty 1 $ 5.00<br/><br/>
- <a href=”p-2-product-xyz.aspx”>Product XYZ</a>
- <br>Qty 1 $ 5.00<br/><br/>
- Sub Total: $ 10.00<br/><br/>
- <a href=”ShoppingCart.aspx”>
- <font color=”BLUE”><b>CHECKOUT</b></font></a>
- </td></tr>
- </table>
- </td></tr>
- </table>
And here’s how it ends up looking by default – not ugly, but a tad unattractive, in my opinion:
First the problems, besides the obvious markup errors like mixing “<br/>” with “<br>”:
- We can’t easily make changes to the HTML because it is derived from the C# code-behind;
- The output is in a table, not horrible, but the “align=center” on the table cell will need to be looked at; I like this kind of output to be aligned left or right;
- The “<FONT>” tag… my, oh my; But it will be useful for us, see below;
- There’s no ID or class associated with the minicart for targeting it with CSS;
- When the shopping cart is empty, the minicart doesn’t show anything – no nothing. This may or may not be what you want but in my case, i’d like it to show “Your Shopping Cart is Empty” when there’s nothing there.
Implementing the Interprise Suite Minicart Tweaks
First, you’re going to want to put your minicart Skin Token inside a wrapper in your template files so you can properly target it with CSS:
- <div id=”miniCart”>(!MINICART!)</div>
Here is my snippet of CSS that targets the minicart. Granted, i’m using that <FONT> tag in a way that probably wasn’t imagined originally, however it allows me to do what I need in modern browsers.
- /* Mini Cart CSS */
- #miniCart table { line-height:1.1em; }
- #miniCart table tr td img, #miniCart table tr td br,
#miniCart table table td a font b { display:none; } - #miniCart table table tr td br { display:inline; }
- #miniCart table table td { padding-bottom: 5px; }
- #miniCart table table td a font { float:right;
display:block; width:112px; height:22px;
background:url(‘../images/button-checkout.gif’) no-repeat 0 0;
cursor:pointer; } - #miniCart table table td a font:hover
{ /* roll-over sprite background-position */}
Because the table cell align=”center” and table border are both inline, I can’t override it with CSS. So, i’m going to use JQuery. And i’m also going to use JQuery to add some text to the ISE mini-cart when the cart is empty. So, first you’ll need to ensure you include the JQuery libraries in the <head> of your ISE template file:
- <head>
- <script src="/skins/Skin_(!SKINID!)/js/jquery-1.3.2.js"
type="text/javascript"></script> - . . .
- </head>
Then, you can use the following Javascript to target the minicart:
- /* JQuery Mini-cart Update */
- $(document).ready(function () {
- $(“#miniCart table table”).css({‘border-width’ : ‘0′});
- $(“#miniCart table table td”).attr({align : ‘left’});
- if ($(“#miniCart”).text() == “”) {
- $(“#miniCart”).append(“<p>Your Shopping Cart is Empty.</p>”);
- };
- }
You’ll have to create your own button image (and rollover sprite) for the checkout button. But with a little extra CSS tweaking (like adding an background image to the miniCart div) my minicart now looks something like this and works just great!
For more information on customizing Interprise Suite eCommerce, please feel most welcome to contact the Hybrid Forge design team: info@hybridforge.com.
