Di Bruno Bros. Retrospective: Delicious New Magento Features

When we launched www.DiBruno.com we were excited to receive many kudos from the Magento development community, a mention on the blog, and a nod from some folks in Magento Inc’s Sales and Training departments. It was clear to those in the know that our installation was heavily customized, and many of the features we implemented weren’t native to Magento. In order to properly convey Di Bruno Bros’ branding and in-store experience and leverage existing marketing channels and brand assets, we either extended existing features or straight up high-jacked the Magento API and created 100% tasty, brand new components.

Magento’s August / September Newsletter (viewable here: http://bit.ly/qMUIqW) recently spotlighted Di Bruno Bros. again by talking about two very cool, custom, and creative features O3 conceived and delivered for the project. But that’s only TWO of them! Here is an extended list of custom feature set we developed for the project:

Custom Navigation

The entire main site navigation is custom, and not driven by Magento’s stock menu navigation system. Our solution for everything from the “best sellers” to “on sale” items to the “suggested products” in each pulldown is all custom functionality. However, as Magento’s newsletter noted, it was our application of custom attributes and granular filtering for the cheese section that is truly unique. Based on our intense (and delicious) discussions with the Di Bruno Bros. Cheesemongers and our goal of translating the complete in-store “cheese selection” experience online, it was necessary to create a custom filtering mechanism for cheese by including a set of filters for cheese type, texture, region and milk. Also, in addition to our “cheesy” navigation upgrade, we created a custom predictive search component powered directly by the Magento API which gives users textual hints to complete their search queries. This is particularly important when considering the 1,001 ways people try to spell words like “Prosciutto”.

Gift Basket Builder

Di Bruno Bros. gift baskets are amazing. When you receive one, you’ll swear you hear angels singing. I’m serious. So, as you can imagine, it was important that the experience building your own gift basket online be equally, biblically, significant. By extending and customizing Magento’s bundled products model, we were able to create an intuitive user experience that is comfortable, highly detailed and unique to the Di Bruno Bros. brand. Also, store administrators can easily manage all products and inventory available for each type and size of gift basket through the standard Magento interface making GBB management efficient and effective.

Product Integration with the Blog

When you buy cheese (expensive, imported cheese), you’re buying more than a delicious block of dairy goodness... you’re buying a story. You’re tasting the culture and history of the region it was produced and the profound effort it took to produce it. In order to round out the Di Bruno online experience, it was important to give their cheesemongers and gourmet professionals a platform to tell those stories and their customers a quick, intuitive way to then purchase the products Di Bruno’s people so lovingly review with painstaking detail. The result is a seamless integration between Magento and Wordpress that allows users to add products directly from individual blog posts to their shopping cart without ever leaving the page as they would from any other part of the store. We did this by building a header and footer that is 100% integrated and shared between the Magento and Wordpress systems. We customized Wordpress to allow editors and contributors to enter a simple tag / SKU combination into a field while creating or editing a post. Then we wrote javascript to pull the product image and info from the Magento API and add the item to the users cart. In addition to creating a super cool user experience (and a happy marketing and sales department), this all contributes killer SEO value by linking up products to unique original content, keeping it all on the same domain.

Virtual Cheesemonger

If you ever have the pleasure of shopping for cheese at the 9th Street store in the historic Italian Market, you know those cheesemongers like giving recommendations. In fact, they thrive on it. Here’s how it works... they say “What can I get you?”. You... being a novice... say “What do you recommend?”. What follows is a slew of questions and answers that ultimately results some incredible Sicilian caciocavallo. He pulls it out of the case and gives you a sample. You melt a little... perhaps go slightly faint. Then you finish the procedure by saying “I’ll take a pound of that”. When considering how to translate this exercise to the online experience, we 1) interviewed cheesemongers and listened intensely as they grilled one customer after another... and 2) ate a lot of cheese. The result was the Virtual Cheesemonger. Here, Danny and Joe ask a series of questions that help them narrow a list of choices just for you. What results is an interface that allows you to compare and contrast everything from region to possible wine and beer pairings in order to make a final selection. We accomplished this by digging deep into the Magento Core API and creating a custom script that evaluates and displays your cheese options based on how relevant each result is to your specific search criteria.

Under The Hood

The 90% of the ice berg you don’t see... the shopping cart, checkout and multi-address checkout is 100% custom front AND back, powered directly via the Magento Core API. Since neither functioned exactly as we wanted and the client had a some custom business rules that we had to implement in the cart, we were forced to throw out the blue print, trace Magento’s built in mechanisms, and write our own custom solutions where necessary. For example, since Di Bruno’s busy time is the Holiday season, it was necessary to create a method for users to pick the week their product would ship. We gave users the ability to pick one of four weeks leading up to Christmas. This allowed them to essentially “pre-order” gifts for the holidays.

In addition to the several cart customizations we were required to implement, we also dumped much of the stock Magento front-end code almost immediately. It was bloated, the javascript was less then ideal, and the project requirements demanded a lot of custom user experience we didn’t feel would work out with the canned solution. By doing this we were able to greatly improve page load times (a common gripe with Magento builds) because we only built the middleware we needed and dropped features that were unused or unnecessary. Also, some features we created via the Magento API side stepped bugs, problems, and less then ideal functionality in *some* of Magento’s built in mechanisms. The result is a speedy user experience that ensures the site has excellent cross-browser compatibility. It actually works perfectly on the iPhone, iPad, and Android phones without being built specifically for mobile purposes!

The DiBruno Bros project was a ton of hard work, but it was also some of our best and most enjoyable. Let’s be honest, there are worse things than eating cheese in the name of better business. The lessons we learned from all of the custom Magento work have given us an unparalleled understanding of the Magento platform, and we’re looking forward to even more unique builds in the future. Now, if you’ll excuse us, we’ve got some gift baskets to build. It’s never a bad time to get a gift... for yourself.