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
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.
There are two approaches to installing Drupal Commerce; this recipe covers installing Drupal Commerce on an existing Drupal 7 website.
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:
Ctools: http://drupal.org/project/ctools
Entity API: http://drupal.org/project/entity
Address Field: http://drupal.org/project/addressfield
Now that you're ready, install Drupal Commerce by performing the following steps:
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
.Install Drupal Commerce's modules next, by copying the files into the
sites/all/modules
directory, so that they appear in thesites/all/modules/commerce
directory.Enable the newly installed Drupal Commerce module in your Drupal site's administration panel (
example.com/admin/modules
if you've installed Drupal Commerce atexample.com
), under the Modules navigation option, by ensuring the checkbox to the left-hand side of the module name is checked.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.
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.
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.
Download Drupal Commerce Kickstart 2 from its drupal.org project page at http://drupal.org/project/co mmerce_kickstart.
Once you have decompressed the Commerce Kickstart 2 files to the location you want to install Drupal Commerce in, perform the following steps:
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.You'll see that you are presented with a welcome screen as shown in the following screenshot:
Click the Let's Get Started button underneath this, and the installer moves to the next configuration option.
Next, your server's requirements are checked to ensure Drupal can run in this environment.
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).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).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:
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!
You can now safely remove write permissions for the
settings.php
file in the/sites/default
directory of your Drupal Commerce installation.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!
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:
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:
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).
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):
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.
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.
Wait as Commerce Kickstart installs everything Drupal Commerce requires to run.
That's it! Your Drupal Commerce store is now up and running thanks to Commerce Kickstart 2.
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.
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.
To get started adding a product to your store, click on the Add product button and follow these steps:
Click on the Product display. Product displays groups of multiple related product variations together for display on the frontend of your website.
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:
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:
Click on the Save product button, and you've now created a basic product in your store.
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:
You'll now see your product on the frontend of your Drupal Commerce store:
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.
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.
Log in to your Drupal administration panel and navigate to Store Settings | Checkout settings.
You can now start customizing the checkout settings for your Drupal Commerce store as follows:
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).
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):
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:
The options beneath the Display settings panel control how this panel is displayed to your customers:
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.
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.
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.
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.
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.
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).
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.
Log in to your Drupal Commerce store's administration panel and navigate to Store settings | Currency settings.
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.
Click on the Save configuration button to save your changes.
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:
Note the default "Drupal Commerce" image on the bag used as the default placeholder image for products with no photograph.
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.
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.
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:
Now that you've found this screen, you can begin to change your Drupal Commerce store's logo:
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:
Next, scroll down towards the Logo image settings block and uncheck the Use the default logo checkbox to disable Drupal Commerce's default logo.
Once unchecked, more options will appear below this: the Path to custom logo field, and the Upload logo image field.
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/
orsites/default/files/images/
.Click on the Save configuration button to retain your new logo.
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.
If you now view the frontend of your Drupal Commerce store, you will see the new logo has appeared:
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.
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.
To change your Drupal Commerce store's favicon, follow these steps:
Navigate to Appearance and click on the Settings tab towards the top right-hand corner of the screen.
Ensure that the Shortcut icon checkbox is enabled in the Toggle display settings:
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.
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 simplyfavicon.ico
are good values for this field.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.
Click on the Save configuration button to save your new favorites icon.
To see your new favicon in action, navigate to the frontend of your store and refresh:
That's it! Your new favicon is in place.
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.
Log in to your Drupal Commerce administration panel with your administrator account.
To add your chosen social networks to your Commerce product pages, you need to use a module package with Commerce Kickstart:
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.
Scroll down the list of modules until you come to the Commerce Kickstart Social module, and enable it by checking the box:
Click on the Save configuration button in the left-hand column to enable the module; it is located under the list of module groupings:
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:
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.
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:
This will present you with a list of the links. Select edit in the Operations column:
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:
Click on the Save button at the bottom of the screen once you are finished.
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: