Two days in a row. This is the best I have done in a while. I’m not sure what you will be most excited about today, whether it’s going to be for showing you how to use the UPS Rates and Services API, or whether it’s using Spry to do it in real-time, or whether it’s the fact that my stuff makes you smile. Anyways, here is a link to a working sample of my Spry’d UPS Rates and Service API form.
The Problem:
Too often checkout pages are too many steps and too long. Without me getting into it personally, I will give you a tip that will make your online stores more successful: Limit the checkout process to one page. Recently I had a client I built a custom shopping cart for. She didn’t need a robust system like Os Commerce or Zen Cart, so I built one in from scratch. When I came to building the checkout page, I kept asking myself “how can I make this easier for the front-end user”. After fitting everything into one page, and realizing I could use Spry to get shipping rates RIGHT after they put in their zip, I knew I was on my way to land a home run.
The Solution:
I guess there are two parts to this one. The first is how the freak do I use the UPS API of which they supply close to 70 pages of documentation? Well, first off read this article and download his code. I am not going to take credit in creating the function I use. He also takes you through what you need to do on the UPS website, how to configure his script, and how to use his function.
Mark’s script however, simply returns one rate. I wanted to create a way to display several rate options to my customer. You can see what I did on the example page, below the form. So basically, I create an array with all of the shipping options I want to display. Then I run a foreach statement, to read the array one by one and complete Mark’s function. Each one returns a result that I can then display back to the user. However, I added in a radio button for each one, as well as the name of the shipping method next to it with the returned price from the API.
The next step was to integrate it using Spry’s updateContent utility. Like I showed yesterday this is fairly simple. I use the “onblur” handler again for their zip code, and place the zip code as the second input box to give it some time to load. Here is the “checkShipping” function that is called:
var checkShipping = function () {
//get their zip from the ship_zip box
var zip = document.shipping.ship_zip.value;
document.getElementById("Rates").innerHTML="Loading shipping options for Zip: ” + zip + ” …“;
//only check the zip if it’s more than 4 characters
if(zip.length > 4) {
window.Spry.Utils.updateContent(’Rates’, ‘getUps.php?zip=’ + zip);
}
}
It’s pretty simple. Basically I get the value of their zip, and then display some temporary data into my loading div, to alert the user that something is coming. Then I check that their zip is more than 4 characters, and then I use my getUps.php script to retrieve the info. I pass that same zip variable that is being used to show the customer I am retrieving info for that zip, into the php script and then into the function to be used in calculating shipments.
As always, I am sure you are already thinking of ways to extend this further. Better validation maybe? Using sessions to remember their selection and display it if they have to come back and edit the page again? Maybe putting an awesome animated gif of a flying eagle above the form? Hopefully this will help you on your journey, and you won’t be forced to use OS Commerce or Zen Cart just because they have a plugin that does this same thing.
Stay tuned tomorrow as I discuss how Spry can be used to display very nice alert messages. I might even wrap it up into a PHP class.
Leave Your Reply