ioby — short for "In Our Backyards" — is a social microfunding web service that connects people and money to site-based environmental projects (presently only in the New York City area). All of the projects funded through ioby are conceived, designed, and run by neighbors.
Ioby worked with us at New Signature to develop the new site, using Drupal 7 as the platform.
The ioby website heavily leverages Drupal Commerce. We utilized Drupal Commerce to present a simplified and streamlined donation process to the visitor, empowering users to easily move from project selection through checkout and payment. We further extended the Drupal platform through the use of contributed and custom modules, such as the Location and GMaps modules to provide visualization of projects on the site, Views (to list projects), and the HTML5 base theme Boron.
Using Drupal 7 and Commerce
A few key parts of the application built for ioby hadn’t been tried using Drupal 7 or, more importantly, Drupal Commerce previously. Because the site is donation-centric and needed to accept donations of any amount, the first challenge was to make a product to place in the cart that didn’t have a set price associated with it. In order to do this, the systems created the product "on the fly" as the donation is placed into the cart. The second challenge was to create a system that allowed users to also give a 20% gratuity directly to ioby. The third challenge was to enable sponsors to match the donation amount as part of a campaign for matching funds for a project.
The first challenge was handled by using a simple form that allows the user to enter the amount of the donation they want to give to a project. This form submit creates a new commerce product using the Entity API system. The product is instantiated and customized with the donation amount, and then placed into the cart. Each product in the Commerce module requires a unique SKU, so the system generates one based on the user's name, the project title, and a date reference to assure no products are duplicated.
For the second challenge, gratuity was at first going to be a tax type in the Commerce system. However, one of the requirements was to also give the user the ability to remove the gratuity if they felt that they didn’t want to cover the costs for it — a feature Commerce doesn't support with tax (for obvious reasons). To enable that ability, the gratuity is a line item (re)calculated every time the cart is updated. Once again we used the Entity API to generate a new product, and this time the gratuity type that has an individual SKU, and a price that is a percentage of the order total. Another custom feature we added was to show a popup message when a user removes the gratuity, explaining to them the importance of gratuity for ioby. Since the view doesn’t discriminate between the different line items, it was necessary to use some jQuery to handle this feature.
For the third challenge - giving corporations and sponsors the ability to match the donation amount – we couldn’t just add line items to the donation (like how user-submitted donations are handled) as this would change the donor information. Instead, we had to add a new panel to the checkout process that let the donator know that the sponsor was helping the cause as well. The sponsor was tied to the project by campaign node, using the new Drupal 7 database API to make direct calls to the database and tie the sponsor, campaign, project and donation together. Once the bond is created, a donation match is created and funds are applied to the project without charging the user.
This was a challenging and fun project. We were lucky to get to work directly with Commerce Guys on some of the deep elements of the site, and their team was very accommodating with their support.
Comments
donation product
Sounds like an awesome project. Was the donation product functionality created as a module? It be great to make something like that available for the community.
Up!!!
Can a project is underway to provide this functionality to the community?
Brilliant. However, why do
Brilliant.
However, why do not include meta discription? You end up with search results that look like this. I suggest looking into the Auto Meta tags module http://drupal.org/sandbox/ToneUK/1187576. It takes the teaser and makes it the meta description which translates into nice formatted Google search results.
Mobile AT Commerce Theme for Drupal Commerce and Ubercart
Nice site! Seems to be moving along alright.
Since the Drupal Commerce module is used for donations and e-commerce, check out the AT Commerce theme
http://drupal.org/project/at-commerce
AT Commerce is a D7 HTML5 theme optimized for the Commerce module and is MOBILE-friendly by responsive web design. It works with Ubercart too! It's an all-purpose theme with e-commerce and mobile capabilities. A site like this should be MOBILE.
Plus, AT Commerce is being actively developed by Jeff Burnz, one of the leading theme developers in Drupal.
Check out the live demo site of AT Commerce at its project page.