Drupal Case Studies

OnFlooring

OnFlooring Home Page

OnFlooring Inc sells interlocking flooring products from materials that include hardwood, laminate, bamboo, cork, vinyl and leather. These floating floors are ideal for do-it-yourself projects since they require no glue, nails or special training to install.

To enhance the DIY shopping experience, OnFlooring's Learning Center includes videos, installation instructions and original commentary.

Why Drupal was chosen: 

I've been using Drupal since version 5 and have always been impressed with its useability and extensibility. It's the perfect platform for developers who need to make extensive customizations, as features are easily integrated into the Drupal architecture. A site like OnFlooring.com, with its unconventional cart workflow, would be very difficult to achieve on any other platform. OnFlooring.com runs on Drupal 7.

Why Ubercart was chosen:

I've been building carts with Ubercart for about as long as I've been building sites in Drupal, and I find it a reliable and effective solution.

Describe the project (goals, requirements and outcome): 

The goal is to provide a simple and straightforward method for the customer to generate a comprehensive project quote. This is a challenge with this type of product because of relationships between parent and child items.

Furthermore, it is customary to price the flooring by square foot, but the items themselves are sold in cartons.

We used the Entity reference module to associate subordinate products with parent products, and the Product Class module to create and manage multiple products with values inherited from a parent class.

To handle complex orders of multiple related products while also performing quantity conversions we created a custom calculator on the cart page. The AccuQuote Calculator converts square footage to carton size and populates the cart with the appropriate quantity of the parent item and all the necessary child products. Changes to quantity and price are automatically updated via Ajax.

Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Key contributed modules:

Ubercart and Ubercart related modules

Most of the modules provided in the Ubercart suite were used for this project including but not limited to Product Kit, Cart Links, Product Attributes, Roles, Shipping, Taxes, Payment and Fulfillment.

Entity reference

Entity reference provides a useful method for associating entities with pieces of content. This is helpful for customizations where different nodes need to be tagged as as being related to one another. The beauty of this is that CRUD functions are handled totally by Drupal core, and any dynamic changes can be applied to the entity object and saved without difficulty (see 'Subordinate products' under 'Notable customizations').

Views

An essential component of any Drupal site, especially since Views' implementation of sophisticated contextual filters and relationships. Many pages that would've previously required a custom module can be accomplished easily by creating a view, which is an appreciable time saver.

Colorbox

Colorbox is my "lightbox" of choice. It's lightweight and easy to implement, and the display plugins that come with the Drupal module are extremely helpful for displaying images.

Voting API and Fivestar

The number of effective rating solutions for Drupal is surprisingly low. For the most part, though, I was able to implement a reviews system by using Fivestar and the Voting API.

Ubercart Discounts (Alternative)

While there isn't an official Drupal 7 release for this module, I was able to implement a port of this module successfully on the site. The more stable module, Ubercart Discount Coupons, couldn't be used because discounts had to be applied without requiring the user to enter a coupon code. Several hacks were made to the module in order to allow other modules an easier time hooking into the discounting process (see 'Discounts by Location below').

Notable customizations

Discounts by Location

One site requirement was to allow discounts to be applied by location. As such, the Ubercart Discounts form was modified to include locations fields allowing administrators to include a list of zip codes wherein this discount could be applied. The custom module uses either a zip code saved in a session, using a field on the product pages or the delivery address zip code, if it exists.

Custom Shipping Quotes

OnFlooring.com provides the following shipping options:

  1. Paid freight shipping using either Roadrunner Transportation (RRTS) or Old Dominion Freight Line (ODFL).
  2. Free pickup from a warehouse location.

For either option, the Shipping Quote module needed to know which warehouses were closest to the customer and whether or not they had the required product or products in stock. The solution was to add warehouse names and addresses as content, and then associate them with products by using the Entity reference module. Using geolocation, the shipping quote module was then able to determine which warehouses associated with a cart were closest to the customer's delivery address. Now, when a customer checks out, they are supplied with various warehouse locations where they can pick up their order for free.

