• open the link in a new window (for users with javascript enabled)
• allow opening the link with the keyboard (spacebar) (for users with javascript enabled)
• open the link in the same window for non-javascript users (so we still fallback to a working link)
• passing XHTML validation

Replacing Javascript Alert Messages Using jQuery

By default, when your customer adds a new product to their cart or selects a shipping option, your online shop will use a standard JavaScript alert box to notify them their request was processed successfully.

While in most situations this default option works fine, in some cases you may want greater control over the way customers on your site are notified.

Using a single line of jQuery, we can easily replace these alert boxes with styled notification messages that you can completely customize using your own CSS.

Step 1. Include the jQuery library

To get started, we need to make sure the jQuery JavaScript library is included on all pages we'll be using our custom notification messages on.

For this example, we'll include the script tags in our default site-wide template - this way we can be sure the library is present on all of our product pages.

We'll insert the following code inside the head of our template:

Step 2. Create and style your message box

Next up, we need to create a DIV element that we'll render the notification message inside.

We'll navigate to our site-wide template, switch over to HTML mode and then insert the following code at the end of the template, just before the the closing body tag:

It's important that we assign our DIV the ID of "messageBox" as we'll be using this unique identifier to select and manipulate it using jQuery.

You can completely customize the look and feel of your message box using CSS. For this example, we'll position the box in the bottom-right corner of the customer's screen, make the font white, and background color black. To get you started, below is our sample CSS styling:

To use this styling for your message box, either a) insert it in the head of your template or b) add it to your CSS stylesheet.

Step 3. Insert the code

The final step is to include the jQuery code that supresses the default alert box and triggers our custom notifiation instead.

We'll insert the following code at the end of our site-wide template, just before the closing body tag.

Save and publish the template.

Now, when a customer clicks the "Add to cart" button, jQuery will grab the alert message and populate our message box DIV with it's text. The default alert box will be supressed and the customer will no longer be required to click the "Ok" button.

We're using one of jQuery's built-in transition effects to fade in the message box and fade it back out after a 2 second delay.

This is just a basic example of how you can customize your online shop alert messages using jQuery. Using this method as a starting point, you can completely customize the styling of your message boxes to suit the look and feel of your online shop.