How to render the correct variation price in catalogs?

Question

I have a product catalog built using search api, facets, and views like this: https://docs.drupalcommerce.org/commerce2/developer-guide/products/marketing-products/product-catalog-facets. My add to cart form is using the Variation Title widget.

I want to render the product price, and when there's multiple variations I want the price of the variation currently selected to render.

If I add a relationship to the referenced variations and display the price I get from that, prices for all variations are rendered (and not just the price of the variation currently selected in the add to cart dropdown).

If I add a relationship to the default variation, only one price is rendered but it is not updated when another variation is selected in the dropdown.

If I edit the add to cart form itself (Commerce > Configuration > Order item types > Edit Default > Manage form display) and add the unit price, it's rendered as an editable text field and selecting another variation with a different price doesn't update the price.

Would love some input on this. There's a similar question here, but the suggested answers doesn't work.

Answer 1

"I want to render the product price, and when there's multiple variations I want the price of the variation currently selected to render."

-- please read this ---

http://drupal.org/project/commerce/issues/2930046#comment-12384089

if that does not help then perhaps could get tricky with something like this

http://drupal.org/project/view_entity_ref_field_formatter