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. As far as categorizing products, you can use either (using taxonomy in this example). And if you are creating something similar to this example, you will need several add-on 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.

Unless you have additional data you wish to display about a product that is not already set-up or there by default, you can start by creating a new View and adding several fields. You may wish to keep it simple by including a thumbnail of the main product image, the title, the price, and a link to the product page. If you have already installed Imagecache and configured Ubercart to use this for handling images, you will see a number of presets, including one for product thumbnails. So you can then simply add these fields in the new View that you are creating.

In the filters section, you will probably want to include "Node: Published" and "Node: is a product". Then, you can also include a third filter, "Taxonomy: Term" - but don't select any of the terms when adding this one. Then, under Arguments, add "Taxonomy: Term ID" as an argument. This is what is going to allow us to create one View, but then have it work and handle the display the display of whatever number of product categories you have on your site. By passing the taxonomy ID (for each product category) through Views Arguments, you only need to set-up one View for all of this. (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.).

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.

For the top part of the Product Category page in this example where we are displaying an image and some text describing the category itself, there are some things we need to do outside of Views first. Using CCK, you can create an additional content type such as "Category Description". If you are doing something similar to the example we provided, you can keep it as simple as creating the content type and add one image field. Then under Imagecache, you will probably want to create a new preset.

Once this is set up, you can configure the rest in Views. Add an additional Display to your View with Attachment as the type. In the settings, we want to inherit the arguments, attach it to the Page (display) and position it "before". 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. We also want to click on the Override button when making the changes under filters and fields so that it doesn't change the previous work that we did in the Page Display. In this example, we want to change the Node Type under filters and include the corresponding fields to display the text for the page category and the image we selected (and choose the corresponding preset from Imagecache).

This quick overview is one example of how to enhance a product category page beyond the default in Ubercart using Views (along with CCK, Imagecache, and Views Bonus Pack). How you set it up for your site depends on your needs, preferences, and creativity.

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.