Creating a Better Selling Experience with Drupal e-Commerce

Exclusive offer: get 50% off this eBook here
Selling Online with Drupal e-Commerce

Selling Online with Drupal e-Commerce — Save 50%

Walk through the creation of an online store with Drupal's e-Commerce module

$23.99    $12.00
by Michael Peacock | March 2009 | Content Management Open Source PHP

In this article by Michael Peacock, we will focus on creating a better selling experience for the customers of a store using a Drupal e-commerce website called 'Doug's Dinos!'.

In this article, we will learn:

  • How to add a shopping cart
  • How to add search features
  • How to auto-create user accounts
  • How to include images on our product listings
  • How to provide discounts to customers based on their role
  • How to enable coupons so customers can get discounts

Doug is an avid dinosaur and model enthusiast, and runs his own shop and museum selling model dinosaurs and offering information and facts on various dinosaurs. For the purpose of this article, we will create an e-commerce website named 'Doug's Dinos!' for Doug and his business.

Making Things Easier

Although Doug's store is relatively simple for his customers to use, it is missing three key features that would make their time on the website easier, these are:

  • An overview of the shopping cart
  • Search features
  • Ability to auto-create user accounts

At the moment, without a search feature the only way for users to find products is by manually browsing through the website and stumbling across a product they like.

Adding a Shopping Cart

We can add a shopping cart to our theme so that customers can continue browsing the website but still know how much is in their shopping cart, and easily get to it later.

To add this block, we need to go to the Blocks section, which is under Site Building within the Administer area. Within the Blocks section, we need to ensure we have all our themes selected (or do this for each theme we are using) and then change the Region of the Shopping cart to the left sidebar.

Selling Online with Drupal e-Commerce

Once we click on the Save blocks button, the shopping cart block is displayed in our theme:

Selling Online with Drupal e-Commerce

Adding Search Capabilities

Doug tested the website with a few friends and family members, and their main issue with it was the difficulty in finding products they wanted.

The first thing we need to do is install the Search module, which is grouped under the Core - optional section of Modules in the Administer area.

Selling Online with Drupal e-Commerce

With the module installed, we now need to enable the Search feature from the Blocks section; otherwise the search box won't be displayed on the website. We can select this feature by going to Administer | Site Building | Blocks, then set it up in the same way as for the shopping cart and save the settings.

We now have a search box on our website under the header but above the main menu!

Selling Online with Drupal e-Commerce

Let's try searching for one of our products, for instance T-Rex. Notice something? No results found! This seems quite strange as we have a product with T-Rex in the name, so why didn't we get any results?

The reason for this is that Drupal has not yet been indexed. Drupal uses a cron job to create the index of the site. Without the indexing done Search options cannot work. The Search settings under Administer | Site configuration allow us to specify how many pages are indexed per "cron run" and allow us to set the site to be re-indexed.

Cron Jobs
A cron job is a setting on your web host's server (if you have cPanel hosting, it is available under "crontab") that performs tasks at specific times. Drupal has a special page that performs various tasks; this can be called by a cron job so that it regularly opens the page and runs the tasks.

Selling Online with Drupal e-Commerce

This setting depends on having set up a cron job to periodically call the cron.php file. For more information on setting up cron jobs, you should contact your web host. Typically it involves a crontab setting in your hosting control panel such as cPanel.

We can manually run the cron task, by opening the cron.php file in our web browser. In this case we just open: http://www.dougsdinos.com/cron.php.

Once we have opened this page, let's try searching for T-Rex again. This time we will get some results!

Selling Online with Drupal e-Commerce

Customers will now be able to find products and other content on Doug's website much more easily!

Auto-Creating User Accounts

If a customer is not a user on our site, we can automatically create a user account for them once they have placed their order; this saves the inconvenience of using an anonymous purchase policy where the user has to log in or register, but it gives the user the added convenience of having their details saved for future orders.

This is something Doug wants to enable to make things easier for regular customers on this site. The first thing we need to do is install the module. The module is called EC Useracc and is listed in the E-Commerce Uncategorized group of modules.

Selling Online with Drupal e-Commerce