If a customer prefers freight shipping, however, the shipping quote module also passes the warehouse addresses to the ODFL and RRTS web services. The module then analyzes the returned data, and provides the customer with the cheapest shipping price, based on the two options.

Cart Calculator

The AccuQuote Calculator provides an intuitive method to "add to cart" by square foot.

On the product page, instead of a quantity field, the user is asked to enter how many square feet they will need (see the first screenshot below, "AccuQuote Pre-Cart"). The system then converts this to a product quantity by rounding up the value to the number of cartons the product is shipped in. On the cart page, the customer can adjust the number of square feet they need, or the number of cartons, directly by using an Ajax calculator (see the second screenshot below, "AccuQuote Cart Output").

Subordinate Products

One unique feature of OnFlooring.com is the ability to add all the necessary products for a flooring project into the cart automatically.

Subordinate Products - Admin Area

In the case of OnFlooring, there was the possibility of hundreds of subordinate products; meaning a simple select field would not do. The solution was to create a separate tab on the product edit page that provided a table of selectable subordinate products, with an option to filter by category, SKU and title. (see the final screenshot below, "Parent and Subordinate Admin Page").

Subordinate Products - Add to Cart

When a product is added to the cart, the Subordinate Products module automatically adds related products it determines are relevant. Some products are optional, and as such are added with a quantity of zero. This fairly simple scenario required extensive customization, since a cart item is not usually expected to have a quantity of zero, unless it's being removed.

Subordinate Products - Calculator

A subordinate product's quantity in the calculator is based on the quantity of its parent products. This creates some complexity, since it means quantities are both adjusted by the required dimensions and by the quantities of related items.

Certain subordinates simply have a fixed amount, meaning their quantity is not affected by the quantity of its parent; while others are based on a ratio entered in the subordinate edit tab.

Parent Classes

Because there are hundreds of products at OnFlooring.com, product administration required special attention. Luckily, many products contain the same information. As such we were able to customize a system that generated child products based on the value of a parent product class. This was accomplished by creating a "Parent Class" content type, containing the same fields as regular products. However, items created using this content type can be selected in a custom form to generate up to 50 child products at one time.

Additionally, when a parent class is updated, the system searches through all its children and determines if any of their fields have been updated. The system then updates any unchanged fields with the new values entered for the parent class.

Project team: 

MadwireMedia Loveland, CO

OnFlooring AccuQuote Pre-Cart
OnFlooring AccuQuote Cart Output
OnFlooring Parent and Subordinate Admin Page

Comments

How did you implement the

How did you implement the product information as organized by tab

https://onflooring.com/products/bamboo-flooring/teragren-portfolio-rich-...

Each piece of tabbed content

Each piece of tabbed content is a field on the product content type, that is then rendered manually within a custom node template (node--product.tpl.php). Each label is printed first to create the tabbed links, then the labels are hidden, and the content itself is rendered below. Javascript is used to show content on tab clicks.

Faceted search

Why arent you using Faceted search? It enables you to better filter your floor types (amount of available items and you can never select something that cant be combined).

Founder of oozyo.com/modelgezocht.be
Main designer/developer at easycom

The features you list can be

The features you list can be accomplished in other ways, but have performance casualties that didn't seem worth it.

Besides, there isn't a D7 version of facted search.

_

What is the used theme? Is it eCommerce default theme? Also how did you enable slide-show on this site? Please tell the theme name as i liked it a lot.

Doubt is the father of invention..... Hubmesh

Theme

It is a custom theme. Create a content type "slide-show" with a field for the slide-show images.

Slideshow

What modules did you use for the slideshow and carousel? Are they drupal modules or just jQuery plugins?

jCarousel

Amazing shop!

Can you please shortly explain how did you implement the Cart Calculator? Thank you!!!

It's a custom module. Fairly

It's a custom module. Fairly simple, but custom nonetheless.

nobody click here