Integrated Communications

Bella Pictures Launches Drupal Site - A Technical Focus

Dagoberto Aceves
Lead Engineer

Automating Photography Sales through Drupal

Last week, San Francisco-based Bella Pictures launched a new Drupal site that allows couples to select, schedule, and pay for wedding photographers online, greatly reducing one of the major hassles of wedding planning. With a network of certified photographers throughout the US, Bella is now able to sell high quality, local services via the web while also centralizing and automating administrative tasks such as billing and scheduling.

BellaPictures.com’s launch is the culmination of a year plus “engagement” with Achieve Internet. The first project was a sister site called StudioBlue.com, which offered a limited set of products in a few geographic regions. When this proof-of-concept Drupal site (the rehearsal) was complete, we moved on to the flagship BellaPictures.com.

Modifying Ubercart to Integrate with Salesforce

The notable technical challenges in this project related to: Ubercart modifications allowing for multiple product attributes and coupons; integration with Salesforce, Bella’s customer relationship management (CRM) platform; and integration with Authorize.net to support payment plans.

As with most weddings, a good deal of preparation went into it, and we’re proud to officially pronounce the site launched and wish it happiness forever after.

Customizing Ubercart Part I – Product Attributes

Both StudioBlue and BellaPictures sell wedding photography packages that consist of multiple products including engagement sessions, printed albums, 2nd photographers, videographers, etc. This would have been fairly straightforward, however Bella needed to allow users to select and purchase multiple product attributes in a checkbox fashion (i.e. one, several, or none). For example, some couples might want to order more than one photo album:

Ubercart was set up to support a drop-down or radio-button approach to product attributes. The Ubercart functions that handle these fields expect a string value, so in StudioBlue we used the form to generate a semi-colon delimited string for multiple attributes, parsing these with some custom code. This approach minimized our impact on the module while also providing the required functionality.

Using Taxonomy for Ubercart Products

Since BellaPictures offers a wider array of products, Achieve Internet changed our approach to the multi-attribute problem for this site. Instead of attributes, each checkbox on the form constituted a product, which we populated using taxonomy. When the form is submitted—for example, the user clicks the “Checkout” button on the screenshot below—the application actually process multiple forms in Ubercart behind the scenes, and this allows the appropriate products to be added to the user’s cart.

Customizing Ubercart Part II – Multiple Coupons

Ubercart supports single coupons, however Bella's business rules dictated we allow for the use of more than one. The coupon functionality was also complicated by the need for two types: combinable and non-combinable. To handle these requirements, Achieve Internet performed an overhaul of the coupon module. First we modified the Javascript to allow coupon-happy couples to enter multiple vouchers while shopping. Then we modified the code to store the coupons as a semi-colon delimited array in the session, applying all the coupons to the order upon submission. This last part required overriding Ubercart’s coupon handling function and running the discounting logic by looping through the coupons one-by-one.

Achieve also beefed up the site administrator interface to allow admins to enter multiple coupon sets and tag each as combinable or non-combinable.

Customizing Ubercart Part III – Wedding Dates

 The sites must store the customer’s wedding date with the cart items because pricing and payment plans depend on that date. Ubercart doesn’t allow you to store a cart’s state, since it gets a new id for each session, so Achieve Internet needed to devise a way to associate collections of products with “the big day.” The solution was to store the date, and some additional information, in each product in the cart. The result is that each product in a cart also has a date field, which is a redundant necessity, since products frequently enter and leave the cart. The date is then permanently associated with the order, since orders can store date information directly.

SalesForce Integration

Another significant aspect of the project was to fully integrate the Drupal e-Commerce sites with Bella’s customer relationship management platform, SalesForce. Data syncing was a necessity, since without it Bella sales representatives would have to perform manual data entry, which would be error prone and time-consuming.

Product mapping was not straightforward since each product in StudioBlue’s site (and BellaPicture’s, for that matter) is associated with one or several products in Salesforce. Achieve Internet identified corresponding products then added a SalesForce fieldset to each Ubercart product.

The mapping then enabled us, using the SalesForce API, to shape orders into an appropriate format for receipt. Orders sit quietly in a queue until a daily Drupal cron task mails them to SalesForce in an XML envelope. This syncing creates the entire order in SalesForce so Bella personnel can review it and take appropriate action.

Authorize.net Integration for Payment Plan Options

Bella also wanted customers to be able to choose a payment plan, which constituted another development challenge. Ubercart supports full order payment, and communication with the payment processor (in Bella’s case Authorize.net) is one-and-done. Authorize.net does offer some support for subscriptions, however Bella’s payment plans would not be user cancellable, so significant modifications to Ubercart and its interface with the payment processor were required to add payment plan functionality.

The initial step was to write code that enabled partial payment in Ubercart, since many of the validations are designed to match payment amount with cart amount. The larger task was to create a new Drupal library and module to store and update Authorize.net user and payment plan information. This required storing Authorize.net IDs locally and sending the user data updates to Authorize.net’s Customer Information Management (CIM). The system Achieve Internet created works seamlessly with Ubercart and SalesForce to track payments on a schedule, automatically send reminders, and then charge the customer’s credit card for the correct amount. Additionally, on the admin side, Bella can modify payment plan options according to customer needs and market trends.

A Rich User Interface

Achieve Internet also lent our Drupal expertise to develop the BellaPictures portfolio front-end, based on the design comps provided by Bella Pictures. Of course, this section was incredibly important, since photographers are typically judged on the quality of their portfolio. Bella wanted a highly interactive interface where visitors could search for weddings in their area, scroll through albums, read reviews, and more. The final product included a jquery-heavy page with a slideshow, thumbnails, and multiple views:

Although a good deal of custom development was involved in getting this page to work, we were able to leverage the power of views and turn this part of the project around in a mere two weeks.

A Successful Drupal Partnership

StudioBlue has been in operation for several months, and the launch of that site helped the Bella Pictures and Achieve Internet teams considerably with the BellaPictures.com release. The integration and customization challenges were significant, but the Bella / Achieve / Drupal marriage proved equal to the task. We’re continuing to work with the Bella technical team to add functionality and enhancements to the site. Achieve Internet is proud of the the fact that this complex project was delivered on time with both the flexibility and the quality to provide future enhancements as desired.

More about Integrated Communications

Achieve recently attended HCIC and gained some valuable insight. We have been attending HCIC for a number of years and have seen trends come and go. Ron Huber, the CEO of Achieve, shares his thoughts on what he learned and experienced at this year's conference.  
Digital Health Innovation SD Event on TeleHealth
TeleHealth: Today and Tomorrow Event Recap Digital Health Innovation San Diego has continued to grow as we further discussions in the community about some of the most pressing matters in the healthIT sector. To that point, our latest event was focused on TeleHealth and it’s growing impact on the healthcare industry.