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
- Simple Product Listing using Views
- Advanced Product Display Listing using Views
- Taxonomy Listing of Product Display Teasers
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.
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.
Add Fields
This is the first screen of two screens we're going to show you for adding fields.
Add Fields
This is the second screen of two screens we're going to show you for adding 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.
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.
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.
Rearrange Fields
Let's rearrange fields.
Remove a Field
Let's remove the Product ID and change the order to Image, Title, Price, Add to Cart.
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.
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.
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.
Relationship
You only want Product Displays that have products associated with them. Otherwise, not much to see here.
Add fields
Let's add a few 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.
Add to Cart
Make sure to use the new relationship, leave off the labels, and you can leave the "link products" unchecked.
Price Field
Use the new relationship, leave off the label, and choose formatted amount and opt in to the calculated price.
Image Field
Use the new relationship, leave off the label, and choose thumbnail to keep the image in a reasonable size.
Rearrange Fields
Rearrange Fields to this order: Image, Title, Price, Add to Cart button.
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.
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