Setting up an online shopping cart with Drupal and Ubercart

Exclusive offer: get 50% off this eBook here
Drupal 7 Business Solutions

Drupal 7 Business Solutions — Save 50%

Build powerful website features for your business with this book and ebook

$29.99    $15.00
by Trevor James | December 2011 | Drupal e-Commerce

In this article by Trevor James,author of Drupal 7 Business solutions we install and configure the Ubercart module for Drupal 7 in order to set up an online store and e-commerce system for our client who owns a bakery called Artisan Bakers Collective. Our client wants to offer their baked goods and other products online so their customers can order and pay for their bread and other baked goods ahead of time and then pick them up in the store. Follow along as we set up a basic Ubercart driven e-commerce system in Drupal 7.

(For more resources on Drupal, see here.)

Setting up the e-commerce system

Ubercart has existed since Drupal 6 so those users who have used Ubercart with Drupal 6 will have some experience setting up and configuring this module for Drupal 7. In this section we'll install and set up the basic Ubercart configuration.

Goal

Set up the system that will allow visitors to purchase take-out from the website.

Additional modules needed

Ubercart, Token, Views, CTools, Entity, Token, Rules (http://drupal.org/project/ubercart).

Configuring Ubercart

In order to utilize an e-commerce solution within a website, you must either build a solution from scratch or use a ready-made solution. Because building a professional e-commerce solution from scratch would take an entire book and weeks or months to build, we are fortunate to have Ubercart, which is a professional quality e-commerce solution tailor-made for Drupal. To begin using Ubercart:

  1. Download and install the module from its project page. The current stable release for Drupal 7 is 7.x-3.0-rc3.
  2. To use Ubercart, you will also need to install some dependency modules in order to get the best functionality and performance from Ubercart. These dependencies are listed on the Ubercart Website: Token, Views, Rules, CTools, Entity API, Entity Token and Token. Go ahead and install and enable the dependency modules and Ubercart.

Once installed, we will begin by enabling the following Ubercart modules:

  1. All of the modules in the Ubercart—Core section including Cart, Order, Product, and Store.
  2. Then enable the following Core (Optional) modules: Catalog, File downloads, Payment, Product Attributes, Reports, Roles, and Taxes.
  3. Then in the Extra section enable the following: Product Kit and Stock.
  4. For our Payment method and module enable the Credit card, PayPal, and Test Gateway modules. We will not be shipping any items so we do not need to enable shipping modules at this point. There are a variety of other modules that can be optionally enabled. We will explore some of these in future topics.

If you are planning to use the PayPal Express Checkout payment method with Ubercart you should make sure you have enabled the CURL PHP extension for use in your PHP configuration. To do this you can ask your hosting company to enable the CURL extension in your php.ini file. Otherwise if you have access to the php.ini file you can open the file and uncomment the CURL extension to enable it. Then save your php.ini file and restart the Web server. When you check your PHP info via the Drupal status report you should see the following section showing you that the PHP CURL extension is enabled.

 

 

Now, you should see the following Ubercart modules that you have enabled on your main modules configuration page:

 

Ubercart installs a new menu item called Store next to the menu item called Dashboard in the Administer menu bar, which includes the options shown in the following screenshot:

 

The first thing you'll notice is a warning message telling you that one or more problems exist with your Drupal install. Click on the Status report link. On the Status report page you'll see a warning telling you to enable credit card encryption. In order to use Ubercart for payment processing for your online store transactions you first need to set up an encryption location for your credit card data.

 

To do this click on the credit card security settings link. That will load the Credit card settings screen. Under Basic Settings, for now let's enable the Test Gateway. Later we'll discuss integrating PayPal but for testing purposes we can use the Test Gateway configuration.

 

Click on the Security Settings tab. Here we need to set up our card number encryption settings. We can first create a folder outside of our document root (outside of our Drupal directory) but on our web server to hold our encrypted data. We'll create a folder at the root level of our MAMP install called "keys". Go ahead and do this then type in /Applications/MAMP/keys in your Card number encryption key file path field. Also make sure the folder allows for write permissions.

 

Now click on the PayPal Website Payments Pro tab and disable the gateway for use. Click on the Test Gateway tab and leave this enabled for use. Click on Credit card settings and leave the defaults selected. Under Customer messages you can specify any custom messages you want to show the user if their credit card fails during the transaction process. Click Save configuration. When you save your configuration you should get the following success message:

Credit card encryption key file generated. Card data will now be encrypted. The configuration options have been saved.

Now, we have successfully set up our payment processing with the Test gateway enabled. We're ready to start using Ubercart.

To begin using Ubercart, we will need to:

  1. Edit the Configuration settings, which are shown in the following screenshot:
  2. Clicking on the Store link allows you to configure several options that control how information on the site is displayed, as well as specify some basic contact information for the site
  3. To edit the settings for a section, click on the tab for that section. On the Store settings page, we simply need to update the Store name, Store owner, e-mail address, phone and fax numbers for the store. You can also enter store address information.
  4. If your store is not located in the United States, you will also need to modify the Currency Format settings. If you are shipping items you may need to tweak the Weight and Length formats. You can also specify a store help page where you'll provide help information. You can simply create a new page in Drupal and alias it, and then type the alias in here.
  5. Once you finish entering your Store settings click the Save configuration button

Configuring Ubercart user permissions

You should also create a role for store administration, by clicking on User management and then Roles. We will call our role Store Administrator. Click Add role to finish building the role. After the role has been added, click the edit permissions link for the role to define the permissions for the new role. Ubercart includes several sections of permissions including:

  • Catalog
  • Credit Card
  • File Downloads
  • Store
  • Payment
  • Product
  • Product attributes
  • Product kit
  • Order
  • Taxes

Since this is an administrative role you may just want to give this staff person all permissions for an admin level role on the site. Go ahead and check off the permissions you need to grant and then save your role's permissions.If your site has employees, you may also want to create a separate role (or several roles) that do not give full control over the store for your employees. For example, you may not want an employee to be able to create or delete products, but you would like them to be able to take new orders.

Ubercart provided blocks

The Ubercart module ships with a core block that you can enable to make it easier for visitors to your site to see what they have ordered and to check out. Go to your blocks administrative page and you can enable the Shopping cart block to show in one of your block regions. I'll put it in the Sidebar second region. These are the basic configuration options which need to be done after you enable the block. Click on the configure link and then you can title your block, select whether to display the shopping cart icon, make the cart block collapsible, add cart help text ,and more. I'll leave the defaults selected for now. You should see a block admin screen similar to the following:

 

Drupal 7 Business Solutions Build powerful website features for your business with this book and ebook
Published: January 2012
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Setting up our client's Store Catalog and Menu

Goal

Create the take-out menu that visitors can order from.

Steps

Now that we have completed the basic configuration of the store, we can begin to add products to the store.

  1. Products are added to Ubercart from the Product manager, which is accessed by selecting Store and then PRODUCTS from the Administer menu.
  2. We can now select Manage classes, which will allow us to define the content types that are used to build products. We will enter a new class for our Breads, with the settings shown in the following screenshot:
  3. Click Submit to save the new class. After you add an Ubercart class, it creates a corresponding Drupal content type for this class. So now you can click on Add content to use your new Breads product content type.
  4. We can now create a new Breads product by clicking on Add content and then Breads. You will get a content type form just like all the other content types you've already worked with but with a few specific Ubercart based product items.
  5. We start by entering basic information for the take out item, including the Name and Catalog tag via the taxonomy_catalog drop down. Adding a tag will ensure that the product gets displayed in the default Ubercart catalog. I'll tag this product with Bread and Sourdough. You can add a product description, and upload a product image:
    Ubercart adds a Product Information section to the content type form. Here you can specify a SKU number for your product. The SKU stands for Stock Kit Unit and acts as an administrative key for your product. This helps Ubercart allow you to keep stock reports on your items since each product item will have its own SKU number. Your users may never see this field's value but it will help you out administratively since you'll be able to use the number when you run your stock reports later.
  6. This is a required field so just type in a SKU number such as sourdough01. You can add your list price and sell price, and uncheck the box for Product is shippable since we're not going to ship the item.
  7. If you will be shipping the product via a delivery service, you should enter the weight and dimensions so that Ubercart can correctly calculate shipping charges. The SKU (stock-keeping unit) number is a number that uniquely identifies the product in your catalogue. If you have an existing catalogue, you should use that number here. If you do not already have a catalogue, you can create your own system here. Although you only need to enter the selling price for an item, entering the List price and Cost can help you to calculate your profit on each item. Those two prices are optional
  8. When you are happy with the product definition, click the Save button.
  9. The resulting product will appear similarly to the product shown in the following screenshot. This is what your site visitor and customer will see. Notice that the product node contains an Add to Cart button.
  10. To display a full catalog of products we can visit the /catalog URL. Ubercart will build this catalog of products dynamically based on the tags we've used on our products. Also, make sure you have given your anonymous user role access to View the catalog in the user permissions. It is not enabled by default
  11. Once the catalog module has been activated, you can access the full product catalog at yoursite.com/catalog. If you open the catalog now, you will see the Sourdough, Breads and the other categories that we added to the taxonomy earlier. If you click on the Bread and Sourdough tags, it will show our sourdough bread product since we tagged that product with those terms. If you had multiple products tagged with sourdough it would show all of them in the resulting sourdough table of products. Here are screenshots of both the main Catalog page and the product specific term display:
  12. To quickly review how we have applied these terms to our product we need to select Structure and then Taxonomy to open the Taxonomy manager. Then, edit the Catalog taxonomy item and add your specific catalog tags that you want to use, as shown in the following screenshot:
  13. The catalog taxonomy will be automatically added to our Ubercart Product type that we've defined via Manage Classes. You can optionally add images to each term. The images will be displayed on the catalog page, which can make for a nicer-looking catalog
  14. We can now edit our Sourdough bread product to add the correct taxonomy items, as shown earlier.
  15. To make it easier for customers to find your catalog, you should create a menu item that links to the catalog. This is done by going to Structure and then Menus and organizing content using the Drupal menu system. You can also activate the Catalog block in the Block manager. We will add the catalog block to the Right sidebar, as shown in the following example:
Drupal 7 Business Solutions Build powerful website features for your business with this book and ebook
Published: January 2012
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Setting up a payment processor in Ubercart

Goal

Add a payment processor to the site who will take credit card payments from your customers and transfer the payments to you.

Steps

Before we can allow visitors to order our products, we need to set up a payment processor so that we can accept money from our visitors over the Internet.

  1. We have already enabled our Payment module and so we can jump directly to configuring the UBERCART-PAYMENT methods.
  2. After these modules have been enabled, we need to configure our payment settings by clicking on selecting Store, then Configuration, Payment methods, and then the Settings link next to the credit card enabled item. The following settings are available:

    Because we are only configuring a test payment gateway, we only need to enable the Test gateway here

  3. The first and most important section is the Credit card data security section. This section controls how credit card details are encrypted on your website. You will need to specify the folder in which to store security keys. This folder should be accessible to as few users as possible. For testing purposes, you may want to select the Operate in credit card debug mode option, but you should remember to disable it before you begin accepting real payments.
  4. The Checkout workflow section allows you to control whether or not credit card numbers should be validated before they are submitted to the processor, and whether or not cards should be processed when the order is submitted. Both settings should be left On unless you are testing your site
  5. Next, you can specify the fields that must be entered when the visitor checks out. In most cases, the default settings are acceptable, unless your store experiences a large number of fraudulent transactions. If this is the case, requiring more information may reduce fraud. However, requiring too much information can make it more difficult for legitimate visitors to order from your website
  6. Next, you can specify the types of cards that you want to accept. If your merchant account does not allow you to process specific types of cards, you will need to disable them here.
  7. Finally, you can set the messages that are to be displayed to let customers know what information they need to provide when ordering, and you can also define a failure message that is displayed if the credit card processor declines the purchase.
  8. When you are ready to set up your site to accept payments through a merchant account, PayPal, or another type of payment gateway, you should refer to the Ubercart documentation and your merchant account documentation for additional information.

Example order

Goal

Walk through the purchase process from the perspective of a customer.

Additional modules needed

Ubercart (http://drupal.org/project/ubercart).

Steps

  1. You can either provide a link to the Catalog page or you can provide a custom view or menu links to the product pages for the visitor to select from
  2. When the visitor finds a product that they want to order, they can add the item to the cart by clicking on the Add to cart button.
  3. The selected items will then appear in the Shopping cart, where the customer can either increase the quantity that they they want to purchase of an item, or remove the item from the cart. If they want to tweak the quantity they can change the Qty. number and then click Update cart.
  4. Once the customer is happy with their order, they will click Checkout to proceed with the purchase.
  5. A summary of the order will be displayed and the customer can enter their billing information in the checkout form.

    The customer will also need to enter their credit card information for the order. For testing purposes you can use the following non-existent credit card # and any expiration date in the future: 4111111111111111. Ubercart provides this testing information in this support document: http://www.ubercart.org/docs/user/7104/accepting_credit_card_payments.

  6. When the customer is happy with the information they have provided, they will click the Review order button. At this point, Ubercart will validate the credit card details and display the order to the customer, for review
  7. If the user is sure that the information is correct, they will click the Submit order button to finish processing the order.
  8. After the order is complete, the user will be notified and the order will appear in the list of orders. The user will also receive a username and password for their account so they can login and check on the status of their order, print a receipt and use that account for future orders.
  9. You can check for any pending orders by selecting Store administration and then Orders, and then View orders. All active orders will also be displayed for your review.
  10. You can view the order by clicking on the VIEW icon which is the leftmost icon, as shown in the preceding screenshot. This will display the order as shown in the following screenshot:
  11. There are also several other views that you can use. If you accept partial payments for an order, you can use the Payments tab to enter each installment.

Summary

In this article, we learnt how to integrated a website into our business, using Ubercart.In his book, Drupal 7 Business Solutions Trevor James has a similar section on how to set up an e-commerce system using the new Drupal 7 COMMERCE module



About the Author :


Trevor James

Trevor James is a Drupal developer residing in Middletown, MD, USA. Trevor has been using Drupal intensively since 2007 and designing websites for over 15 years using a combination of HTML, CSS, ColdFusion, PHP, jQuery, and JavaScript.

Trevor's focus is on building Drupal-based web applications and portals for education, non-profit, and medical systems, and small business environments. He is interested in the best methods of integrating web services with Drupal sites, optimizing Drupal sites' performance, and using Drupal content types, Views, Panels, and other contributed modules to develop front-end interfaces that support data intensive websites.

He loves teaching people about Drupal and how to use this excellent open source content management framework. Trevor authored the following Packt books:

Trevor created a 14-hour video tutorial series titled Drupal 7 for Virtual Training Company (VTC) in 2011. The video is available via the VTC website at http://www.vtc.com/products/Drupal-7-Tutorials.htm.

Books From Packt



Mastering phpMyAdmin 3.3.x for Effective MySQL Management

PHP 5 E-commerce Development book
PHP 5 E-commerce Development book

Drupal 7 book
Drupal 7 book

Joomla! VirtueMart 1.1 Theme   and Template Design
Joomla! VirtueMart 1.1 Theme and Template Design

Drupal 7 Module Development
Drupal 7 Module Development

Internet Marketing with WordPress
Internet Marketing with WordPress

Drupal 7 Social Networking
Drupal 7 Social Networking

Learning jQuery 1.3
Learning jQuery 1.3


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
r
7
r
7
H
7
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