Now under E-Commerce configuration we have a new option called User Account; let's take a look at it. This has the following settings:

  • Confirmation e-mail
  • Welcome mail
  • Days to confirm expiry

The Confirmation e-mail is to see if the customer wants to create a user account; this email expires after the number of days set in the Days to confirmation expiry setting has passed, and the Welcome mail is the email sent when the account is created. These emails can be configured on the Mail page.

These settings don't actually enable the feature though; we have installed the module and looked at the global settings, but to actually get it to work we need to set how we would like each product to work in relation to this module. If we go to edit any product, there is a new section, which was not there previously, called User account provision; this is what we need to change.

Selling Online with Drupal e-Commerce

As Doug wants this feature enabled, we need to check the option Create an account for the user when this product is purchased. The other option, Block the user's account when this product expires, relates to using recurring billing in products (mainly non-tangible products i.e. services) such as a customer support contract or a magazine subscription.

Selling Online with Drupal e-Commerce Walk through the creation of an online store with Drupal's e-Commerce module
Published: April 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Adding Images to Products

Doug is not happy with the products on his website as they don't have any pictures next to them, so he wants to upload some for his customers to know what they are buying.

There are quite a number of different methods for adding images and other related files to products and content types. First, let's have a look at the methods available:

  • A built-in upload module
    • Listed as an attachment
    • Embedded into the description
  • A third-party image module
    • Embedded into the description
    • As a product

Both these modules have their own merits and uses; the upload module can be used to upload files that are attached to a content element such as a product or a page. Attachments can be directly linked to or listed with the content.

CCK Module
Drupal's Content Construction Kit module along with Imagefield and Imagecache modules can provide a richer product view and improve a product's feature.

A third-party image module can be used for uploading an image as a file in its own right; we can then embed this image into content (primitively using links and HTML tags) or we can edit the image to become a new content element, such as a page or a product and then turn it into the product we want. If we use this method then the image is automatically displayed in the product listing.

Built-in Upload Module

To enable this we need to install the Upload module, and then we can edit the product and upload the images.

Selling Online with Drupal e-Commerce

This module is not just for use in the e-Commerce section; we can use it for pages and other types of content to add images to the site.

Let's edit a product and also add a picture of that product. In the edit screen, we have a new section called File attachments; this is what we use to upload the pictures to the product. To try it out I'm just going to use the company’s logo as the picture.

Selling Online with Drupal e-Commerce

List as Attachment

To list the image as an attachment on the product page we need to leave the list box checked (as shown in the previous image) and then save the product. Now when we view the product we have a list of attachments at the bottom of the page.

Selling Online with Drupal e-Commerce

This is particularly useful for attaching files such as PDF fact sheets about the product in question.

Embed Image into Description

For images, having a list of attachments isn't very good, so let's embed the image into the product description using HTML.

If we go back to Edit the product, and scroll down to the attachments, the URL of the image is shown; we need to make a note of this: http://www.dougsdinos.com/drupal-5.7/files/garland_logo_0.png.

To use this image, we would add the following HTML in the Description section:

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='http://www.dougsdinos.com/drupal-5.7/files/garland_logo_0.png'
style='float:left; padding: 5px;' alt='PRODUCT NAME' />

This adds the image, and allows text to wrap around it (but leaving some space) so it looks nice on the page, the end result is shown below:

Don't forget to select the correct input format! Otherwise Drupal will remove our HTML code when we create the product!

Selling Online with Drupal e-Commerce

Third-party Image Module

The Image module is one that we must download and install into our Drupal installation; it can be downloaded from the Drupal website: http://drupal.org/project/image.

Once we have downloaded the Image module package, decompressed the files, and uploaded it to our installation we need to enable the related modules within the package, including:

  • Image
  • Image Attach

We don't need the other sub-modules at this time, so let's enable these two for now.

Selling Online with Drupal e-Commerce

Now that we have it installed, let's have a look at the module and how it works.

Within Site configuration there are two new sections, Image and Image attach. We are only concerned with the Image section. It has the following settings:

  • The default path where the images are stored
  • The maximum file size of images uploaded
  • The sizes of the image, preview image, and thumbnail

