Mike Bowzeylo of Base2Studio recently completed the beautiful Servings.ca, and we wanted to draw attention to the way that Mike was able to create (in appearance) a very usable and very customized order flow using FoxyCart’s one-page checkout. It’s a gorgeous site, and is using FoxyCart in one of the more interesting checkout flows we’ve seen.
Some notes (mostly Mike’s own notes he supplied us with) are below.
Servings + FoxyCart
Servings Inc. is a meal assembly company where customers can come and easily assemble a variety of homemade meals in a short time-frame. The challenge with integrating an online ordering system was that Mike was dealing with multiple order variables that ultimately affected the final purchase price depending on how the user built their order. FoxyCart provided the perfect tool that easily let me combine his own JavaScripts, the MooTools framework, and the built-in FoxyCart functions to achieve an ordering system that was linear in nature and logically guided the user through the ordering process. Plus, FoxyCart let Mike do this using CSS and with keeping web standards and his own sanity in mind.
Technical & Procedural Overview
Servings’ website offered a unique challenge in developing an eCommerce solution since they really only have 1 product, however it’s price can vary significantly. Price isn’t set like “Item A = $29.99”, rather, the final price is calculated based upon several factors chosen by the user at the time the order is placed.
User choices include the following, most of which affect the final price of the order:
- What type of session are they booking
- Pickup Session
- Assembly Session
- How many meals do they want to prepare
- 6 Meals
- 12 Meals
- How many servings of each meal do they want to prepare
- 2-3 servings
- 4-6 servings
(Once the user has made these choices they are sent to the appropriate order page which contains the menu item selections as well as choices for soup and dessert. This is where we also set some initial variable values in javascript that will be used later on to calculate the final purchase price.)
- User picks a date to come in and assemble or pickup their meals.
- User picks their menu items
- User chooses to add soup and/or dessert
- At this point the user places the order and will be taken to the FoxyCart checkout page. However, before this happens the order must be evaluated to calculate the final price. The order is ran through a JavaScript to determine several things:
- An appropriate session date has been chosen
- The user has chosen the correct amount of menu items based on the meal count they picked earlier.
- How many additional soup and/or dessert items have been added
The script now calculates, and sets, the final order price just before the checkout page is called.
Servings.ca has also used the FoxyCart attribute empty=true to ensure that the checkout page only ever contains the current order. This is useful if a user goes back to change some menu items on their order.
In the end FoxyCart’s ecommerce platform was a powerful yet simple system to integrate into Servings’ website. This let Mike spend more time focusing on actual development rather than system integration. The client was thrilled that their site had a consistent look and feel from start to finish, so it’s a win-win-win!
