Using Views in E-Commerce

Using Views in E-Commerce

It is no surprise that the two major e-commerce modules require Views for their own integration. Both Drupal Commerce and Ubercart need the Views module to successfully implement their e-commerce solutions. If you want to create a great e-commerce site, you’ll also want to become familiar with this module.

If you have yet to start your e-commerce venture, you might wonder why Views is so integral. When you begin adding products to your site, you'll realize that organizing and displaying them in a nice layout is key. This task is what Views is designed to do – retrieve and display information in a useful way. As such, it forms the backbone of an e-commerce site.

Predefined Views

You’ll find that you immediately have new views when you install your e-commerce module. Many of the views are administrative. They show a list of products or orders so that someone in charge of reviewing orders or making products may do their job easily. Both Ubercart and Drupal Commerce share this feature, as well as enabling a view that shows a user’s own orders. Note that these views are included the required core of Ubercart and the essential UI modules of Drupal Commerce.

Drupal Commerce also includes the Cart module in its core that establishes three views – a shopping cart block, form, and summary. The block is useful to place discretely on all pages or shopping pages depending on your site. The form is the main shopping cart display. And the summary is used during the checkout process.

It is clear the use of Views in both of these modules is vital. However, with the shopping cart and UI modules, you can already see that most things displayed by Drupal Commerce rely fully on Views. The rest of this article will highlight the Commerce capabilities with Views.

Defining Unique Views

Using Views to create your own displays is practical and will be beneficial to your site. Many downloads for e-commerce displays will use Views to set up generic pages to list your products. These generic views are often a useful place to start. That said, you are also encouraged to create custom views tailored to the unique design of your website.

Before you create views for your site, be sure to have setup a content type to display individual products. If you need to create one, you must include the ‘Product reference’ field. Using an autocomplete text field as its widget will be the most helpful option.

After you have a product display content type, you have the ability to easily access the information in that node and the product associated with it using Views. This ability opens up the possibility of creating many features for your site. Some of these features include blocks listing one or more new products, highly purchased items, your own specialized administrative lists, and most importantly, a catalog.

To make any of these, create a view of your product display content type. Then, in the ‘Advanced’ panel of Views, add a relationship of ‘Content: Referenced product’. Adding this relationship is important because it allows you to access the product’s fields in addition to the product display page’s fields. With the relationship in place, you may add a field to the view containing the SKU, Product ID, price, and other important product-related information.

Creating a new item(s) block is relatively simple because the view is automatically sorted by newest product display page. Just be sure to limit it to the correct number and include the necessary teaser information. This kind of a block could be a good addition to the homepage or a featured content section. Views also provides the feature to create an RSS feed. If you have a newly updated or created product view, you might want to look into publicizing its feed so that customers can keep up-to-date with your product line.

You might also want to create a view that shows the current inactive products that may need editing or updating. To do this, you should add another filter under ‘Filter Criteria’ entitled ‘Commerce Product: Status’. Make sure you choose ‘No’ on the configuration page and apply.

In Drupal Commerce, the shopping cart is a view. Feel free to make a copy of this cart and configure it differently if you want to add information, such as an image. See the final section about the Commerce Cart View Override.

Catalog Creation

Now that you have an idea of how to generally create a view of product information, you can create a catalog. If you do make your own catalog, you have the flexibility of adapting your catalog to your different product types and applying relevant sorting or filtering. Views makes all of these tasks relatively easy.

Two main visual styles of catalogs exist. One is a list view and the other is a grid view. In Views, this breakdown translates nicely into a Table layout for a list or a Grid layout for a grid. Tables allow you to enable easy sorting by column. Simply go into the Table settings and check ‘Sortable’ for a given column. You can also choose the column that is sorted by default. By doing this, a user can click on the title of a column to sort it. Clicking again will reverse the sort order.

The other way to allow sorting, which works for both Grid and Table layout, is to add various fields to the ‘Sort Criteria’ section of the view configuration screen. For example, add the ‘Commerce Product: Price’ sort criteria and be sure to check off the option to expose the filter to visitors in the sort settings. Remember that you’ll often need to have the product relationship set up to complete this task. You may add as many sorting criteria as you deem useful for your e-commerce site.

Another benefit of using Views to make your own catalog is that you can create views for specific types of items. For example, create a view that selects only t-shirt products and make that a page of the catalog. This task can be completed by making a filter for ‘Commerce Product: Type’ and selecting one of your product types in the setting. Exposing this filter’s settings will allow users to choose between your various product types. Making this view can enable you to compile a hierarchical catalog with helpful links for customers.

Fivestar Integration and Sorting

The Fivestar module, in conjunction with Voting API, allows you to add the capability to allow users to rate products. With full integration into Views, you can add this feedback information into your catalog and product pages. Fivestar automatically creates averages from user feedback, which you can then display as an indicator of a product’s popularity (it shows the number of ratings).

To use this feature, add another field into your product display content type -- ‘Fivestar Rating’. Choose the widget ‘Stars (rated while viewing)’. Now when you go to your view configuration, you may add a ‘Content: Vote’ field. Look through the settings to choose the display format, type of stars, and which votes (the user’s and/or the average) you would like to display.

You can now also add the ‘Content: Vote:rating’ sort criteria to your list. Customers will often want to sort by user opinion once they have filtered their options. Remember to expose this sort to provider users with this ability.

Be sure to also check the module configuration options for both Fivestar and the Voting API. The Voting API has important options to improve performance and allowing multiple votes from registered users and anonymous voters.

Theming your Commerce Views

Many of your e-commerce displays will be using Views. It is important to both make your products easily accessible and provide customers with the information they want. Your catalog, product lists, and checkout should also be aesthetically pleasing. The catalog, in particular, should have proper spacing and good design to draw in customers. You may want to see ourTheming in Views article for more information here.

Some elements are specific to an e-commerce site that you should consider differentiating. Your navigation bar links may be different from your internal catalog links. Buttons to cart, checkout, and confirm payment are usually unique. Tables for your catalog will probably look different from the table that holds cart information. None of these have to be dramatic stylistic differences; but each part of your site is unique and may require individual attention. In the end, final design decisions will be dependent on your business needs and personal design taste.

Views-Related E-Commerce Modules

Commerce Cart View Override is a module for Drupal Commerce that allows you to use any view as the cart. You can clone the cart that is provided to you in the Commerce core, make modifications to it, and then use that as the cart. This module also allows you to override the path of this cart. Without it, the cart view is not a page display, so this is not possible.

The Commerce Views Pane allows you to place a view in the checkout window of Drupal Commerce. This placement might be useful if you want to suggest products or show other relevant data while cusstomers are checking out.

If you are using Ubercart, the Ubercart Views module might be of interest to you. It offers a few high quality views such as recently added products and most sold products. Another nice view is the ‘Users who bought the selected product also bought these’ view. Such a view can be helpful in fostering cross-product sales.

Views is an all-around important module for any Drupal site, but it is particularly relevant to e-commerce. Familiarizing yourself with using and creating e-commerce views will improve your customers' shopping experience and increase site traffic.