Compatibility with product JSON pulled from liquid {{ json }} filter

[gideonb]

This change manages the difference between product JSON from Liquid {{ product | json }} and product JSON from /products/${product.handle}.js

JSON from Liquid stores the name at product.options[i] JSON fetched from the API stores the name at product.options[i].name

Here's an example of JSON from the same product loaded with Liquid vs JS:

The theme-product-form docs specify that you should be able to use JSON pulled from Liquid:

// Fetch the product data from the .js endpoint because it includes
// more data than the .json endpoint. Alternatively, you could inline the output
// of {{ product | json }} inside a <script> tag, with the downside that the
// data can never be cached by the browser.

I can't say why this discrepancy exists, but pulling in the JSON from Liquid seems like a common use case.

[gideonb]

The CLA integration is broken:

[isAdrisal]

@t-kelly @antoinegrant Hi both, is this PR something you can help to push through/fix the CLA issue?

[italosimpli]

Is there a chance that this fix will be merged?

I really need to use the {{ product | json }} as work around for an issue with "asynchronicity" when using @shopify/theme-product-form.

In case someone is interested: For now, to have similarity between the jsons, I am using the following in my product.liquid file:

<script>
  window.productJSON = {{ product | json }};
  window.productJSON.options = {{ product.options_with_values | json }};
  window.productJSON.url = {{ product.url | json }};
</script>