Put a Shipping Cost Calculator in Your Auction

Use an HTML form and a little JavaScript to provide accurate shipping costs to your customers on the fly.

One of the advantages of understanding HTML is the ability to add functionality to your auction descriptions without having to rely on extra-cost services or — gasp — the intelligence of your bidders.

A shipping cost calculator, placed right in your auction description, will allow you to avoid setting a single, fixed shipping cost (which can scare away frugal bidders), and still avoid the burden of having to quote shipping costs to everyone who asks.

Probably the easiest way to provide self-service shipping cost information is to include your zip code and the weight of your item right in your auction description. Your bidders can then punch that information and their own zip code into a courier web site, such as ups.com or fedex.com, and get an accurate cost to ship, as well as any available shipping options (insurance, overnight, etc.). The problem is that it’s easy for the bidder to make a mistake or choose the wrong shipping options, which can cause all sorts of problems.

Fortunately, there are many more streamlined solutions, ranging from services provided by eBay to custom HTML-based calculators.

eBay’s Calculated Shipping

eBay offers sellers its own shipping calculator, a feature introduced in the middle of 2003. When listing your item, just choose the “calculated shipping” option. Specify your zip code, the weight and dimensions of your item, and a single shipping method, and eBay will allow your bidders to determine shipping costs on their own.

The calculated shipping feature, however, is rather limited. First, it uses software provided by Connect Ship, a UPS company, so only UPS and U.S. Postal Service rates are supported. Second, it works only for buyers and sellers in the continental United States. Finally, sellers can choose only a single shipping method when listing the item, so bidders will have no choice when using the tool (which can be good or bad, depending on your perspective).

Warning