For now, we shall leave these values as they are and upload an image.

Embed Image into Description

To upload the image, we need to go into Create content and select Image.

Selling Online with Drupal e-Commerce

The Submit Image page asks for the following information:

  • Title (required)
  • Image (required)
  • Description or body

We can also change settings for things like comments, menus, and author information and set the image to be a product (we will try that next). Once we have uploaded an image and entered the name of the image we are taken to the page containing the image. From here we can swap between Original view, Preview, and Thumbnail.

The best way to embed an uploaded image is to right-click on the thumbnail picture and copy the URL of the web address, and then do the same for the preview image. We can then add the HTML for the image and link it to the larger version of the image.

For the image I have just uploaded, the thumbnail link is: http://www.dougsdinos.com/drupal-5.7/files/images/1847191118.thumbnail.jpg and the preview link is: http://www.dougsdinos.com/drupal-5.7/files/images/1847191118.jpg. We can now create the HTML link for this and add it to the product page.

<a href='http://www.dougsdinos.com/drupal-5.7/files/images/1847191118.jpg'>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='http://www.dougsdinos.com/drupal-5.7/files/images/1847191118.thumbnail.jpg'
alt='PRODUCT NAME' />
</a>

As a Product

The embedded option is not very practical because it involves looking up the image locations and creating the HTML code for the product. If we are creating a new product, we could create the image first, and then turn the image content into a product. To do this, we go through the process of creating the image as we did before, but we expand the product options and select a product type for the image.

Selling Online with Drupal e-Commerce

We select the product type, click Add to store, and then we can continue editing the product, using the Title and Body fields for the product name and description.

This method creates a neater product entry with the image already there for us, which is much neater and cleaner than the other methods.

Selling Online with Drupal e-Commerce

CCK
The CCK module and other image modules mentioned earlier also provide the same effect; you can try them out!

Selling Online with Drupal e-Commerce Walk through the creation of an online store with Drupal's e-Commerce module
Published: April 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Discounts

Many online stores offer discounts to customers by one means or another; we can use the following methods to offer our customers discounts when shopping at the store:

  • Discounts based on the customer's role
  • Coupons or gift certificates
  • Discounts when customers purchase a certain number of items

The first two are built-in options, which just need to be enabled; the final option requires us to install a new module into our store.

Role-Based

Let's first enable the module in the same way we have enabled all of the other modules; the module is called Role Discount.

Selling Online with Drupal e-Commerce

Once it is enabled there is now a new option under E-Commerce configuration, called Role discount. This page lists a text box alongside each of the roles in our store, for us to enter the discount for each respective role. Doug wants to offer a number of different discounts to his customers:

  • Doug wants to offer a discount of $2.99 for customers who are new users to his site but have already registered.
  • He wants to offer a discount of $15.99 to customers, who have already made a purchase, and thus are in the customers' role.

Selling Online with Drupal e-Commerce

If we now go to the products page as a user who has been assigned the customers role, the price has automatically changed to reflect the discount. It does not inform us of the change, and as far as the user is concerned the cost has never changed unless they can recall it from before they logged in.

Selling Online with Drupal e-Commerce

About the Author :


Michael Peacock

Michael Peacock is a web developer from Newcastle, UK and has a degree in Software Engineering from the University of Durham. After meeting his business partner at Durham, he co-founded Peacock Carter, a Newcastle based creative consultancy specializing in web design, web development and corporate identity.

Michael loves working on web related projects. When he is not working on client projects, he is often tinkering with a web app of his own.

He has been involved with a number of books, having written two books himself (and working on his third): Selling online with Drupal e-Commerce Packt, and Building websites with TYPO3 Packt. He has also done technical reviews of two other books: Mobile Web Development Packt, and Drupal Education & E-Learning Packt.

You can follow Michael on Twitter.

Contact Michael Peacock

Books From Packt

Drupal 6 Social Networking
Drupal 6 Social Networking

Drupal 6 Themes
Drupal 6 Themes

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Joomla! Web Security
Joomla! Web Security

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

MODx Web Development
MODx Web Development

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

 

Your rating: None Average: 4 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
6
W
A
t
q
g
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software