Theme App Extension Metafield issue

Retired Boards Appdev Store Design
1

Metafield shows up in Shopify Admin as JSON

{“foo”: “bar”}

So that is saved as product.metafields.fracking.frooking in a JSON typed field

But when rendering this metafield in a theme app extension as part of a logical dump of useful data, it renders as uncouth data. Unprocessed JSON. ie

<custom-element data-mymassive-dump-smells={{ product.metafields.fracking.frooking.value }}>

Which in turn is rendering as an HTML element with a messy dataset.

<custom-element data-mymassive-dump-smells="{“foo”=>“bar”}>

Which is neat. So to recap. In the Admin it is perfect JSON. The code that creates the data in the first place saves it as JSON. But when Shopify renders the liquid, it barfs out an unconverted string.

How?

1 Like
2

Do u think this may work:

window.myVar = JSON.parse({{product.metafields.fracking.frooking.value}})

3

The data is not JSON when rendered, so no, running a JSON.parse() on non-JSON makes for an error. Instead, I rendered the value through the JSON filter in Liquid, which indeed converted the crap data to JSON. I could then use JSON.parse on it.

So it is likely a bug in Shopify rendering. I dunno. I will let them fix that. Seems I am the lucky person to play with JSON in an App Extension only to hit this scenario?