Home Web-development Building E-commerce Sites with Drupal Commerce Cookbook

Building E-commerce Sites with Drupal Commerce Cookbook

By Richard Carter
books-svg-icon Book
Subscription
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
Subscription
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Installing and Configuring Drupal Commerce
About this book

Get to grips with Drupal Commerce, the new ecommerce framework based on the Drupal CMS , one of the most popular and powerful open source content management systems available.

"Building E-commerce Sites with Drupal Commerce Cookbook" takes you through the installation, configuration, and customisation of your Drupal Commerce store. With clear, practical recipes with plenty of screenshots and tips this book will help you build attractive and profitable eCommerce sites.

This book starts by showing you how to install and configure your Drupal Commerce store. Once your shop is up and running, you’ll then learn how to customise and optimise it to make it stand out and display your products better.

Going further into customisation, you will learn to add custom product types before creating a stylish new Drupal theme for your store. Packed with tips, this book will also help guide you through common problems, as well as optimising and managing your store on a day to day basis.

"Building E-commerce Sites with Drupal Commerce Cookbook" will guide you through everything you need to know to get your online store up and running and selling your products, with easy step-by-step guides and screenshots to help walk you through everything.

Publication date:
June 2013
Publisher
Packt
Pages
206
ISBN
9781782161226

 

Chapter 1. Installing and Configuring Drupal Commerce

In this chapter 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

 

Introduction


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 chapter will guide you through the basic configuration your Drupal Commerce store may need to function, from installation to checkout, and currency configuration options.

The remainder of the recipes in this book assume that you have used the Drupal Commerce Kickstart installation profile for Drupal, though you should be able to follow all recipes regardless of this.

 

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.

    Tip

    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.

Tip

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/co mmerce_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:

Tip

This book assumes you enabled the Drupal Commerce admin menu at installation stage. 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.

 

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):

    Tip

    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:

Tip

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:

 

Changing your store's favicon (favorites icon)


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:

Tip

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.you rstore.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:

    Tip

    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.

Tip

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:

About the Author
  • Richard Carter

    Richard Carter is a seasoned front-end web developer who has worked with Magento since 2008. He lives in Newcastle upon Tyne in the North East of England. He is the founder of the e-commerce agency Peacock Carter, an e-commerce and web design agency based in the North East of England, and has worked for clients including the Scottish Government, City & Guilds, NHS, and the University of Edinburgh. Richard is the author of four books on Magento, including Magento Responsive Theme Design, and has written three further books on e-commerce and content management systems.

    Browse publications by this author
Latest Reviews (1 reviews total)
Didn't find all that I was looking for and too much reliance on the Kickstart package
Building E-commerce Sites with Drupal Commerce Cookbook
Unlock this book and the full library FREE for 7 days
Start now