How do I display my products?

Question

I have managed to create a product type and import my product data, so I now have a list of products.

How do now go about getting the products to display? Do I have to build a content type from scratch and add the fields manually, or is there a way to generate the content type?

Answer 1

As pjskeptic mentioned, you can build a generic display mechanism using Views (or potentially Panels), but the primary way to establish one piece of content as a product display is to use a custom content type with a Product Reference field using the Add to Cart form display formatter. This has some distinct advantages:

1. Your product display node gets multiple view modes (i.e. teaser vs. full page vs. RSS) and can receive comments (i.e. user reviews and ratings if you set it up).
2. Product fields will be rendered and displayed in the node, including the product's Price field by default but also accommodating custom fields you add to products (i.e. an Image field).
3. A single product display node can reference multiple products through the Product Reference field, which turns the add to cart form into a product selection form and/or an Ubercart style attribute selection form. However, unlike Ubercart attributes, the product attribute selection form here accommodates dependent attributes, only shows valid attribute options based on the products you have referenced, and dynamically updates any product fields displayed on the node to show the currently selected product. This results in allowing unique images based on product or attribute selection, as seen in the mug product on the demo store.

There are some other advantages her, too, but it's worth noting that we understand this introduces complexity into the product display creation process. We made the decision early on to build what we thought was a sound architecture (separating the product definition from its point of display) and to simplify the store administration aspect through the use of installation profiles and contributed modules. To whit, you can use the Commerce Kickstart installation profile to create an installation of Drupal 7 + Drupal Commerce that includes a pre-configured Product display content type and adds an Image field to the basic product type. (Unfortunately, you'll have to know Git to grab this, as installation profile packaging is currently non-functional for Drupal 7 profiles.) Additionally, we're working on projects that allow you to bulk create products / product displays and to add / edit products directly in the node edit form using a custom Product Reference field widget.

To set this up manually, follow these steps:

1. Add a node type called Product display. Submit using the Save and add fields button.
2. Add a Product Reference field that uses an Autocomplete text field widget. Make the field required and allow an unlimited number of values (even if you only intend to use a single value for now).
3. Click over to the Manage display tab and ensure this field uses the Add to Cart form display formatter. You might also want to move around the product fields you see listed here.
4. Create a Product display referencing one of your products and examine the node's teaser and full page views. You may want to change the way product fields are displayed. To do this, you actually have to browse to your product type's Manage display page and update the display formatter settings there. You can only adjust the sort order and visibility of product fields through the content type edit pages, not the formatter settings.

There's more to it, but this should get you started. This process is actually the topic of an article I wrote for the first issue of Drupal Watchdog. I hope to be a regular contributor on the topic of Drupal Commerce, so I encourage you to get a subscription if you weren't at DrupalCon when the magazine was released. It may be the articles appear on the website eventually after printing.

For further support, I'd encourage you to browse the forum posts and documentation on this topic on DrupalCommerce.org and check out the #drupalcommerce IRC channel on irc.freenode.net. If you find any bugs or want to contribute to the usability discussion, we'd love to get your feedback as a site builder in pertinent issues in our issue tracker.

Oh, and if you're a visual learner, I walk through this process and explain how the architecture works in my session video from DrupalCon Chicago. It's the best video to date, though I'd love to see smaller screencasts targeting specific steps of Drupal Commerce site building get produced in the future.

Best of luck!

Answer 2

In Drupal Commerce, products are not displayed like nodes. You can display them using views.

Create a new view and select Commerce Product as the View Type. To display a single product, setup the view to accept a Product ID or SKU argument. Then, you will have access to all of the product's fields. To display multiple products, add a filter or argument for category or any other criteria by which products should be listed.

You can also display products by creating a content type with a product reference field and then creating a node for each product, but that would definitely be a pain if you have a lot of products.

Answer 3

Once you have products in Commerce, you can combine Ryan Szrama's structure (i.e., creating a "product display" content type) AND the power of views.

First, create the product display CONTENT TYPE (Admin>>structure>>content types>>add content type). Follow Ryan Szrama's instructions from his answer on this page.

Second, create your first product display for one of your products.

Third, create a new View (Admin>>structure>>Views>>Add new view). Set the view to display content of type "Product Display." Adjust the view to suit your tastes. You now have a product list.

Answer 4

Checkout Commerce (Product Display Manager) for easier product to product display node managing!