Retrieve metafield with metaobject type rich text

Store Design
1

Hi,

metaobject is really cool, but still really strange to work with them. How Retrieve Metafield With Metaobject Type Rich Text?

{% assign care_instruction = product.metafields.sp_custom.care_instruction.value %}

{% assign fabric_icon = care_instruction.fabric_icon %} //image obejct
{% assign fabric_text = care_instruction.fabric_text %} // metaobject with selected type Rich text

 ---> OK
{{ fabric_text }} ---> return this: 

{{ fabric_text.value.children }} return this:
but not sure why can't go deeper for example {{ fabric_text.value.children.children  }}

{
	"type": "root",
	"children": [{
		"children": [{
			"type": "text",
			"value": "Made from "
		}, {
			"type": "text",
			"value": "GSM",
			"bold": true
		}, {
			"type": "text",
			"value": " organic  "
		}, {
			"type": "text",
			"value": "100% .",
			"bold": true
		}],
		"type": "paragraph"
	}]
}

{
	"children" => [{
		"type" => "text",
		"value" => "Made from "
	}, {
		"type" => "text",
		"value" => "160",
		"bold" => true
	}, {
		"type" => "text",
		"value" => " organic "
	}, {
		"type" => "text",
		"value" => "100% ",
		"bold" => true
	}], "type" => "paragraph"
}

how to convert to text?

2

I had to do this, it’s probably wrong, but it works for me:

[metaobject_key].value.children[0].children[0].value

3

Found a solution on another thread that says to use the metafield_tag filter.

{% assign fabric_text = care_instruction.fabric_text | metafield_tag %}
11 Likes
4

Thank you both for an answer @alrb and @rachelrianne

5

I also built this npm package for anyone who needs to convert Shopify’s richtext to HTML with JS. i.e. for using storefront api for metaobjects.

https://github.com/TheBeyondGroup/shopify-rich-text-renderer

1 Like
6

Very useful package!

7

what a precious info !