Drupal e-Commerce Module Advanced Use

As more Web developers choose to utilize content management systems (CMSs) for creating websites, there is a growing interest in using CMSs for types of websites not initially envisioned as content management scenarios. First among these are e-commerce sites, which normally are created using shopping cart systems that generate all of the pages of the site, or "bolt-on" e-commerce services that provide links that the developer uses within a custom-built site.

These two online worlds have been largely separate from one another, because CMSs were never intended for managing product inventory, tracking customer items chosen, allowing checkout with electronic payment, and all of the other functions typically associated with an online store. But all that is changing, as independent developers begin to create powerful e-commerce modules that work within some of the leading CMSs.

One of the most widely known examples of this is the e-Commerce module built for Drupal. It attempts to combine the realms of shopping carts and CMSs, and is already in use throughout the world for a range of online shops.

In this tutorial, I will examine many of the advanced features that one can take advantage of, to make a basic Drupal/e-Commerce store more functional and probably more profitable for you, the store owner. I will assume that you already have Drupal 5.7 and the 5.x version of the e-Commerce module. (For more information on how to get started with these technologies, see my earlier tutorial.)

First go to Administer > Site building > Modules, and confirm that the Token module is enabled, as well as the following: Store and Address, plus the modules supporting the product types that you want to offer and the payment methods you want to make available to your customers.

Shopping Cart Element

With most if not all typical shopping cart solutions, every page contains an element (i.e., a defined region on the Web page) which contains a summary of the current state of the customer's virtual shopping cart. These boxes usually contain a graphic of a shopping cart, as a visual cue, as well as the number of products currently in the customer's cart, the total cost of all the items, and links to go to a more detailed shopping cart page, where changes can be made to the cart's contents.

But with Drupal and the e-Commerce module, by default, there is no such shopping cart element displayed on the pages. I will now show how to remedy that.

Go to Administer > Blocks, find the "Shopping Cart" block, and assign it to one of the active regions on your page, such as the right sidebar, which is what I will do in this example.

Product Search

Your online store will certainly not be profitable to you nor pleasing to your customers if they are unable to find the products they are looking for. In fact, probably nothing frustrates prospective customers more than finding a site that promises to make available what they are seeking, and yet makes it impossible for them to actually find those products.

Fortunately, Drupal has solid search functionality built in, and you can take advantage of that for product searching. Admittedly, if your site is only going to be offering a handful of products (or services), and you list all of them prominently on the home page, then there would be no need for a search feature. But for most e-commerce sites, a product search feature will be a welcome part of the site, which most likely will result in increased sales and referrals — especially if every product has its own URL, and people can easily tell others about a product they think would be of interest to them.

To add a search box to your site, go to Administer > Site building > Modules, and enable the Search module located in the "Core - optional" list.

Next, go to Administer > Blocks, find the Search block, and assign it to an active region. Your choice of course depends upon the design layout that you desire for your site, but a popular choice is to place all of the navigation blocks and their menu items in the left sidebar, and place the shopping cart and search boxes in the right sidebar.

For illustrative purposes, I have created a few sample products, including a couple "widgets" — all listed on the Products page. Clicking on the name of the first one, takes us to the product detail page, shown below.

Entering the term "widget" into our new Search field, and clicking the Search button, you might expect all of the widgets to be found, but they are not.

No results are returned because the Drupal search module can only look through pages that have been indexed, and at this point none have — at least for our sample site; you may receive different results if you have indexed your site. If you have not, go to Administer > Site configuration > Search settings, and click the "Re-index site" button (twice, for confirmation), and you should receive notification that the index is scheduled to be rebuilt the next time the cron job is run.

Then go to Administer > Logs > Status report, and under "Cron maintenance tasks", click the link to run the cron job manually (assuming that you have not set up your site to do that automatically and frequently).

Now when you search for any term in your product listings, the search results will include your matching products.

Product Images

Some types of products, such as office and medical supplies, are so standard that exact descriptions alone are sufficient, with no need for product images. But for more consumer-oriented products, a visual depiction of the individual product is essential, and could make the difference between securing a sale or the prospective customer leaving your site for the next one listed in their search engine results.

In Administer > Site building > Modules, enable the Upload module, which will allow us to upload product images.

To test this upload ability, go to Administer > Content management > Content, and edit one of your products. Within the product details page, you will see a new expandable section, titled "File attachments".

If you use that section to attach a product image file, and save the results by clicking the "Save configuration" button at the bottom of the page, then when you or a visitor to your site views the product listing page, they will see the image file attached.

But this method only attaches a link to the image. For the visitor to actually view the image, they have to click the link. This might be acceptable for just a few products, but will soon prove tedious for any prospective customer who wishes to see the images of many products. However, this approach is best for attaching large files to a product, such as a technical specification document in PDF format.

I want the product image displayed within the product page itself. There are several ways that you can do this. The simplest and most manual way, is to copy the URL of the image file, and add that to the product's description. Go back to the "File attachments" section, and underneath the filename entry field, copy the URL of the image file. In our example, the URL is "http://localhost/m_d/_w/Drupal e-Commerce/files/product_image.jpg".

Insert into your product description an <img> tag pointing to the product image URL.

Be sure to specify the "Input format" to be HTML; otherwise, your <img> tag is filtered from the description when you enter it.

The simplest way to place the product image to the left or right of the text, would be to float it. Other CSS techniques can be used to modify the appearance of the image within the product page, as desired.

Another option for adding an image to a product page, is to use the Image module.

Calculating Taxes

In order to include taxes in any customer's order, you first need to enable the Tax API module.

You can then specify a wide range of tax rules depending upon such conditions as product type and customer's shipping location. To do so, go to Administer > E-Commerce configuration > Taxes, and click the "Add tax" link. In this example, I am going to charge 7.25 percent for any California-based customers.

The appropriate tax rule will be applied when the customer goes to check out, and the tax will be displayed on the "Border Summary" page.

Shipping Costs

In order to calculate the shipping costs for a customer's order, the Drupal e-commerce module supports two approaches — the Shipping API and Flexicharge. The former works in conjunction with shipping modules, such as those for USPS, FedEx, and UPS in the United States, as well as the postal services of Australia and Canada.

For purposes of illustration, I will try to set up shipping for FedEx and UPS, by also enabling the Shipcalc module, in Administer > Site building > Modules.

Within Administer > E-Commerce configuration, there is now a new section for Shipping. (Oddly, FedEx is not listed.)

Each shipping method has its own required information, and I won't go into those details here. After you have chosen the shipping methods you want available to your customers, click on the Products link, and designate what types of products you want to associate with the particular shipper, and then what classes of shipping services.

Conclusion

This tutorial, and its prequel, should together be sufficient to assist any reader in developing a virtual store using Drupal and the e-Commerce module, and also show how easy it is to do so.

As of this writing, a version of the module is under development for Drupal 6.x, and it will undoubtedly offer even more capabilities and potential for your online store.