Selling Online with Drupal e-Commerce — Save 50%
Walk through the creation of an online store with Drupal's e-Commerce module
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.
Once we click on the Save blocks button, the shopping cart block is displayed in our theme:
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.
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!
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.
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.
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!
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.
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.
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.
eBook Price: $23.99
Book Price: $39.99
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.
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.
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.
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.
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!
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 Attach
We don't need the other sub-modules at this time, so let's enable these two for now.
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.
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.
<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' />
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.
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.
The CCK module and other image modules mentioned earlier also provide the same effect; you can try them out!
eBook Price: $23.99
Book Price: $39.99
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.
Let's first enable the module in the same way we have enabled all of the other modules; the module is called Role Discount.
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.
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.
About the Author :
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.
Books From Packt