MJC SEO & Web Development Blog > Tutorial: Improving the Drupal Commerce user and admin experience – examples with rules and VBO modules

Tutorial: Improving the Drupal Commerce user and admin experience – examples with rules and VBO modules

A Compilation of Drupal Commerce modifications and enhancements – user friendly anonymous checkout, efficient store administration, address label printing

About Drupal Commerce

Out of the box, Drupal Commerce is not, as yet, very streamlined in terms of purchaser experience or non-technical store administration. In part, this is due to it’s relative youth in development and especially in wide deployment, but a significant factor is the modularity: A lot of functionality that is provided as part of the default system in Ubercart must be installed as an optional companion module with commerce – for example, there is no shipping or payment without installing the relevant modules. However, even with these modules there is still a lot for the web developer to do for more than a very basic setup, and Commerce may even seem clumsy and limited in what it can do. What may not be realised is the excellent integration with the Rules module gives Commerce a significant amount of power and flexibility under the hood. In this guide I am going to be using this module extensively and will be sharing some ideas on improving the customer experience and ease of non-technical admin on a typical Commerce site.

Update November 2013

Commerce has matured into a stable and well supported platform, however it’s basic out-of-the-box nature and modularity remain.
A significant proportion of commerce developers now use the Commerce Kickstart platform for building typical use case sites, a commercial but open source project.
Although nearly all development work to create a typical online store is already done, configuration of products and the last parts of development have a steep learning curve (and work differently to vanilla Commerce) – to the point that some developers use the ‘example store’ with products, taxonomies etc already set up as a base to build from rather than using the platform installation. It should be stressed that there are many ways to build a feature-rich store with Drupal commerce, the Kickstart platform is not the only way to go. For other non-typical use cases the Kickstart platform carries a large overhead. Everything in this tutorial is likely to still be of use if building from a basic Commerce installation.

Some ideas worth implementing are found here: Express checkout with Drupal Commerce -the main thrust of the article is setting up a ‘buy now’ instead of ‘add to cart’ functionality, but it walks through some aspects of the setup process which are worth doing on all Drupal Commerce sites. This guide assumes you already have a basic Drupal Commerce site set up. In this guide I am going to use the Rules, Views and Views Bulk Operations  to tackle several specific points where the system has current issues or a lack of built in functionality.

Covered in this tutorial

  • Fixing the default order success page for anonymous orders – account creation on purchase, auto log in, redirect to order page
  • Improving the information displayed to purchasers
  • Setting up a decent workflow for handling orders
  • Improved handling of delayed payment options (e.g. cheque, bank transfer)
  • A store admin page showing just orders waiting to be sent out, rather than all orders
  • Bulk operations on order tables
  • Printing Address Labels with VBO

 

Improved Handling of Anonymous/First Time Orders

new anonymous drupal commerce order page

An improved order success page for anonymous users/first-time customers, made with Rules


By default, in Drupal Commerce when an anonymous user checks out a purchase, they are presented on order completion with a page with very minimal info, only the order number and the below: “Thanks for your order – please click here to view your order when logged in”. Of course, anonymous users by definition aren’t logged in, and clicking the link gives them a generic “access denied” error with no further info, which is very unfriendly:

The link does work for authenticated users, but even then it would be desirable to display the order details on the confirmation page rather than requiring a click. An easy fix would be to edit the message to not have that link – but the page doesn’t show details of their order apart from the order number, and some things (e.g. selected postal method) are as far as I know impossible to output via tokens to this page. Others have tackled the issue by forcing customers to create or log in to an account before ordering, but requiring registration is not going to be optimal for all e-commerce sites. The page that a logged in user is taken to on clicking the link mentioned above link would be to some extent the perfect order confirmation page, apart from not having a success message. So how to get past the access denied error? First, we must make sure that accounts are fully and instantly registered with the site and do not require confirmation or admin approval to be accessed. Second, we set up an automatic redirect to the previously mentioned, previously inaccessible new order page with rules:

System Setup

Go to the configuration > users page, change settings to “anyone can create an account” and untick “e-mail verification needed” – this enables instant account creation and verification. Now a user can see their own order details page on checkout without any errors. Note – this will enable spam signups to your site, so depending on needs you may wish to make your standard user registration page inaccessible. On the site I developed this store for I disabled the registration page, but a need arose for a functional registration system alongside this which I found a fairly simple solution for using Webform, stay tuned for a follow-up article.

Rules Setup

Here we set up a rule that sends a customer straight to their order details page. Add a new rule in workflow > rules – call it “Redirect to order page”. event: on completing checkout action: page redirect [commerce-order:customer-url] The order details page doesn’t have any success message – but we can display our own with the rules action “display a message on the site” – and even improve on the basic setup with different messages for logged in (repeat) and anonymous (first time) purchasers.

Setting new order success messages

To set an order success message for anonymous users:

