When we launched Saint Cupcake’s website back in September of last year, there was one project left on the drawing board: Cupcake Kits. The idea was to build a really simple way for people to “assemble” a kit of three cupcakes, three frostings, three toppings, and get it in the mail. You can then put them together however you want.

This created an interesting dilemma. There is no existing system for doing this sort of thing, and so we spent a lot of time thinking about how best to build this interface. We decided that it had to be something really visual. We wanted the user to get lots of feedback. We wanted to make sure they had picked exactly the right amount of each ingredient, before allowing them to check out. And we wanted to somehow get all this information into one product in PayPal, keeping the whole thing as simple as possible. Oh, and don’t forget, we’re using the ExpressionEngine content management system, so we have to make sure that our client can easily change the available items around at any time.

This fun project has flown right off the shelf and into reality. Take a peek at Saint Cupcake Takes Flight. We wrote custom jQuery code to allow visitors to drag-and-drop their selections into a set of nine different boxes, three for each type of item. Rolling over the different items gives you a description of each. Once you’ve selected nine appropriate items, the checkout button appears, ensuring that your order is correct. And once you check out, all your information is encoded into a single item in your PayPal shopping cart!

Try it. It’s fun!