Creating Enhanced Category Pages for Ubercart Using Views

Ubercart provides tremendous functionality for building an eCommerce site in Drupal. And within a fairly short period of time after installation, one can build at least a decent online shopping cart / eCommerce website. One will add products, perhaps include categories, and configuration various parts of the system such as shipping, payment methods, etc.

But depending upon one's needs, requirements, and preferences, one may wish to spend time with CSS, coding, or configuring additional modules in order to customize various aspects of one's eCommerce website. But then again, that is one of the many benefits of using Drupal and Ubercart - there are many options.

This a brief summary for those who are building an eCommerce website with multiple product categories and who want more than the simple table display that is the default for Ubercart. Again, with Drupal (and Ubercart), there are typically many ways to accomplish a task - this is one example.

As a simple example, I'll provide a brief overview of how to create a product category page involving a description section placed above a listing of products. (Example: Product Category Page on Peternity.com.)As an overview, this articles doesn't necessarily provide every single step, but it should present enough information to describe what is being done in the example - and it should help give you some ideas of what you can do with Views for your Ubercart site.

There are many ways to categorize content (including products) within Drupal. Options including using Drupal's Taxonomy system or fields with CCK (add-on module) - the pros, cons, and differences would be another discussion entirely. This example uses taxonomy for categorizing products. If you are creating something similar to this example, you will need several contributed modules: CCK, Imagecache, Views Bonus Pack, and of course Views since this an article about using Views.

We have two basic parts in this example: the product listings at the bottom and the category description above it. The product category page is dynamically generated, so once you have set it up it doesn't require much more work to have many product category pages other than getting the additional text and photos added.

Setting Up Views

The Default and Page Display:

1. Under Fields: - The fields you include is completely based on your preference. In this example we're including a number of fields including a thumbnail image. We really recommend using Imagecache for image handling with Ubercart. If you have already set up Imagecache, you will find the Imagecache presets included in the drop down for how to display an Imagefield image.
2. Under Fiters: - you will probably want to include "Node: Published" and "Node: is a product".
3. Under Arguments: add "Taxonomy: Term ID" as an argument. This is what will allow you to create one View to work with an unlimited number of product categories because you are passing the taxonomy ID for the product category into Views through the argument. Views will then filter for the specific category (Taxonomy ID). (I haven't included a discussion here on why the Term ID is being used, but it generally does work better with arguments in Views.).
4. Views Display: You can add a Page Display and then work on configuring how you want your product listings displayed by making selections in the Basic Settings section. For the path in the Page Settings, put in what you want for the path - and somewhere in there you want to include a "%" to handle passing the Taxonomy ID number to the View as an argument. As far as the display of the product listings, there are many things you can do. In the example I referenced from the Peternity.com site, we set it up with "Style: Grid". You may also wish to do some CSS work once you set up this View, depending on your theme and your preferences.

The Category Summary Display:

To set up a summary of the product category above the products, you can stay with the same View. In this example, we're displaying an image and some text describing the category itself.
1. There are some things we need to do outside of Views first. First, we created an additional content type, Category Description.
2. If you are doing something similar to the example we provided, you can keep it as simple as creating the content type and then add one image field.
3. Under Imagecache, you can create a new present, or you can simply use an existing preset if that works for you.
4. The rest you can configure in Views. Add an additional Display to your View with Attachment as the display type.
5. In the settings, we want to inherit the arguments, attach it to the Page (display) and position it "before".
6. We will want to change some of the filters and fields that we have to reflect the corresponding data that we are displaying for the new content type.
7. Important! - When making changes, click on the Override button. If you don't, then the changes you make will also change the default and Page display as well.
8. In this example, we want to change the Node Type under filters to Category Description and remove the Node is a Product filter.
9. We also make changes under Fields to correspond to the display the correct information from our Category Descriptions content type.

Summary

Quick Re-cap / Summary:

1. Use Taxonomy (or CCK fields if you prefer) and Views Arguments to set-up just one View to handle all of your Product Category display pages.
2. Use CCK to configure a new content type and fields to hold descriptive text and image(s) as additional data about your categories.
3. Use Imagecache to control the display of images.
4. Use Views attachments to hold more than one type of view / display of data within the same View.