Improving ecommerce usability: first 30 minutes with Magento, first 30 minutes with Ubercart and Drupal

In order to comply with what website application end users really need, we often need all the benefits of the proven specialized tools (for example, Alfresco for document management, Magento for ecommerce, WordPress for blogs, Gallery for photo galleries, Moodle for education), but without having to sacrifice the power, community, flexibility and excellence of Drupal.

Several clients need to integrate ecommerce functionality into their website application right now. And to be honest, what I need is the great usability of a good specialized framework without giving up Drupal. As a developer and not an experienced store manager, how can I be sure to offer those using my services the most advanced usability for their ecommerce needs? I need Drupal for most of their requirements, but I need, say, Magento too. To be honest, the question I need to answer is: Ubercart is the best Drupal based ecommerce solution; but this time is that going to be good enough for the end users?

As a website application developer, I need to place reusability at the core of my kit of best practices. But reusability isn’t always about code, or modules, themes, or even whole frameworks; it’s often about tried and proven industry-wide well-trodden paths, a set of patterns upon which to build no matter what tools you use. Just as usability most often isn’t really about flashy widgets, it’s about an architecture that won’t paint you into a corner.

So I hit upon what I think is a novel idea: I decided to prototype the development with a best-of-breed specialized ecommerce framework in parrallel with Ubercart/Drupal, in order to gain insight into the kind of usability and architecture required. Then I could decide between integrating Drupal with Magento on the one hand (a la Promiscuous Drupal), or using Ubercart directly with Drupal to attain the same level of functionality.

Disclaimer for silly people

[for example this article]

If we are talking about setting up a semi-usable ecommerce store in 30 minutes using either toolset, then any idea of either of these great systems being “better” than the other is silly (Been watching Monty Python again, just love that word…). This article is not a “which should I use” hack. A decent website application developer chooses the solution that will best get the job at hand done, and therefore has the obligation of, well, going down many paths and of gaining competence and experience in a variety of frameworks.

Jump in wherever:

So what’s so great about Magento?

Installing Magento with the sample store.

First impressions with Magento

Installing Ubercart the easy way with UberDrupal

Doing it with Ubercart (Drupal)

Pro’s and Con’s

I’m going with Ubercart and Drupal (this time)

So what’s so great about Magento?

It’s written on top of the Zend framework, dude. Giving you plenty of power and flexibility there, for that matter. And it’s serious, object oriented, and well written. Magento’s architecture is awesome, based on the EAV model (download a full color PDF of the database diagram from the Database Diagram page in the Magento Wiki, after a quick and highly rewarding refresher on what the entity-attribute-value model is all about) (hey, isn’t CCK EAV based… ? Comparing frameworks makes you go deep…). And Magento’s usability (see below) is born out of the concrete ecommerce needs of an extremely active community that drive its development. And it presents two API’s, SOAP and Xml-Rpc (which I believe current Drupal integration efforts are attempting to leverage). All these factors have contributed to its success. The free community version is bundled with Zend Server.

Installing Magento with the sample store.

There’s more than one way to do it, but I did the following: I went to the download page (if you do not wish to register you can go directly here) and grabbed the Full Release tarball ver 1.3.2.4. I untarred this into a document root already set up to point my browser at. If I were just going to perform a basic install I would simply create a database and unique user with full permissions to it, fix some file permissions, point my browser at the URL and follow the install instructions (deja vu anyone?). But I wanted to install the sample store also, so I downloaded the Sample Data set; it has an sql file, which I ran to install the data into the clean database I had just created, together with a media folder, whose contents I copied over the regular media folder of the basic install. Then I made sure the web server had write permissions on the .htaccess file, as well as the etc, media and var directories, and pointed my browser at the URL corresponding to the document root.

After playing around with the sample store and the administration back-end, I also did a fresh, basic install upon which to prototype.

Magento Installation Guide: http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide

Sample Data Installation Guide: http://www.magentocommerce.com/knowledge-base/entry/installing-sample-data-archive-for-magento-120

First impressions with Magento

