Installing and Configuring Drupal Commerce

Exclusive offer: get 50% off this eBook here
Building E-commerce Sites with Drupal Commerce Cookbook

Building E-commerce Sites with Drupal Commerce Cookbook — Save 50%

Over 50 recipes to help you build engaging, responsive E-commerce sites with Drupal Commerce book and ebook.

$26.99    $13.50
by Richard Carter | June 2013 | Cookbooks Drupal e-Commerce Open Source

In this article by Richard Carter, author of Building E-commerce Sites with Drupal Commerce Cookbook, we will cover the following topics:

  • Installing Drupal Commerce to an existing Drupal 7 website
  • Installing Drupal Commerce with Commerce Kickstart 2
  • Creating your first basic product
  • Configuring the checkout in Drupal Commerce
  • Configuring the currency in Drupal Commerce
  • Changing your store's logo file
  • Changing your store's favicon (favorites icon)
  • Adding social media icons on product pages

Drupal Commerce (http://www.drupalcommerce.org) is a collection of modules that extend the Drupal content management system to support an e-commerce-style store.

Drupal Commerce provides a much more stripped back alternative to the Ubercart module (http://www.ubercart.org), which became the most popular e-commerce package for Drupal 6. Ryan Szrama was the lead developer on the UberCart project before moving to work on the Drupal Commerce framework. As a relatively new project, Drupal Commerce is only supported from Drupal 7 onwards.

In particular, an obvious initial difference between Ubercart and Drupal Commerce is that the latter does not come with shipping or payment gateways pre-installed. It is left to the site builder to install the modules they want to use to fulfill these features. As such, Drupal Commerce is presented as more of a framework than Ubercart, which is designed to be more functional out of the box.

This article will guide you through the basic configuration your Drupal Commerce store may need to function, from installation to checkout, and currency configuration options.

(For more resources related to this topic, see here.)

Installing Drupal Commerce to an existing Drupal 7 website

There are two approaches to installing Drupal Commerce; this recipe covers installing Drupal Commerce on an existing Drupal 7 website.

Getting started

You will need to download Drupal Commerce from http://drupal.org/project/ commerce. Download the most recent recommended release you see that couples with your Drupal 7 website's core version:

You will also require the following modules to allow Drupal Commerce to function:

How to do it...

Now that you're ready, install Drupal Commerce by performing the following steps:

  1. Install the modules that Drupal Commerce depends on, first by copying the preceding module files into your Drupal site's modules directory, sites/all/modules.
  2. Install Drupal Commerce's modules next, by copying the files into the sites/all/ modules directory, so that they appear in the sites/all/modules/commerce directory.
  3. Enable the newly installed Drupal Commerce module in your Drupal site's administration panel (example.com/admin/modules if you've installed Drupal Commerce at example.com), under the Modules navigation option, by ensuring the checkbox to the left-hand side of the module name is checked.
  4. Now that Drupal Commerce is installed, a new menu option will appear in the administration navigation at the top of your screen when you are logged in as a user with administration permissions.

You may need to clear the cache to see this. Navigate to Configuration | Development | Performance in the administration panel to do this.

How it works...

Drupal Commerce depends on a number of other Drupal modules to function, and by installing and enabling these in your website's administration panel you're on your way to getting your Drupal Commerce store off the ground.

You can also install the Drupal Commerce modules via Drush (the Drupal Shell) too. For more information on Drush, see http://drupal.org/project/drush.

Installing Drupal Commerce with Commerce Kickstart 2

Drupal Commerce requires quite a number of modules, and doing a basic installation can be quite time-consuming, which is where Commerce Kickstart 2 comes in. It packages Drupal 7 core and all of the necessary modules.

Using Commerce Kickstart 2 is a good idea if you are building a Drupal Commerce website from scratch, and don't already have Drupal core installed.

Getting started

Download Drupal Commerce Kickstart 2 from its drupal.org project page at http://drupal.org/project/commerce kickstart.

How to do it...

Once you have decompressed the Commerce Kickstart 2 files to the location you want to install Drupal Commerce in, perform the following steps:

  1. Visit the given location in your web browser. For this example, it is assumed that your website is at example.com, so visit this address in your web browser.
  2. You'll see that you are presented with a welcome screen as shown in the following screenshot:

  3. Click the Let's Get Started button underneath this, and the installer moves to the next configuration option.
  4. Next, your server's requirements are checked to ensure Drupal can run in this environment.

  5. In the preceding screenshot you can see some common problems when installing Drupal that prevent installation. In particular, ensure that you create the /sites/ default/files directory in your Drupal installation and ensure it has permissions to allow Drupal to write to it (as this is where your website's images and files are stored).
  6. You will also need to copy the /sites/default/default.settings.php file to /sites/default/settings.php before you can start. Make sure this file is writeable by Drupal too (you'll secure it after installation is complete).
  7. Once these problems have been resolved, refresh the page and you will be taken to the Set up database screen. Enter the database username, password, and database name you want to use with Drupal, and click on Save and continue:

  8. The next step is the Install profile section, which can take some time as Drupal Commerce is installed for you. There's nothing for you to do here; just wait for installation to complete!

  9. You can now safely remove write permissions for the settings.php file in the /sites/default directory of your Drupal Commerce installation.
  10. The next step is Configure site. Enter the name of your new store and your e-mail address here, and provide a username and password for your Drupal Commerce administrator account. Don't forget to make a note of these as you'll need them to access your website later!

  11. Below these options, you can specify the country of your server and the default time zone. These are usually picked up from your server itself, but you may want to change them:

  12. Click on the Save and continue button to progress now; the next step is Configure store. Here you can set your Default store country field (if it's different from your server settings) and opt to install Drupal Commerce's demo, which includes sample content and a sample Drupal Commerce theme too:

  13. Further down on this screen, you're presented with more options. By checking the Do you want to be able to translate the interface of your store? field, Drupal Commerce provides you with an ability to translate your website for customers of different languages (for this simple store installation, leave this set to No).
  14. Finally, you can set the Default store currency field you wish to use, and whether you want Commerce Kickstart to set up a sales tax rule for your store (select which is more appropriate for your store, or leave it set to No sample tax rate for now):

  15. Click on Create and finish at the bottom of the screen. If you chose to install the demo store in the previous screen, you will have to wait as it is added for you.

  16. There are now options to allow Drupal to check for updates automatically, and to receive e-mails about security updates. Leave these both checked to help you stay on top of keeping your Drupal website secure and up-to-date.

  17. Wait as Commerce Kickstart installs everything Drupal Commerce requires to run.
  18. That's it! Your Drupal Commerce store is now up and running thanks to Commerce Kickstart 2.

How it works...

The Commerce Kickstart package includes Drupal 7 core and the Drupal Commerce module. By packaging these together, installation and initial configuration for your Drupal Commerce store is made much easier!

Creating your first product

Now that you've installed Drupal Commerce, you can start to add products to display to customers and start making money.

In this recipe you will learn how to add a basic product to your Drupal Commerce store.

Getting started

Log in to your Drupal Commerce store's administration panel, and navigate to Products | Add a product:

If you haven't, navigate to Site settings | Modules and ensure that the Commerce Kickstart Menu module is enabled for your store.

Note the sample products from Drupal Kickstart's installation are displaying there.

How to do it...

To get started adding a product to your store, click on the Add product button and follow these steps:

  1. Click on the Product display. Product displays groups of multiple related product variations together for display on the frontend of your website.
  2. Fill in the form that appears, entering a suitable Title, using the Body field for the product's description, as well as filling in the SKU (stock keeping unit; a unique reference for this product) and Price fields. Ensure that the Status field is set to Active. You can also optionally upload an image for the product here:

  3. Optionally, you can assign the product to one of the pre-existing categories in the Product catalog tab underneath these fields, as well as a URL for it in the URL path settings tab:

  4. Click on the Save product button, and you've now created a basic product in your store.
  5. To view the product on the frontend of your store, you can navigate to the category listings if you imported Drupal Commerce's demo data, or else you can return to the Products menu and click on the name of the product in the Title column:

  6. You'll now see your product on the frontend of your Drupal Commerce store:

How it works...

In Drupal Commerce, a product can represent several things, listed as follows:

  • A single product for sale (for example, a one-size-fits-all t-shirt)
  • A variation of a product (for example, a medium-size t-shirt)
  • An item that is not necessarily a purchase as such (for example, it may represent a donation to a charity)
  • An intangible product which the site allows reservations for (for example, an event booking)

Product displays (for example, a blue t-shirt) are used to group product variations (for example, a medium-sized blue t-shirt and a large-sized blue t-shirt), and display them on your website to customers.

So, depending on the needs of your Drupal Commerce website, products may be displayed on unique pages, or multiple products might be grouped onto one page as a product display.

Building E-commerce Sites with Drupal Commerce Cookbook Over 50 recipes to help you build engaging, responsive E-commerce sites with Drupal Commerce book and ebook.
Published: June 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Configuring the checkout in Drupal Commerce

Like any flexible e-commerce platform, Drupal Commerce has many options you can configure to control how your store works. The checkout is a very flexible part of your store, with the ability to change the checkout process to suit your organization's needs.

This recipe will guide you through the basic items you will likely want to configure in your Drupal Commerce store.

Getting started

Log in to your Drupal administration panel and navigate to Store Settings | Checkout settings.

How to do it...

You can now start customizing the checkout settings for your Drupal Commerce store as follows:

  1. The view you can see indicates in which order the various elements of the checkout process appear. Firstly, ensure you have the Commerce Checkout module enabled (navigate to Site settings | Modules for this).
  2. To re-order these, you can drag and drop each stage using the arrows icon to the left-hand side of the screen (highlighted next to the Shopping cart contents option as shown in the following screenshot):

    Beware that some configurations could break your store's checkout process or confuse customers. For example, moving the completion message to the first stage of the checkout process would be very misleading!

  3. You can also see a configure option to the right-hand side of each checkout phase. Select the one next to the Shopping cart contents phase, and you will be presented with options on how the checkout phase is displayed:

  4. The options beneath the Display settings panel control how this panel is displayed to your customers:
    1. Display this pane in a non-collapsible fieldset: This option is the default, and displays the checkout phase in full, with no option to collapse it from view.
    2. Display this pane in a collapsible fieldset: This option shows the checkout phase in full by default, but provides an option to collapse it from view if the customer prefers.
    3. Display this pane in a collapsed fieldset: This option hides the phase from the view of the customer, but allows itself to be viewed in full by clicking on it to enlarge it within the page.
    4. Do not display this pane in a fieldset: This option removes the fieldset element from around the HTML elements used to display this checkout phase, which may be of use when theming your Drupal Commerce store.
  5. The Include this pane on the Review checkout pane checkbox underneath these options controls whether this block is shown on the checkout overview page, where the customer is required to confirm their order details.

How it works

Drupal Commerce's checkout process is divided into a series of phases. Each phase can contain one or more panes which can be used to display information (shopping cart content) or to get information from the user (billing address). If a phase doesn't have a pane assigned to it, it will not be displayed during checkout.

It's worth noting that some contributed modules can add settings to panes associated with Drupal Commerce's checkout too, such as the Commerce Addressbook module (see http://drupal.org/project/commerce_addressbook for more information on this module).

Configuring the currency in Drupal Commerce

One of the fundamental settings in your Drupal Commerce store is the currency your store uses. This recipe will guide you through changing and configuring the default currency for your Drupal Commerce store.

Getting started

Log in to your Drupal Commerce store's administration panel and navigate to Store settings | Currency settings.

How to do it...

The Default store currency setting provides a drop-down menu of currencies you can pick from; select your preferred option here if it has changed since your installation of Drupal Commerce.

The currency settings also allow you to specify additional currencies when creating a product by selecting none, one, or more than one checkboxes, but Drupal Commerce will not convert between currencies by default:

You can install a contributed module to automatically convert the currencies with the current conversion rate, or choose to manually fill in the prices in all currencies. See the Currency Exchange module at http://drupal.org/project/currency for more information.

  1. Click on the Save configuration button to save your changes.
  2. If you view the product on the frontend of your store, as customers would see it, you will see that the cost is displayed in the currency you specified here:

  3. Note the default "Drupal Commerce" image on the bag used as the default placeholder image for products with no photograph.

    How it works...

    Changing the default currency on your store changes the symbol shown before or after the price value you set for each product, but does not attempt to convert values between currencies (see the Drupal Currency Exchange module for related functionality). So, if you change the default setting from United States Dollars (USD) to Hong Kong Dollars (HKD), the costs you specified when creating the product would remain the same (so $9.99 USD would become $9.99 HKD).

    Depending on the currency you have set, Drupal Commerce will change the number of decimal points in the price displayed, as well as whether the currency symbol appears before or after the price on your store.

    Changing your store's logo file

    One of the most visual elements of your store is your logo, and it can help make a great impression on your customers.

    This recipe will show you how to change your Drupal Commerce store's logo.

    Getting started

    Log in to your Drupal Commerce control panel, and navigate to Appearance, and then to the Settings tab at the top right-hand corner of the screen:

    How to do it...

    Now that you've found this screen, you can begin to change your Drupal Commerce store's logo:

    1. Ensure you are under the Global settings tab; you will be presented with options. Under the Toggle display options block, ensure that the Logo checkbox is selected:

    2. Next, scroll down towards the Logo image settings block and uncheck the Use the default logo checkbox to disable Drupal Commerce's default logo.

    3. Once unchecked, more options will appear below this: the Path to custom logo field, and the Upload logo image field.

    4. To use an image that is already on your Drupal Commerce installation's server, simply enter the path to your logo file in the Path to custom logo field. Good directories to store your store's logo in could be image/ or sites/default/files/images/.

    5. Click on the Save configuration button to retain your new logo.
    6. To upload a logo from your computer to your Drupal Commerce site, use the Upload logo image field and click on the Save configuration button to save this choice of logo. Ensure that the Path to custom logo field is empty before saving, as otherwise it will produce an error. Either Path to custom logo or the Upload logo image field can be used, but you cannot use both together.

    7. If you now view the frontend of your Drupal Commerce store, you will see the new logo has appeared:

Building E-commerce Sites with Drupal Commerce Cookbook Over 50 recipes to help you build engaging, responsive E-commerce sites with Drupal Commerce book and ebook.
Published: June 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Changing your store's favicon (favoritesicon)

Alongside your logo, your store also has a favorites icon, also known as a favicon or a shortcut icon, which is a small graphic you can use to distinguish your store from other websites in a number of contexts, including in lists of the visitor's bookmarked websites.

Getting started

By default, the favicon image is Drupal Commerce's logo. To see it, visit your Drupal Commerce store website in a browser and you will see it appear in one of a number of positions depending on your browser. In Chrome, the favicon appears in the tab next to the web page's name:

In Internet Explorer 9, the favorites icon appears both in the page's tab and in the address bar:

 

You will need to create a graphic for your favorites icon. There are a number of online favicon generators you can use, such as Dynamic Drive's tool at http://tools.dynamicdrive.com/favicon/, which can create a favicon from JPEG, GIF, and PNG formats.

Ensure you are logged in to your store's administration panel.

How to do it...

To change your Drupal Commerce store's favicon, follow these steps:

  1. Navigate to Appearance and click on the Settings tab towards the top right-hand corner of the screen.
  2. Ensure that the Shortcut icon checkbox is enabled in the Toggle display settings:

  3. Now scroll down, and you will see the Shortcut icon settings field. Uncheck the Use the default shortcut icon field and you are presented with two options: Path to custom icon and Upload icon image.

  4. To use an icon file already on your server, use the Path to custom icon field, enter the relative URL (that is, with the http://www.yourstore.com part). So, sites/ default/files/favicon.ico or simply favicon.ico are good values for this field.

  5. To upload a file on your computer for use as the favicon for your Drupal Commerce store, use the Upload icon image field. Ensure that the Path to custom icon field is empty before saving this, otherwise your icon will not be saved and you'll see an error message.

  6. Click on the Save configuration button to save your new favorites icon.
  7. To see your new favicon in action, navigate to the frontend of your store and refresh:

    You may need to do a hard refresh of your website to see the favicon. Pressing Ctrl + F5 usually works in most browsers (or Cmd + R on Mac).

     

  8. That's it! Your new favicon is in place.

Adding social media icons on product pages

With the popularity of social networks such as Twitter, Facebook, Google+, and Pinterest remaining strong, integrating tools to help your customers share your products with their friends can be an excellent way to grow your customer base.

This recipe will show you how to customize your Drupal Commerce store to include social media share buttons on your store's product pages.

Getting started

Log in to your Drupal Commerce administration panel with your administrator account.

If you didn't use Commerce Kickstart to install Drupal Commerce, you will need to.

How to do it...

To add your chosen social networks to your Commerce product pages, you need to use a module package with Commerce Kickstart:

  1. Navigate to Modules in your administration panel. In the menu in the left-hand column, you'll see a tab for Commerce Kickstart modules. Click on this to view a list of available Commerce Kickstart modules.

  2. Scroll down the list of modules until you come to the Commerce Kickstart Social module, and enable it by checking the box:

  3. Click on the Save configuration button in the left-hand column to enable the module; it is located under the list of module groupings:

  4. If you haven't enabled one or more of the modules required by the Kickstart Commerce Social module, you'll be prompted to enable them on the next screen. Select Continue:

  5. Enabling the module does two things: it adds a block to your store's footer with links to various social media platforms, and it adds share tools on your product pages. View the frontend of your website and look in the footer, and you will see them as follows:

    If you can't see these appear, you may need to assign them.

  6. By default, these link to Commerce Guys' profiles, so ensuring you are logged in as an administrator, hover over the block and then select the List links option from the drop-down menu:

  7. This will present you with a list of the links. Select edit in the Operations column:

  8. You can now edit the URL of your social media profile with the Path field and the label for the link with the Menu link title field:

  9. Click on the Save button at the bottom of the screen once you are finished.
  10. Return to the frontend of your store and navigate to a product page, and you will see the share tools from Facebook, Google+, and Twitter:

Summary

This article has helped us get Drupal Commerce up and running and it has configured for basic e-commerce store requirements.

Resources for Article :


Further resources on this subject:


About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt


Drupal 7 Cookbook
Drupal 7 Cookbook

Selling Online with Drupal e-Commerce
Selling Online with Drupal e-Commerce

TYPO3 4.2 E-Commerce
TYPO3 4.2 E-Commerce

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

WordPress 2.9 E-Commerce
WordPress 2.9 E-Commerce

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

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

Drupal 6 Themes
Drupal 6 Themes


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
D
P
1
b
A
h
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