The biggest advantage to Calculated Shipping is probably also its biggest drawback. For the bidder’s and seller’s convenience, the calculated shipping cost is automatically inserted into the bidder’s invoice, which means that it will be used when the bidder completes the Checkout procedure. This means that the bidder can send payment without any post-auction input from the seller, even if the shipping quote is incorrect. See [Hack #49] for more information.

Calculated Shipping can also combine shipping costs for multiple auctions won by the same bidder, although the accuracy of the calculation should never be taken for granted. As the seller, you’ll want to have an active role in helping your bidders complete transactions by sending accurate totals and payment instructions promptly. Otherwise, you’ll be deluged with complaints from impatient bidders who have sent incorrect payments and who blame you for their mistakes.

Whether eBay’s Calculated Shipping option is sufficient or not is entirely up to you. But anyone outside the continental United States, anyone shipping internationally, or anyone wishing to ship with another courier may want to pursue a different solution.

A Custom Front-end

Regardless of where you live, where you ship, or what courier you use, you can provide a simplified front-end (interface) to your courier’s web site and significantly reduce the possibility of errors.

Start by opening the web site of your courier’s shipping cost calculator. For example, go to http://wwwapps.ups.com/cost if you’re shipping with UPS (though this procedure should work with most couriers’ web sites). Then, calculate the cost to ship a 5-pound package from San Francisco, California (zip 94102) to Honolulu, Hawaii (zip 96801). When you’re done, you’ll end up with a page showing the total cost to ship using each of the available services (UPS Next Day Air, 2nd Day Air, etc.). The rather long URL of the page should look something like this:

http://wwwapps.ups.com/QCCWebApp/controller?origcountry=US
  &origcity=&origpostal=94102&destcountry=US&destpostal=96801&destcity=
  &destResidential=NO&packages=1&iso_language=en&iso_country=US
  &dropOffChoice=DO&billToUPS=no&container=02&length1=12&width1=12
  &height1=12&length_std1=IN&weight1=5&weight_std1=LBS&value1=100
  &ratesummarypackages.x=18&ratesummarypackages.y=6

As described in [Hack #12], everything after the question mark (?) is simply a collection of parameters, each separated by an ampersand (&). For example, the parameter destpostal=96801 specifies the destination zip code.

The next step is to translate this URL into an HTML form:

<form method=get target=_blank      [1]
                   action=http://wwwapps.ups.com/QCCWebApp/controller>
<input type=hidden name=origcountry value=US>
<input type=hidden name=origcity value=>
<input type=hidden name=origpostal value=94102>     [2]
<input type=hidden name=destcountry value=US>
<input type=textbox name=destpostal value="">     [3]
<input type=hidden name=destcity value=>
<input type=hidden name=destResidential value=NO>
<input type=hidden name=packages value=1>
<input type=hidden name=iso_language value=en>
<input type=hidden name=iso_country value=US>
<input type=hidden name=dropOffChoice value=DO>
<input type=hidden name=billToUPS value=no>
<input type=hidden name=container value=02>
<input type=hidden name=length1 value=12>
<input type=hidden name=width1 value=12>
<input type=hidden name=height1 value=12>
<input type=hidden name=length_std1 value=IN>
<input type=hidden name=weight1 value=5>     [4]
<input type=hidden name=weight_std1 value=LBS>
<input type=hidden name=value1 value=100>
<input type=hidden name=ratesummarypackages.x value=18>
<input type=hidden name=ratesummarypackages.y value=6>
</form>     [5]

Each parameter in the URL receives its own <input> tag as shown. For a shortcut, use your text editor’s search-and-replace function to do the work for you. First, replace all occurrences of "=" with " value=" (including the preceding space), and then replace all occurrences of "&" with "><input type=hidden name=" (not including any of the quotation marks).

All of the fields here are hidden (with the exception of destpostal); this means that you can customize them by hacking into the code, but your bidders won’t see anything. For instance, change the value for origpostal [3] to your own zip code, and the value for weight1 [4] to the weight of the item currently for sale. The one visible field (with the type option set to textbox) is destpostal [2], into which your bidders will type their own zip codes to get a shipping cost quote. Note that our test zip code, 96801, should be removed so that the bidder sees only an empty zip code field.

Warning

Note that all of these parameter names may be entirely different for the particular URL you dissect. If you’re uncertain about a particular ambiguously named parameter, just look at its value for clues.

Finally, the site address and executable name are placed inside the <form> tag [1], and the corresponding </form> tag is placed at the end [5].

When you’re done, simply place the code right into your auction description along with a sentence of instruction, such as “Type your zip code here and press Enter for your shipping cost,” immediately above it. You may also want to set apart this code by placing it in its own HTML table, like the one in Figure 4-8; see [Hack #40].

A simple shipping cost calculator allows your bidders to get a shipping quote without asking you

Figure 4-8. A simple shipping cost calculator allows your bidders to get a shipping quote without asking you

Naturally, this code can be reused and placed in all your auctions; just change the weight on line [4] for the specific item being sold. Make sure to test it from time to time, however, since the courier may change their web site at any time, and probably without personally notifying you first.

The Zonalyzer Calculator

The Zonalyzer calculator doesn’t utilize any external web sites, but rather encapsulates all of the rate tables and functionality right in the code. Of course, since including rate tables for all locations would make the script needlessly complicated, only the rate tables that apply to your location are included. This means that the code must be generated for each person who uses it.

To generate a free shipping cost calculator, go to http://www.zonalyzer.com (Figure 4-9) and follow the prompts. When you’re done, just copy and paste the code into your auction description. Or, to test the code, paste it into a text editor, save it as an HTML file, and open the file in your web browser.

Use Zonalyzer to generate a personalized shipping cost calculator for your auctions

Figure 4-9. Use Zonalyzer to generate a personalized shipping cost calculator for your auctions

One of the nice features of the Zonalyzer calculator is that it lets you add a “handling” fee, a fixed dollar amount that is automatically added to every shipping cost quote. It also lets you restrict the shipping options to one or two different types, so your bidders won’t expect something you can’t deliver. Finally, since it doesn’t rely on an external site, it won’t go down without notice.

On the down side, Zonalyzer supports only a small handful of couriers and shipping types, and then only for shipments originating from the U.S. It also relies entirely on JavaScript, and won’t appear at all if your bidder has disabled JavaScript support. Finally, courier rate tables do change, so you may have to regenerate your calculator code from time to time.

Hacking Zonalyzer

The Zonalyzer code is automatically generated from the information you provide in the Zonalyzer wizard, but the customization doesn’t have to end there. Once you have the code, you’ll have free reign to modify, simplify, or expand the tool to your heart’s content.

Tip

Because the code is as compact as possible, it may be missing some of the line breaks and indentation normally used to make such code more readable. As a result, you may need to spread things out before you begin hacking, a task most easily accomplished by simply inserting a line break after most of the semicolons found in the code (with the exception of those used in if statements). Make sure to create a backup of the code before you mess with it.

One thing you may want to do is disable the pop-up messages, which your bidders (or you) may find annoying or troublesome. Simply delete (or comment out) all three of the alert statements, and the calculator will work more silently. Without the pop-ups, however, your bidders won’t necessarily know when they’ve typed an improper zip code. Instead, you may want to modify the error-checking routine to place a simple error message in the output field, something that can be accomplished by replacing each of these lines:

alert("Please enter a valid Zip Code!");
alert(t+" is not a valid Zip Code!");

with the following:

return "bad zip";

Being a minimalist, I typically prefer simple black-and-white boxes to the more colorful schemes provided by the Zonalyzer wizard. Fortunately, the appearance of the box is determined by a lone HTML tag that looks something like this:

<table style="color:black; width:255; background-color:yellow; font-size:12; 
border:thin solid indigo; font-family:arial; cursor:hand">

The parameters in the <table> tag, separated by semicolons, follow CSS (Cascading Style Sheets) rules and are therefore fairly self-evident and easy to change. For instance, to have a basic black-and-white table using the default font of the page, change the line to the following simplified version:

<table style="width:255; border:thin solid black;">

Finally, you may wish to add additional restraints to the calculations, such as a minimum charge, maximum charge, or a surcharge to certain locations. This can be done in the loadZoneFinder( ) function; this is responsible for calculating the toTSH[i] variable, which ultimately is the shipping cost shown to the bidder. For example, to impose a minimum charge of $5.00, change this line:

toTSH[i]=fmtCUR(Number(shC[i])+addAMT);

to the following:

var minimum=5;
toTSH[i] = fmtCUR(Number(shC[i]) + addAMT)
if(toTSH[i] < minimum) { toTSH[i] = minimum; }
toTSH[i] = fmtCUR(toTSH[i]);

If you’re using Zonalyzer II or one of the other more advanced calculators, the function name and code specifics may be different, but the methodology is the same.

FreightQuote

For shipping heavier items, such as furniture and appliances, you can use FreightQuote, a free shipping cost calculator available at http://www.freightquote.com. Although it isn’t self-contained, it’s still fairly compact and rather professional-looking. Just make sure you’re able to ship with one of their affiliated shippers before you insert their calculator in your auctions.

Get eBay Hacks now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.