August 10, 2010

BC Tip: nicer dialogs for the shopping cart

During various stages of product selection and checkout, Business Catalyst will pop up pretty ugly “alert” dialogs to draw the user’s attention to action performed or an error:

Standard Javascript Alert

Personally I find these pretty ugly. They don’t gel at all with the style of the site, and call me picky, but what’s with the pluralisation! It takes about 10 seconds (I timed it) to write the tiny amount of Javascript required to do the right thing. You know, 1 item , 5 items etc.

While the online wiki does contain info on suppressing these dialogs, I’m not sure that’s a great move, since important error messages are shown via the alerts.

Here’s how to replace the standard alerts with something nicer from jQuery UI (and fix that pesky pluralisation along the way):

jQuery UI Dialog

Step 1: Make jQuery available in your site template

To do this, put these lines in the <head> section of your site template HTML:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

(Yes, you can host these CSS and javascript files locally on your site if you want to, but using Google’s CDN is reliable and doesn’t impact your BC quota).

Step 2: Set up a modal dialog for the page, and override the alert function

<script type="text/javascript">
   var cartupdatedialog;
   var itemsAddedRE = /([0-9]+) item\(s\) added to your cart./;

   $.noConflict();
   jQuery(document).ready(function() {
        setupShoppingCartDialog();
   });

   function setupShoppingCartDialog() {
        cartupdatedialog = jQuery('<div></div>').dialog({
        modal: true,
        autoOpen: false,
        draggable : false,
        resizable : false,
        buttons: {
            Ok: function() {
                jQuery(this).dialog('close');
            }
        }
    });
  }

  /* replace standard alert boxes with something nicer from JQuery UI */
 alert = function (msg) {

    var match = msg.match(itemsAddedRE);
    if (match) {
       var quantity = match[1];
       msg = quantity + " item" + (quantity == 1 ? "" : "s") + " was added to your cart";
       cartupdatedialog.dialog("option", "title", "Thanks!");    
    }

    cartupdatedialog.html("<p>"+msg+"</p>");    
    cartupdatedialog.dialog("open");
 }

</script>

That’s it. If all goes well, you’ll now get pretty dialogs instead of those standard javascript alerts.

Taking it further

Styling the dialog

The beauty of jQuery UI components is that they can be styled to your heart’s content to fit the theme of your site. The style was imported in the first line we added above:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">

You can use this as a starting point to customise the look, or jump onto theme roller to build a new theme or browse existing ones.

Error and other messages

In the alert replacement function, I’m only looking for “item added” messages. Obviously BC can produce plenty of other messages. These will all render ok in the new dialog, but you may want to do something special depending on the message (like I did in fixing the pluralisation). For example you might look for error strings (e.g. ones starting with “ERROR”) and change the look of the dialog accordingly. Might make that the subject of another blog post.

Caveats

At this stage I’ve only tested this in newish browsers (Chrome, Firefox and Safari), but it should work fine in IE7 and IE8.

Business Masochist

Learned lessons in setting up a Business Catalyst online business