Commerce kickstart Product Variation page, how to update the form values, without an Ajax call

Question

Setting up an ecommerce website with Commerce Kickstart 2. I have a standard structure with a bunch of products.

Each product has a number of product variations which are mainly color variations.

My client requests that all color variations of a product should be visible on a single page.

So practically, the end user should see a selection of products, click on a product to review all the available colors, then click on a single color to end up on the product page ( node page ) with the following features.

• Images slideshow with different angle of the product
• Product Title & Description
• Color variation name
• Product Price
• Color thumbnails to view other available colors
• Add to Cart etc...

There's no problem implementing all of the above. I had to override the default behaviour when clicking on a product variation, which leads to the product variation admin page, in order to be directed to the node page.

The problem I'm currently facing is to update the default product variation images when the user reaches the product page.

In Views, I set up a url such as

   node/nid/product_id

Using hook_form_alter, I am able to update some $form_state values by retrieving the product id from the url & loading the corresponding entity.

 function mymodule_form_alter(&$form, &$form_state, $form_id)
 {
    // Here I have some code that retrieves the product ID
    // from the url...
    $form_state['values']['product_id'] = $product_id;

    // Some code that loads the product variation with 
    // entity load...
    $form_state['default_product'] = $current_product_variation;
 }

Now when the user reaches the node page, everything is updated, except the images!

If I click "Add To Cart" , I have the expected product , description, color variation name. Practically, all seems to work except for the images.

I tried to clear the cache before updating $form_state values, somehow I'm not able to fix this.

I could simulate an Ajax call but that seems to be an unnecessary hack which, in any case, would result in the image flickering on page load.

When I inspect the $form with Devel, I can see various places that needs updating, mostly to do with line items, but I have yet to find a non Ajax solution that would allow me to update the product page.

What am I missing?

Answer 1

I was so caught up with updating the form & form_state values that I totally overlooked the fact that the product display images weren't rendered from the form, but the node!

Updating the images in hook_preprocess_node did the trick.