Often a web site owner wants the shopping cart in Adobe Business Catalyst to require a shopper to purchase a minimum order amount, such as $25 or more per order. That's what my client wanted for  www.PerkyMoose.com.

We can achieve this even though this feature isn't built into the current Version 2 of Adobe Business Catalyst by writing a little jQuery code plus using a trick or two. (Our method can alternatively require purchasing a minimum number of total products, rather than a dollar amount.)

Our solution is fairly easy to install in fifteen minutes once you know how, although truthfully we spent a whole day experimenting with various ways to get Business Catalyst to do what we needed. Given the BC shopping cart's quirks, all our normal programming ways didn't work, until we came up with the trick of hiding the real Business Catalyst generated checkout button and instead showing shoppers our own button to click.

When shoppers click our button, we can run our own code, not BC's code, to check the total order amount. If the order amount isn't OK, then our code displays a popup message. If the amount is OK, then our code behind-the-scenes clicks the hidden but real BC button.

How to Install in Business Catalyst

The first step is changing the Shopping Cart Layout in BC Admin-->More Customization Options-->
Online Shop Layouts. Click on the Shopping Cart Layout and open it in HTML view, so you can see the code.

Look for Business Catalyst's tag where the BC checkout button will be created when the shopping cart loads. The tag looks like this: {tag_buybutton}

To hide this, we're going to wrap it in a span tag, and after that, add our own <a tag to create our own button. We end up with our HTML looking like this:

<span style="display: none;">{tag_buybutton}</span><a id="ourbutton" href="#" onclick="checktotal()">Check Out</a>

What we're doing is giving the span a display:none style, so that will hide the button that Business Catalyst creates in place of tag_buybutton.

Then our <a tag creates our own link, which you will need to style as a button however you wish. For example, #ourbutton { background:#FF3300; padding:20px; text-decoration:none; font-size:18px; } would create a big, square red button. (Of course you can use an image instead, just put an <img between the <a tags.

In our button, we have href="#" because it won't link anywhere, instead, we have an onlick event so when the button is clicked it will run a script function we're about to create called checktotal().

But first, we have one more tweak in our HTML shopping cart layout to make. Find the <td table cell that is holding the amount that you want to use as the total order amount. BC has several amount tags, and you could use any one you need:

• {tag_invoicetotal} is products+tax+shipping
• {tag_productgrandtotal} is products+tax
• {tag_productssubtotal} is products (no tax or shipping)

For the table cell holding that tag, you need to add an ID thetotal like this:

<td id="thetotal">{tag_invoicetotal}</td>

Now our code will know where to lookup the total.

Following is our simple jQuery/JavaScript that provides the magic by creating a function checktotal(). You place this script at the bottom of your Shopping Cart Layout in More Customization Options. To use this script, you must have jQuery running in your website, for details see Loading jQuery

<script type="text/javascript">
function checktotal() {
	var thetotal = parseFloat(jQuery('#thetotal').text().replace(/[^\d\.-]/g,''));
	if ( thetotal < 25 ) {
		alert("Total order must be $25 or more. Please add products.");
		} 
		else {
			jQuery('#catshopbuy').click();
			}
	}
</script>

How the jQuery/JavaScript Works

Line 4 stores the current total amount of products in the shopping cart into a variable called thetotal.

Line 4 is complex since it's doing several things, so let's break it down piece by piece...

1. The code with jQuery('#thetotal').text() looks in the shopping cart page for an ID = thetotal and reads the text in that td table cell.
2. But we need to convert text like $12.95 into a number, not text, so first we strip out all characters that aren't numbers or a period (like the $) with the .replace(/[^\d\.-]/g,'') regular expression.
3. Last we convert the remaining text into a number with parseFloat.
4. We end up with 12.95 as a number stored our thetotal variable.

In line 5, if thetotal is less than 25 dollars, then we popup an alert window with the message, "Total order must be $25 or more. Please add products."

If thetotal is 25 dollars or more then we use jQuery to find the element with ID = catshopbuy which is the ID that Business Catalyst always puts on its Check Out button. Then our jQuery .click() function clicks the hidden BC button, just as if the user had seen it and clicked it. BC's normal checkout code then runs, to make sure the shipping options etc. are correct, before taking the user to the checkout page.

We tried many other ways to accomplish this, but kept running into quirks due to the way that BC's own code works. This by far is the simplest method to install.

Requiring a Minimum Number of Products

The same idea can be used to require a minimum number of products that a customer must buy. For instance, in an online wine shop, if a customer must order 6 bottles of wine, but can mix and match different wines to reach that minimum, then BC has no built in way to do that, since it can only enforce minimum quantities per product, not across the whole order. To accomplish this with the script above, you just assign an ID thetotal  to the table cell holding {tag_totalunits} which has the total quantity of products ordered.