Drupal Commerce, Search API DB and Views | How to display the product variation accordingly to the attribute being applied as filter?

Question

SCENARIO:

1. A Size attribute field has been added to a Product Type at /admin/commerce/products/types/PRODUCT-TYPE/fields and "Enable this field to function as an attribute field on Add to Cart forms." option has been checked.
2. Two products have been created at admin/commerce/products/add/PRODUCT-TYPE. Size attribute Large at a price of $20 and Small at a price of $10 respectively.
3. One Content Type display node has been created at node/add/CONTENT-TYPE. The two sized product variants were attached to the Product Reference field.
4. A Search API Index for the product nodes has been created at admin/config/search/search_api/index/PRODUCT-INDEX.
5. A Search API - Product Index View has been created at admin/structure/views/add.
6. The Size Attribute has been added as an Exposed Filter Criteria to the view. One could also use the Size Facet.

ISSUE:

The filtering works just fine. The issue lies on the product field values displayed, like price for instance, that do not align with the filtering criteria.

Regardless of which size has been applied as filter, the price displayed on the view represents the first product attached to Product Field reference on the product display node.

In our case scenario, the Large size product is first on the list of products attached to the Product Field Reference. If size Small is applied as filter, it displays the price of $20 on the view display. This is troubling because $10 should be displayed instead.

Is there a way to fix it? That is, the price + other product fields will display the variant values accordingly to size attribute being applied as filter?

UPDATE:

This question here addresses the same issue wrapped into a different context.

Answer 1

Feature request here

This is not the ideal solution but will do for now. There are 2 steps to it:

1. At Views UI:

   1. Add all the fields you need into your view and Exclude them from display.

   2. At last add a Global Custom Text field for building your row display. This is my example:

      < div class="image">[field_image]< /div> < h3 class="title" >[title]< /h3>< div class="price">< span class="old">[field_old_price]< /span>< span>[commerce_price]< /span>< /div> < div class="addtocart">[add_to_cart_form]< /div>

2. In your template.php file:

.

/**
 * Implements THEME_views_view_field__VIEWID__DISPLAY__FIELD().
 */
function mytheme_views_view_field__myview__page__nothing($vars) {
  $nid = $vars['row']->entity;
  $size_attibute_tid = myvalue;
  $row_product_id = $vars['row']->_entity_properties['field_product_reference:entity object']->product_id;

  $query = db_select('commerce_product', 'p');
  $query->join('field_data_field_size_attribute', 't', 't.entity_id = p.product_id');
  $query->join('field_data_field_product_reference', 'pr', 'pr.field_product_reference_product_id = p.product_id');

  $query
    ->fields('p', array('product_id'))
    ->condition('field_size_attribute', $size_attibute_tid)
    ->condition('pr.entity_type', 'node')
    ->condition('pr.entity_id', $nid);
  $query = $query->execute()->fetchAssoc();

  $query_product_id = $query['product_id'];
  if (isset($query_product_id) &&
      $query_product_id != $row_product_id) {

    $node_title = $vars['row']->_entity_properties['entity object']->title;
    $node_url = $vars['row']->_entity_properties['url'];
    $product = commerce_product_load($query_product_id);

    $line_item = commerce_product_line_item_new($product, 1, 0, array(), $product->type);
    $line_item->data = array(
      'context' => array(
        'product_ids' => array($query_product_id),
      ),
    );
    $add_to_cart_form = drupal_get_form("commerce_cart_add_to_cart_form_$query_product_id", $line_item);
    $add_to_cart_form = drupal_render($add_to_cart_form);

    $price = commerce_currency_format($product->commerce_price['und'][0]['amount'], $product->commerce_price['und'][0]['currency_code']);
    $old_price = commerce_currency_format($product->field_old_price['und'][0]['amount'], $product->field_old_price['und'][0]['currency_code']);

    $image_variables = $product->field_image['und'][0]['image_dimensions'] += array(
      'style_name' => 'my-image-style',
      'path' => $product->field_image['und'][0]['uri'],
    );
    $image = theme_image_style($image_variables);
    // You should install https://www.drupal.org/project/commerce_product_urls module
    $image = "<a href='$node_url?id=$query_product_id'>$image</a>";

    $vars['output'] = "<div class='image'>$image</div>
      <h3 class='title'>$node_title</h3>
      <div class='price'>
        <span class='old'>$old_price</span><span>$price</span>
      </div>
      <div class='addtocart'>$add_to_cart_form</div>";
  }

  return $vars['output'];
}