Drupal Commerce: Creating a "smart" product catalog with Views

Fri, 10/03/2014 - 16:48 -- admin

Today we're going to take an in-depth look at how to create a fairly robust product catalog, in Drupal Commerce, with Views.

Before we get started, I would just like to clarify exactly what content we are working with during this tutorial.  We are going to be building a View of Product Displays, not a View of actual Commerce products.  Commerce products are not nodes within Drupal!  Commerce products need to be grouped together inside of what's called a Product Display (a content type).

Let's say that we have one t-shirt in our store, and we would like to offer this t-shirt in three different sizes: small, medium, and large.  We would first create a Commerce Product for each of the product variations -- a separate Commerce Product for the small t-shirt, medium t-shirt, and large t-shirt.  We would then create a single Product Display that would hold all of our three Commerce Products, via a Product Reference field.  There are two very well-written tutorials from CommerceGuys: one for creating products with attributes, and another for creating product displays.  Feel free to check out these guides if you need a refresher on how Commerce works, as I'm not going to be walking through product creation in this tutorial.

Before we start

Make sure you have a couple Product Displays created, as well as a few Commerce Products attached to each Product Display.  I've created four Product Displays for this demo, each with a few Commerce Products attached to them (the Commerce Products attached to each Product Display are almost idential -- the variation is in their attributes).  Each Product Display also has a term reference field, that allows each Product Display to be assigned a Category.  This Category is important, as we are going to be filtering our catalog based on the Category assigned to each Product Display.

Creation of the View

Create a new View (Show: Content) (of type: Product Display) (sorted by: Unsorted).  Check the box that creates a Page for this View, and choose a Display format of "Unformatted list" of "Fields".  I set the "Items to display" to 25, and checked the "Use a pager" option.  Make sure you sets a Path for the Page as well.  Click Continue & edit, and we'll start configuring our product catalog view!

The first thing we need to do is to add a Relationship.  Click Add next to the Relationship section, and add a Relationship to Content: Referenced products.  Check the box to Require this relationship, then hit Apply.

Next, we are going to add Fields to the View.  We are going to add the following fields:

  • Content: Path
  • Content: Category (the term reference field on the Product Display)
  • Commerce Product: Product Images (this field will uses the Relationship)
  • Content: Title
  • Commerce Product: Price (this field will uses the Relationship)

Once we've added all of these fields, there are only two more things we need to do with this View.  Underneath the Format section, click on Settings next to Unformatted list.  Choose Content: Category as Grouping field Nr. 1, and select the box for "User rendered output to group rows".  Apply this to your View.

If we were to navigate to this page now, we would see a bunch of products, but there would most likely be duplicates.  This is because the Relationship we have added to the View, is causing it to pull duplicate Product Display results.  To fix this, we need to add a Filter Criteria to our View.

Add a Filter of Content: Product Reference(s):delta, with the Operator being "Is equal to", and the value being "0".  This will remove all duplicate Product Displays from our View.

Here is a quick overview of what your View should look like:

And we're done!

That's it!  Navigate to the path you've chosen for our Page display of this View, and you should see a catalog of Product Displays that are grouped by Category.  With a little CSS, this should start to look pretty nice!  Hopefully this helps a few people in setting up a "smart" catalog (no duplicate Product Displays), for Drupal Commerce.