Add an action to “create a new account for an anonymous useraction: display a message on the site (add your message for first-time purchasers) You can use HTML. The default “status” styling with a green tick is fairly good for a success message.

Set order success message for authenticated users and repeat purchasers

Create a new rule – call it “Show a success message for authenticated purchasers” Event: on completing checkout Condition: NOT entity is new [site:current-user] Action: display a message on the site (add your message for repeat/logged-in purchasers) Give both of these rules a high weight (large number) so they only run after successful evaluation of the rest of the “on completing checkout” rules. I haven’t yet got this to work properly for payments involving an off-site redirect (eg Payapl WPS), so to handle these I would recommend customising the default success page to not have a link to the order details and to just instruct purchasers to log in via their e-mail.

Setting up a good order handling scheme

This is sometimes a stumbling block. The Commerce system has several stages an order can be put through, but how these are used and when is up to the developer. They are:

  • Pending
  • Processing
  • Complete

(There are multiple stages before an order is successfully placed but those are not relevant here). The most sensible way to use these for a good workflow is:

  • Pending – order received, but payment not authenticated
  • Processing – Payment authenticated, items to be readied for dispatch
  • Complete – Order has left on its way to customer.

If further stages are necessary for your enterprise, there is an optional module to achieve this.

Update Order status on payment completion automatically

Building on this idea, a great rule to add that saves work in the store back end, especially with non-instant payments is: Event: When an order is paid in full Condition: None Action: Update Order Status: Processing With payments where authentication comes through some time after the order is placed, this helps ensure your store is up to date without any work.

Improved Delayed Payment Handling

If using modules like cheque or bank transfer, there is currently no inbuilt way to show the relevant details (bank account number to make payment to / address to post cheque to) except on the ‘payment’ page of the checkout process (with an instruction to write it down before placing the order…). The bank_transfer module does not recommend use on production sites because of this issue. Again, this can be solved by adding more rules with actions to display a message on the site, when meeting certain conditions. As set up, it shows the payment details to the user on their order page until the payment is marked as cleared in the system, when it automatically stops showing.

Rule Setup

Event: On viewing order
Condition: payment-method comparison = your payment method (e.g. cheque)
Condition: order-balance > 0 (this will stop showing the message once the payment is cleared in the system)
Condition: data comparison: site:current-page:url = [commerce-order:customer-url] (if this condition is not added, the message will show wherever orders are displayed (multiple times if looking at the ‘orders’ page in admin, for example), instead of just on the customer’s order page.
Action: Display a message on the site Set high (higher number) weight for the rule, so that it is displayed below any success message from checkout completion, and if you wish change the message type to from status (suitable for a success message) to “warning” (suitable for information), which will seperate the two messages into different boxes and give them a different visual context. You can always style the output of the messages just for this page if you wish, though I have found the default presentation to be acceptable (example of first time order):

 

A page for store admin to ship orders from

The orders page store > orders for order administration is quite lacking in terms of useful information. It’s simple enough to edit which fields are displayed in the View which creates it. For the use of someone who’s job it is to post out orders, the page is not easy to use at all. Create a new view of orders as a table (you can also clone the default orders view and adjust), calling it “Processing Orders”. This will handle just orders that are paid for and ready to be shipped out. The basic view includes these fields:

  • Name
  • Line Items
  • Shipping Address
  • Order Total
  • Order Balance

Use a filter on order status to just show processing orders, and in the centre column of the views admin you can set a URL and menu entry for admins to access this new page by.

Using Bulk Operations to speed up order handling

If you don’t have it already, install the module Views Bulk Operations (VBO). This is a powerful module that lets administrators achieve tasks on multiple items in the database with a checkbox interface.

Excuse the backwards English, one of those 3AM errors that stayed in

To mark orders as shipped/complete en masse

We need to create a component in rules – this is like a segment of a rule that can be used by other rules or modules. Component type: Rule Add a parameter at the bottom (commerce product) Set the action to “change order status” – completed Go back to your view, and add a field “VBO”. Select the component you just created as one of the possible actions. Now you can mark orders as complete (shipped) en masse instead of one at a time via at least three clicks each. It’s also easy to set up an option to delete orders in bulk.

To add a basic Address labels Printing page (for shipping out orders)

This allows a non-technical admin to tick the checkboxes on a batch of orders on the ‘processing orders’ page and then click a button to be taken to a page with those labels formatted for printing. First, add a new display to the previously created processing orders view. The only field needed is shipping address. Give the display a URL. In the views ‘advanced settings’ add a contextual filter, select “order id” In the original processing orders display, edit the VBO field and create a “pass argument to page” operation. Call it “print address labels”. Pass to the URL of the print labels page. Select the “multiple arguments” option. Now, whatever orders are selected with the VBO checkboxes can be displayed for address label printing. You will need to do some CSS styling with print styles.

One Trackback

  1. [...] my previous post on Drupal Commerce’s powerful integration with Rules, I explained a way to improve the anonymous user experience on completing an order, but it required [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*