Now I’m being silly: I spent some valuable developer time RTFM: Magento Users Guide (the freely accessible Magento User’s Guide in the Magento Wiki). It actually is always best, of course, to actually read some of the documentation before getting started. I found out about Websites, Stores and Store Views (you can manage multiple websites and within each one multiple stores, each with their different views (i.e. for store internationalization). Impressive indeed.

So I went to the fresh basic install: http://example.com/admin and logged in as the admin user I had specified during installation. Following the indications in Chapter 3 of the User’s Guide, the first thing was to set up the Catalog.

I wanted to setup a Catalog like this, with all items appearing on the Catalog menu:

• Books
  • Audio books
  • Electronic books
  • Paperback books
  • Hardcover books
• Cameras
  • Digital Cameras
  • Film Cameras
  • Video Cameras
• Computers
  • Desktops
  • Laptops
  • Netbooks

Creating the categories

Leaving aside the plethora of options, settings and configurations (deja vu once again), I went straight to the business of creating the Categories. I went to Catalog > Manage Categories. There already existed a root category named Default in the category tree on the left hand side of the screen, so I created my first category by selecting Default and then clicking on the Add Subcategory button. I filled in the usual particulars for products, making sure to select “Yes” for Is Active, and “Yes” for “Is Anchor” under the Display Settings tab to ensure the new Category would appear on the primary menu for products. After adding all the computer categories as sub-categories of Computers, and idem for Cameras, my admin backend (Catalog > Manage Categories) looked like this:

and the front-end already had its product category navigation menu going:

Creating the attribute sets which define product types

Before we can actually create some products to sell in the store we need to plan which attribute sets go with which products. As we shall soon see, when you go to Catalog > Manage Products and click on the Add Product button,  you are first asked what type of product this is going to be (simple, grouped, configurable, etc. – more on this later) and, definingly, which set of attributes the product is going to have.

Attributes are “quantifiable or descriptive aspects of a product, from the color to the manufacturer, to the SKU number” (see http://www.magentocommerce.com/wiki/welcome_to_the_magento_user_s_guide/chapter_3#attributes). “By default, Magento includes all the necessary System Attributes,” in an attribute set called “default”. So if you don’t want to add any specific user defined attributes to a kind of product (i.e. digital camera manufacturer or megapixel value), which Magento calls Simple Attributes, you would simply, at a minimum, apply the default attribute set. If you wanted to apply additional attributes to digital cameras, however, you would first create the simple attributes themselves, and then create a special attribute set, based on the default set, but which included additional appropriate Simple Attributes you have created yourself.

So let’s create an Attribute Set to be used when we want to put Digital Cameras in our store. What’s really neat is that we can first create one for Film Cameras, based on the Default set (Camera manufacturer, type, zoom lens, zoom range, battery type, lenses included, shutter speed, etc.) and then tailor that for Digital Cameras (recording media, megapixels, image type, file sizes, LCD monitor size, etc.), and then tailor that Attribute Set for Video Cameras. This way we are practically creating object oriented classes, where related classes inherit attributes from others, overriding and/or deleting some, and adding others. Which means the same attributes can be reused, and are first class citizens in the system architecture. That is, for example, product searches can easily be refined in terms of the attributes assigned to them.

So, to illustrate, I went to Catalog > Attributes > Manage Attributes and then clicked on the Add New Attribute button (upper right). This opened up a form split into Attribute and Frontend Properties, corresponding to the Properties vertical tab. Clicking on the Manage Label / Options tab is where you actually get to put in the labels for Admin and Store(s), and the labels and values if the Catalog Input type for Store Owner is set to Drop Down or Multiple select.

So I entered the following values:

Field name / Value / Notes

Section	Field name	Value	Notes
Properties/Attribute Properties	Attribute Code	camera_manufacterer
	Catalog Input Type for Store Owner	Dropdown
	Apply to	All Product Types
Properties/Frontend Properties	Use in quick search	Yes
	Use in advanced search	Yes
	Comparable on Front-end	Yes
	Use in Layered Navigation	Yes	Product Category must have “Is Anchor” set to “Yes”
	Visible on Product View Page on Front-end	Yes
Manage Label/Options / Manage Titles	Admin	Camera Manufacturer	At this point I clicked on the Add Option button in the Manage Options (values of your attribute) section of the form
Manage Label/Options / Manage Options	Admin/Default Store View/Position	Canon/Canon/0	Added similar values for other manufacturers by continuing to click on Add Option button

When I was done adding options I clicked on the Save Attribute button. I then added three more attributes, one for Megapixels and another for Camcorder Type (SLR, Underwater…) and another for Digital Cam Still Picture (Yes/No).

Creating the Attribute Sets for the Products

As mentioned, attributes by themselves cannot be applied directly to products, in order to do that you need to create attribute sets and apply those. On first thought this might seem like an arbitrary limitation, but when you consider the immense power of end users interactively and easily creating products as classes with bona fide, searchable, multi-purpose DIY/DIE attributes, the reasons become clear. And there is no arbitrary developer decision that attributes be purchase time options for shoppers or be product definition attributes only for store owners: that is determined by product type: Simple Product (store owner supplies fixed values based on attributes included in the attribute set), Configurable Product (shopper gets to specify values), etc. So the architecture, thanks to its being based on EAV, is very powerful and open.

In order to create my Attribute Sets, I followed the instructions found in the Magento Wiki:

Following the process outlined in the Magento Wiki:
http://www.magentocommerce.com/wiki/welcome_to_the_magento_user_s_guide/chapter_3#managing_attribute_sets

Once the attributes were created, I went to Catalog > Attributes > Manage Attribute Sets and saw there was only one, Default.I clicked on the Add New Set button, entered “Cameras”, Based On (that is, inheriting all the attributes of) “Default”, and clicked on the Save Attribute Set button. The configuration section came up, as described in the Wiki, so I created an attribute folder Group named “Camera Attributes” and simply dragged the unassigned “camera_manufacturers” attribute and deposited it into the Camera Attributes group folder. That’s it. I clicked on Save Attribute Set and then hit the handy Magento Back button. That took me back to the Manage Attribute Sets, and I clicked on Add New Set, and called it “Digital Cameras”, and based it on “Cameras” this time instead of the Default set. Once I clicked on the Save Attribute Set I created the Digital Camera Attributes group folder, where I dragged the megapixels attribute.

I finished up by creating a Video Camera Attribute Set, also based on Camera, added the Video Camera Attributes group folder where I dragged the camcorder_type and digital_cam_still_picture attributes.

Finally… adding Products

Once again, the Magento Wiki explains everything you need to know and then some on the question of creating Products, which kinds of Products you can create with Magento, and the difference between Configurable Products and Custom Options in Simple Products. See http://www.magentocommerce.com/wiki/welcome_to_the_magento_user_s_guide/chapter_3#products .

The basic building block is the Simple Product, which allows Store Owners to fill in hard coded values for attributes. So a red T-shirt is one product, a blue T-shirt is a second product, etc. A configurable product combines the multiple product pages into a single one, in which the shopper defines the color or other attribute value from among the alternatives. Then you can have Grouped Product, which is a way of showing related products together, and the Custom Options feature for Simple Products (which also allow the shopper to choose between impromptu hard-coded values which have no relation to the attribute set).

To create my first Simple Product, I went to Catalog > Manage Products, clicked on the Add Product button. I selected the Digital Cameras Attribute Set and the Simple Product Product Type and clicked on Continue. The General, Prices, Meta Information, Images, Design (layout), Inventory, Related Product, Up-sells, Cross-sells vertical tab options presented forms you would expect for entering product info. Of special note were the Camera Attributes and Digital Camera Attributes tabs which appeared automatically and the Custom Options tab, which is there if you want to go a simpler descriptor non-attribute set route. I made sure I had put in all the required values, and created my first product. I edited it again and clicked on the Duplicate button, which allowed me to clone the product, changed some details and attributes (provided unique SKU, set status to enabled, changed manufacturer. etc.), and saved again.

So, look at our store now, dude (and check out those single click shopping options in the block on the left hand side):

Installing Ubercart the easy way with UberDrupal

Thanks to the very recent advances in Drupal packaged install profiles in general, installation profiles (Drupal “distributions”) are at last coming to the fore. So, enter UberDrupal, an installation profile for Ubercart. The idea is that you can install Drupal as Ubercart, complete with all the required modules and the fantastic Acquia Prosper theme, thanks to Ryan Szrama (rszrama) himself, as of November 8 last,

“I updated the UberDrupal installation profile to install and configure Acquia Prosper out of the box. With that profile, you can have a functioning Drupal store in no time flat that even integrates with the sharpest contributed theme for the task!”

So all I had to do to quickly install the whole kit and kaboodle was the following:

• Download the 2.47 MB installation profile from the project page and unpack it into a document root
• Create a MySql database and database user as you would for any Drupal install
• Point my browser to the corresponding URL and choose the UberDrupal installation profile on the first screen and install as you would any Drupal installation by following instructions
• A wizard guides you through setting up the site info and basic store configuration
• I can go to the new site, with a Catalog and About entry in the primary menu, but I do need to specify the fabulouos Acquia Prosper theme both bundled and configured for use with the new store, by taking advantage of the administration menu (black line on top of screen) and:
  • clicking on Site building > Modules, and enabling at a minimum the following modules (most should be enabled by install profile, which should be fixed in upcoming versions):
    • Content (needed for product classes)
      • Content
      • Fieldgroup
      • FileField
      • ImageField
      • Node Reference
      • Number
      • Option Widgets
      • Text
      • User Reference
  • clicking on Site building > Themes, and both enabling and making Acquia Prosper the default theme.

Doing it with Ubercart (Drupal)

In order to plan out and implement my store, I am going to give the benefit of the doubt to the best of breed specialized tool in terms of industry proven desirable feature set and patterns of use. I am simply going to say, OK, how can I do this with Ubercart, so I can have all this and Drupal too (I am basing myself on the very thorough Ubercart User’s Guide which even includes a good number of videos to make store development even easier)!

I went ahead and configured the store by visiting Adminster > Store administration > Configuration.

Setting up the Catalog

As with Magento, the first step should be the planning of the Catalog hierarchy. Let’s set up the following, as we did with Magento:

• Cameras
  • Digital Cameras
  • Film Cameras
  • Video Cameras

“The catalog module works by creating a tracking a taxonomy vocabulary (otherwise referred to as a category). The taxonomy system is one unique feature of Drupal that lets you classify nodes on your site, and a vocabulary is just a specific grouping of taxonomy terms. In the case of the product catalog, you will simply have to add terms for the categories you want in your store and then start adding these terms to products. A few features of the core catalog module include image support for catalog categories, nested subcategories with the ability to feature products in multiple categories, a catalog browsing block with the product count, and more.”

See http://www.ubercart.org/docs/user/10964/building_product_catalog

I went to Administer > Content management > Taxonomy and clicked on the add terms link corresponding to the Catalog vocabulary (list of terms). I typed in Cameras (image optional, if you enable the image cache module, automatic resizing can be configured and customized), together with a description and hit Save. Then I typed in Digital Cameras in the Title field, and added a description. I then clicked open the Advanced Options fieldset and selected the Cameras product category was the Parent, ignored the rest and clicked on the Save button.

Then I typed in Film Cameras, added a description, clicked on the Advanced Options fieldset and selected the Cameras product category as Parent, and repeated the process for Video Cameras.

Going back to the main page, nothing appears in the Catalog block yet, since no products have been created with any categories applied to them as yet.

Product classes

Product classes are the equivalent of Magento’s Attribute sets.They are used to define content types and their custom fields on the basis of which products can be instantiated.

Creating a product based on the default (superclass) Product content type in Drupal is the equivalent of applying the Default attribute set to a product in Magento.

Product Classes are not to be confused with Ubercart Attributes, which are configurable shopper option sets which can be applied to product classes and all products derived from them (not enabled by default in UberDrupal).

There’s more than one way to do it, but to gain the most out of Drupal architecture, there was no need to create a Camera product class, since I would never use it to create products. Rather, I re-used certain custom fields (equivalent of attributes in Magento), with the added bonus of these fields being by definition searchable by the Views query generator (not included, this module must be installed separately)  and all Drupal search features.

So first I created the product classes themselves within the Ubercart Store configuration, by going to Administration > Store administration > Products > Manage classes, and typing in “digital_camera” for the Class ID, “Digital Camera” for the Class name together with a description, and hitting the Submit button. I repeated the process for film and video cameras, and obtained the following:

What this did behind the scenes was to create three Drupal “content types”; so I still had to add the custom fields which store owners could fill in to create actual products. I did the following for Digital Camera:

• I went to Administer > Content management > Content types > Edit Digital Camera -> Manage fields
• I entered “Camera manufacturers” into the New field label field, and “camera_manufacturers” into the second field.
• I selected Text as the field type, and Select list as the form element (widget), and clicked the Save button.
• In the Allowed values textarea I entered a list (one per line) of manufacturers suitable for all kinds of cameras (just as I had done for the corresponding attribute in Magento) and hit the Save field settings button.
• I entered “Megapixels” in the New field Label field, and “digital_cameras_megapixels” into the next field; I selected Text as the field type and Select list as the widget and hit the Save button.
• I filled in the same list of allowed values as I had for the corresponding Magento attribute.

The end result for the Digital Camera Product Class:

Before actually adding any products for the Digital Camera product class, I needed to create the Film Camera and Video Camera product classes (Drupal content types). And in the Video Camera product class, I decided to re-use the camera_manufacturers field:

• I went to Administer > Content management > Content types > Edit Video Camera -> Manage fields
• In the Existing field section, I selected field_camera_manufacturers (Camera Manufacturers) and clicked the Save button.
• I was taken to the field configuration page and confirmed the same list of values which I had no reason to override, by clicking on Save field settings. Now, if a shopper were to search on a given manufacturer, for example, they would see both Digital Cameras and Video Cameras in the results list.
• I added two Video Camera specific fields: camcorder_type and digital_cam_still_picture

Finally, adding Products

As explained in the Creating a product video in the Ubercart User’s Guide, to create my first product:

• I navigated to Administer > Content management > Create content > Digital Camera. 
• I entered “Canon Power Shot SD1100 IS 8.0 MP” into the Name field
• I entered a Description
• I selected Digital Cameras in the Catalog list
• I entered a store-wide unique SKU value
• I entered a Sell price
• I selected Canon from the manufacturers select list
• I selected the appropriate Megapizels value
• I clicked on Save
• I repeated the process for an additional Digital Camera product, and then when I clicked on Digital Cameras in the Catalog block I had the following:

Pro’s and Con’s

Ubercart

• Your whole store and its products can be searched, listed and reported on by using Drupal’s powerful query generator module, Views (not presently installed by default with UberStore but can be downloaded and installed in minutes).
• 960 grid based Acquia Fusion theme is based on Skinr module for ease in theming with countless interactive configuration options (layout, site typography), reusable block “skins”, width handling, etc.
• Strong image handling via Image API, Image Cache and Image Field (not enabled by default in UberDrupal)
• Drupal theming template system makes the site much more open to customization.
• It’s Drupal! You can install any Drupal module you wish and fulfill all kinds of requirements
  • A zillion ecommerce extensions, payment gateways, payment methods
  • Web 2.0 features above and beyond ecommerce, like Apache Solr search, strong social networking, news aggregation, what have you.
• Ubercart does not provide a sample store data download or install but does provide a live demo anyone can reset and check out.

Magento

• As best in breed specialized ecommerce application, it implements industry specific architecture and features; attributes are central to that architecture and are fully searchable; powerful Grouped, Configurable and Bundled Product types are available off the shelf, but need to be implemented with third-party modules in Ubercart.
• Attractive store right off the bat.
• Flexibility and power due to EAV based architecture.
• Extensible via Zend Framework

I’m going with Ubercart and Drupal (this time)

I can shout and scream about how the best-of-breed specialized website application has this or that feature that Ubercart doesn’t have… but hey, I got Drupal… and the Drupal community… and that’s a big plus. Because reusability always comes out on top. Example? So if I really needed a custom EAV architecture for attributes and expose them to Views so I can make Product views based on custom Attributes? Make sure your “attributes” are not based on the Ubercart Attributes module, but instead are implemented via content type fields in product classes. Or, you could even roll your own with Alex Barth (alex_b)’s brilliant and simple Data module:

“Data module helps you model, manage and query related sets of tables. It offers an administration interface and a low level API for manipulating tables and accessing their contents. Data module provides Views integration for displaying table data and Drupal search integration for searching table content.”

It might not be too hard to integrate those attributes into Ubercart product classes… they are Drupal content types, after all. Need multiple websites? Use the subdomain and other similar modules. Need multiple stores? Set something up using content profile or organic groups as section implementors.

This may not be your decision, give the facts. It’s all good. It may not be mine either, on a project where I don’t need the width and breadth of Drupal’s social networking and CMS web application capabilities. Which has never been the case for me over the past few years.

“She was with Big Jim, but she was leaning to the Jack of Hearts…” (Bob Dylan)

“I’m not a django developer, really. I’m just Py-curious” (Well known Lullabot on Twitter)