Setting up a Product Catalog

Catalogs or product display listings are critical to the success of your new eCommerce website. Fortunately for your site, it's running Drupal 7 and Views 3. This means just about anything is possible when it comes to displaying your Products.

Before moving forward, you're going to need to know the difference between product displays and product entities. Additionally, it would help if you had more than a passing understanding of what Views does. Particularly in the Views Relationship area.

Drupal eCommerce Catalog Recipes

We have boiled down most catalogs into four approaches. Are there more? Probably. If you can master two or more of these, you are well on your way to making all kinds of eCommerce possibilities.

Product Display Listing using Views

The first catalog we will create is a simple View that will show product teasers. This is similar to the approach used by Drupal core to populate your homepage on install. Re-making it in Views means you could tweak it using the Views interface.

New View

This is the only step in this version of the catalog. You could pick table or perhaps "Grid" to spice it up a bit from the homepage that ships with all Drupal installations.

  • Administration
  • Structure
  • Views
  • Add a View

New Catalog Page

The Product Teasers can be controlled via the Manage Display under the Store > Products > Product Types.

Simple Product Listing using Views

This is a simple listing of Product Entities that have no link, just a simple Add to Cart Button and a price. This would be good for a one-page catalog, perhaps a table with available donations, etc.

Name the View

Navigate to the Add a New View and fill out the form in a similar manner to the way you see here. Of particular note is the fact that we aren't listing Content, we are listing eCommerce Products. Also note that this view is designed to be a single page with no product details. This has limited use cases. Typically you would want to list product displays and link to them.

  • Administration
  • Structure
  • Views
  • Add a View

Add Fields

This is the first screen of two screens we're going to show you for adding fields.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add Fields

Add Fields

This is the second screen of two screens we're going to show you for adding fields.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add Fields

Add to Cart Field

When adding this field, you will want to check the "Link products added to the cart..." This means that when they add it to the cart, the link in the cart will bring them back to the view and not send them to the product page.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add to Cart Field

Price Field

Leave off the label, set the formatted amount and display to show calculated sell price. You could show with components if you have complex pricing rules.

  • Administration
  • Structure
  • Views
  • Edit View
  • Price Field

Product title field

The product title field only needs you to remove the label. Do not link the field to the administrative view. Remember, this view should not link to any content.

  • Administration
  • Structure
  • Views
  • Edit View
  • Product title field

Rearrange Fields

Let's rearrange fields.

  • Administration
  • Structure
  • Views
  • Edit View
  • Rearrange Fields

Remove a Field

Let's remove the Product ID and change the order to Image, Title, Price, Add to Cart.

  • Administration
  • Structure
  • Views
  • Edit View
  • Rearrange Fields

Final Catalog

The final catalog looks pretty nice, but note we are not linking to any of the product display nodes.

Advanced Product Display Listing using Views

The Product Display and Simple Views integration are not likely the most convenient for the site builder to create. In order to create a product catalog for a store that uses Product Displays, you will want to use the following exercise and pay careful attention to when we create the Views Relationship.

If your products have attributes such that product displays reference multiple products, establishing this relationship from the product display node to the referenced product will result in multiple rows in the View per node, basically 1 per referenced product. The workaround for this is to filter on the delta value of the product reference field so that only the first item (delta 0) is displayed in the View.

Additionally, if you're using attributes and want an Add to Cart form in the View, you need to render the product display node's product reference field to the View instead of using the Add to Cart form field from the product table itself. Furthermore, if you want product fields in the View to update when attributes are selected, you can't just add the product fields directly to the View. This is because injected field updating depends on a special wrapper around the product fields that only comes when the fields are rendered through the node output. The solution for this is to render product fields through a view mode of the display node itself, such as putting a teaser of the node into the grid and having the node type configured to inject product fields into the teaser. This will give the product fields the right wrapper to be updated when the Add to Cart form attribute select lists are updated.

New View

We're creating a new view based on Product Displays. Instead of relying on Teasers to get all of the fields, we're going to display fields the way we want them using a Relationship. If this seems dull, imagine adding a default argument for taxonomy and you instantly have a categorized catalog page.

  • Administration
  • Structure
  • Views
  • Add a New View

Expand Advanced

If this is your first time opening the View's advanced column, go ahead and expand it. Go ahead and click "Add" next to Relationships once it is expanded.

  • Administration
  • Structure
  • Views
  • Edit View
  • Expand Advanced
  • Add Relationship

Magical Relationship

There is a product reference field on our Product Displays. This relationship in Views will make all of the product reference fields available to be used in the fields area.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add Relationship

Relationship

You only want Product Displays that have products associated with them. Otherwise, not much to see here.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add Relationship

Add fields

Let's add a few fields

  • Administration
  • Structure
  • Views
  • Edit View
  • Add fields

Add fields

The three recommended fields are Add to Cart Form, Price, and Image. The best way to view all of these is to choose to filter the "Commerce Product." You might want to add a Product Title, but we will be using the Product Display Title.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add fields

Add to Cart

Make sure to use the new relationship, leave off the labels, and you can leave the "link products" unchecked.

  • Administration
  • Structure
  • Views
  • Edit View
  • Add to Cart

Price Field

Use the new relationship, leave off the label, and choose formatted amount and opt in to the calculated price.

  • Administration
  • Structure
  • Views
  • Edit View
  • Price Field

Image Field

Use the new relationship, leave off the label, and choose thumbnail to keep the image in a reasonable size.

  • Administration
  • Structure
  • Views
  • Edit View
  • Image Field

Rearrange Fields

Rearrange Fields to this order: Image, Title, Price, Add to Cart button.

  • Administration
  • Structure
  • Views
  • Edit View
  • Rearrange Fields

Final Catalog

The final catalog looks exactly the same as the "Simple" view except that this catalog has links to the Product Displays. This is a critical difference and can cause issues if you don't choose the right one.

  • Administration
  • Structure
  • Views
  • Edit View
  • Rearrange Fields

Taxonomy Listing of Product Display Teasers

Alternatively, you can use the built-in Drupal Taxonomy pages to list products of a certain category. Ryan Szrama has an excellent video showing off this process:

Found errors? Think you can improve this documentation? edit this page