Commerce - How to hook into ajax call on commerce cart form variation change

Question

When you change a product attribute on a product display page, ajax loads the fields of the new product.

See here: http://demo.commerceguys.com/ck/tops/drupal-commerce-hoodie

By changing the size, color, etc, you trigger an ajax call that changes the fields such as SKU, images, etc.

My question is, how do you add additional markup to be updated on the attribute(form field) change?

By default, the form will update all fields printed in the template in this format.

<?php print render($content['commerce_price']); ?>

This wraps markup around the price with the following classes.

commerce-product-field commerce-product-field-commerce-price field-commerce-price node-880-product-commerce-price

Im assuming the ajax call is replacing fields by looking at this markup.

So how do I add additional markup, that printed in the node template, to be replaced with ajax when a form field is changed.

Im not sure what to hook into.

Many thanks.

Answer 1

There's a hook for that: hook_commerce_cart_attributes_refresh_alter. This is invoked when the variation is selected by the user and reacts to changes in the cart widget.

It gives you the chance of using ajax commands, so you basically have the complete control over elements and behaviors, there's an excellent tutorial in here: https://drupal.stackexchange.com/a/73325/2322

Also, a couple of examples, Commerce itself invokes the hook from the cart module and there's this sandbox module called Commerce Single Page Checkout that uses the technique for adding a view on the refresh event using ajax_command_replace.

Answer 2

You can use hook_form_alter and check $form_state['default_product'] for product details.

e.g, show markup from a field on the default product.

/**
 * Implements hook_form_FORM_ID_alter
 *
 * Alter commerce add to cart form
 */
function MODULE_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state){

  // Add some generic markup from the selected product field.
  if (isset($form_state['default_product']) && isset($form_state['default_product']->field_extra_markup[LANGUAGE_NONE][0]['value'])){
    $form['extra_markup'] = array(
      '#title' => t('Some markup'),
      '#type' => 'item',
      '#markup' => $form_state['default_product']->field_extra_markup[LANGUAGE_NONE][0]['value'],
    );
  }

}