15

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?

  • Similar to this, using HTML Mail Module, how to link items in the email to individual product page? Like how to add all links to images or voucher we send via email in Drupal 7? – jeckey011 Oct 19 '11 at 14:55
  • @jeckey011 , I think you should add that as a separate question and link to it from here rather. – Martin Duys Oct 25 '11 at 3:32
  • possible duplicate of How do I add an additional submit handler in commerce checkout form? – user Jan 9 '15 at 10:11
29

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!

  • 2
    Wow. Thanks, Ryan. I really appreciate the effort you put into answering that. I'm going to read your answer 4 or 5 times and then give it a go... – Martin Duys Apr 5 '11 at 5:32
  • Great to see you on here Ryan. I'm really excited by the possibilities of commerce.module. – cam8001 Apr 5 '11 at 10:29
  • Hi Ryan. Thanks to your help I can now get this working for an individual item. What I don't get is how do I create a list view of my catalogue? How do I reference all products? – Martin Duys Apr 20 '11 at 9:59
  • Cool stuff, Ryan. If I understand well, for every new product I create, a new node is to be created "by-hand" a well. This looks an heavy downside, or maybe I'm missing something? – augusto Sep 3 '16 at 9:10
  • Correct. This is similar to virtually every eCommerce system in existence, but you should simplify the UX by using the Inline Entity Form to create the product entities on the node edit form itself. We just hadn't finished IEF when we release Commerce 1.0. ^_^ – Ryan Szrama Sep 5 '16 at 19:54
4

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.

  • What exactly do you mean by "To display a single product, setup the view to accept a Product ID or SKU argument?" Would I do that by adding an item under "Filter Criteria" like "Commerce Product: SKU (exposed)" and would I have to enter the SKU there? Does this mean I would have to do this for every single product? – Martin Duys Apr 21 '11 at 11:18
  • 1
    In your view, create a page display and set the path to products/% or something like that. The % allows your view to accept whatever follows products/ as an argument. Depending on your version of the Views module, you'll either see Contextual Filters in the Advanced section or a section for Arguments. You can add a filter for Commerce Product: SKU. You should be able to preview the output by entering an existing product SKU in the text field next to the Preview button. – pjskeptic Apr 21 '11 at 13:48
  • Here's a great explanation of view arguments drupalove.com/drupal-video/using-views-arguments-drupal. It's for Drupal 6, but it's the same concept as Contextual Filters in Drupal 7. – pjskeptic Apr 21 '11 at 13:54
  • To list multiple products, create a view with view type set to Commerce Product and configure the Filter Criteria to show the products that you want to display. – pjskeptic Apr 21 '11 at 13:57
  • Thanks so much for your help. I did exactly what you suggested and it worked like a charm. Although I understand the reasoning behind what @rszrama is saying in his answer, currently it is not possible to easily build a full catalogue list, which is what I needed. – Martin Duys Apr 22 '11 at 9:58
1

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.

1

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.