Ajax validation of file upload in Commerce Product with product attributes

Question

I am building a shop with Drupal Commerce right now. I have a product that uses an Order item type, which supports a file upload. The same product also has some product attributes that load the product variations via Ajax. When I don't use a twig theme for full products view, everything works fine.

Even if I use a product--full.html.twig theme and just render {{ product }}, everything works fine. But when I start rendering the products parts like title, images, variations, body, etc... according to this documentation, Ajax validation of the upload file stopps working.

I just have a simple theme looking similar to this:

<div id="slideshow">
    {{ product.variation_field_product_images }}
</div>
<div id="sidebar">
    <span>{{ product.variation_price }}</span>
    <div>{{ product.variations }}</div>
</div>
<div id="product-body">
    <p>{{ product.body }}</p>
</div>

This all renders well and works like desired, until I add a product attribute like e.g. "color" which loads the products variations also via Ajax. When I then change the product products attribute/variation an Ajax-event is triggered and the Ajax validation of the upload field in the product variation (order item type) stopps working.

I'd be really happy, if someone could give me a hint, since I am not sure if I really should render the product variations as {{ product.variations }}, since many things in the above linked documentation don't seem to be correct anymore.

Thank you very much in advance

Answer 1

In the last step render the entire product variable and exclude the fields rendered before, even if there is only one field left to be rendered. By this you make sure any metadata attached to the variable gets rendered as well:

<div id="slideshow">
    {{ product.field_a }}
</div>
<div id="sidebar">
    <span>{{ product.field_b }}</span>
    <div>{{ product.field_c }}</div>
</div>
<div id="product-body">
    <p>{{ product|without('field_a', 'field_b', 'field_c') }}</p>
</div>