Creating a grid of referenced Commerce products

Question

I'm using Drupal 7 along with Commerce 1.x and I have created a content type that has reference field for Commerce Product entities.

And now I would like to render a grid of referenced products i.e. dedicated add to cart form for each product on the node page.

At least so far it seems like an impossible task to do. I've tried with Views, custom form template variable etc. but it always gives errors like

Notice: Undefined index: #options in function form_process_radios() (row 3188

Parameter must be an array or an object that implements Countable in function form_process_radios() (rivi 3188

Somehow it is always expecting a radio element with options (which is the default formatting) for multiple products. However, that is not what I want and I've tried to set it as hidden element. I also can see the forms but would like to get rid of errors and create this "by the book".

<?php
function mymodule_preprocess_entity(&$variables) {

  $variables['add_to_cart_form'] = '';

  if ($variables['elements']['#entity_type'] == 'commerce_product'){

      $item = $variables['elements']['#entity'];

      if (empty($item->product_id)) {
        return;
      }

      $form_id = commerce_cart_add_to_cart_form_id([$item->product_id]);

      $line_item = commerce_product_line_item_new($item, 1, 0, [], 'custom_owner');
      $line_item->commerce_product = $item->product_id;
      $line_item->data['context']['product_ids'] = array($item->product_id);
      $line_item->data['context']['show_single_product_attributes'] = 1;

      $product_form = drupal_get_form($form_id, $line_item);

      // Trying to change from radio element to hidden
      $product_form['product_id']['#type'] = 'hidden';
      unset($product_form['product_id']['#theme_wrappers']);
      unset($product_form['product_id']['#process']);

      $form_markup = drupal_render($formp);
      $variables['add_to_cart_form'] = array('#markup' => $form_markup);


  }

}?>

Answer 1

This is possible out of the box without any custom code, just plain Views. The trick is to make the View based on content of whatever your node type is and set a relationship from the node to the products referenced by its product reference field. Once you have product fields available to the View, Commerce 1.x provides a per-variation Add to Cart form field to drop into the View.

I created a sample View that does this, placing it in a block on node pages of my product display node type. It uses a contextual filter to determine the node ID from the URL, joins to the products via the relationship I described above, and then shows the product title, price, and Add to Cart form in a grid:

Note that the line items added via the product Add to Cart forms do not maintain the context of the node; that's why "Product Three" is rendered as a link in my cart but Two and One are not. It would take custom code to ensure those forms have the appropriate context at this point, but that's another question.

In case you're a visual learner, here's the View I constructed to make this work: