Re: My Metafields are not displaying correctly. They are showing raw data

My Metafields are not displaying correctly. They are showing raw data

Arun_O
Excursionist
15 0 4

Hey All.

 

My store URL is https://caresmith-india-cd1f.myshopify.com/ I am using Ella theme for shopify and somehow all my metafields are displaying in what I believe is JSON format instead of how they should be displayed. 

They are rich text metafields and this is the output they are giving on the front end. 

{"type":"root","children":[{"listType":"unordered","type":"list","children":[{"type":"list-item","children":[{"type":"text","value":"Item 1"}]},{"type":"list-item","children":[{"type":"text","value":"Item 2"}]},{"type":"list-item","children":[{"type":"text","value":"Item 3"}]}]}]}

On the product page in the metafield editor it shows perfectly fine as 

  • Item 1
  • Item 2
  • Item 3

but on the product page on the front end it shows that unformatted metafield code

 

Would appreciate any help

Replies 10 (10)

JHKCreate
Shopify Partner
3571 638 925

Add .value at the end of your metafield variable. Let us know if that does it!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Arun_O
Excursionist
15 0 4

At the end of the variable name? or in the product-tab.liquid where the metafield is referenced?

Arun_O
Excursionist
15 0 4

Here's the liquid for the metafield tab

			{%- liquid
				assign title = block.settings.title
				assign has_tab = false
				assign source = block.settings.product_custom_source
				assign key = block.settings.product_tab_key_metafield

				if source == 'dynamic'
                   assign meta_ref = key
                else 
                   assign meta_ref = product.metafields.c_f[key]
                endif 
                
				if block.type == 'custom'
					if block.settings.type == 'metafield'
						if meta_ref
			                assign has_tab = true
			                assign content = meta_ref
			            else
			            	assign has_tab = false
			            endif
			        else
			        	assign has_tab = true
			        	assign content = block.settings.content
			        endif
				else
					assign has_tab = true
					if block.type == 'description'
						assign content = product.description
					else block.type == 'review'
						assign content = product.metafields.spr.reviews
					endif
				endif

				if block.type == 'description' or block.type == 'review' or block.type == 'custom'
					assign style_mobile = false
					if block.settings.open_tab_mobile
						assign style_mobile = 'show-mobile'
					endif
					if tab_layout_mobile == 'popup'
						assign style_mobile = 'popup-mobile'
					endif
				endif
			-%}

Arun_O
Excursionist
15 0 4

Still looking for a solution for this. Would appreciate any help

Arun_O
Excursionist
15 0 4

Bumping for visibility

Hunter11
Tourist
8 0 0

Did you ever solve this issue? I am facing the same problem.

 

AsadBaig
Shopify Partner
43 1 2

Hi @Hunter11 
Please Share your store url, and meta fields data

Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/
rm-philmells
Shopify Partner
7 0 3

This is a relatively easy one to fix. When you want to render/output the content you need to apply the metafield_tag filter to it.

 

In liquid this is just: 

 

{{ RTE_METAFIELD_REFERENCE | metafield_tag }}

 

to output it. If you need it as a variable you can use the following (or you can capture it): 

 

{% assign VARIABLE_NAME = RTE_METAFIELD_REFERENCE | metafield_tag %}

 

You won't be able to do anything with these fields without delving into a bit of template modification.

Hunter11
Tourist
8 0 0

I am attaching the code snippet for the product page tab. Hopefully, by looking at it, you'll be able to indicate where to put one of these lines of code to fix this issue. Thank you for your assistance.

 

<div class="product--tab__content {% if first %}tab--show{% endif %} {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}" id="tab--{{-block.id}}">
    {%- case block.settings.content %}
        {% when 'description' %}
            {{product.description}}
        {% when 'reviews' %}
            {% if settings.reviewApp == "loox" %}
                <div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
            {% elsif settings.reviewApp == "shopifyReviews" %}
                <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            {% elsif settings.reviewApp == "alireviews" %}
                <div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
            {% endif %}
        {% when 'custom' %}
            {{block.settings.customContent}}
        {% when 'metafield' %}
            {% assign metafield = product.metafields[block.settings.metafieldNS][block.settings.metafieldKey] %}
            {{metafield}}
        {% when 'page' %}
            {% assign page = pages[block.settings.page] %}
            {{page.content}}
        {% when 'productPage' %}
            {% assign handle = 'content-' | append: product.handle %}
            {% assign page = pages[handle] %}
            {% assign price = product.price | money | strip_html %}
            {% assign prediscount = product.compare_at_price_max | money | strip_html %}
            {{page.content | replace: '%product%', product.title | replace: '%brand%', product.vendor | replace: '%price%', price | replace: '%prediscount%', prediscount}}
    {% endcase %}
</div>

{% comment %}
{% blockdef %}

{% endblockdef %}
{% endcomment %}

 

rm-philmells
Shopify Partner
7 0 3

Assuming that the metafield is always a Rich Text metafield, you can edit the code to the following:

 

 

<div class="product--tab__content {% if first %}tab--show{% endif %} {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}" id="tab--{{-block.id}}">
    {%- case block.settings.content %}
        {% when 'description' %}
            {{product.description}}
        {% when 'reviews' %}
            {% if settings.reviewApp == "loox" %}
                <div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
            {% elsif settings.reviewApp == "shopifyReviews" %}
                <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            {% elsif settings.reviewApp == "alireviews" %}
                <div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
            {% endif %}
        {% when 'custom' %}
            {{ block.settings.customContent }}
        {% when 'metafield' %}
            {% assign metafield = product.metafields[block.settings.metafieldNS][block.settings.metafieldKey] %}
            {% if metafield contains '"children":' %}
                {{ metafield | metafield_tag }}
            {% else %}
                {{ metafield }}
            {% endif %}
        {% when 'page' %}
            {% assign page = pages[block.settings.page] %}
            {{page.content}}
        {% when 'productPage' %}
            {% assign handle = 'content-' | append: product.handle %}
            {% assign page = pages[handle] %}
            {% assign price = product.price | money | strip_html %}
            {% assign prediscount = product.compare_at_price_max | money | strip_html %}
            {{page.content | replace: '%product%', product.title | replace: '%brand%', product.vendor | replace: '%price%', price | replace: '%prediscount%', prediscount}}
    {% endcase %}
</div>

{% comment %}
{% blockdef %}

{% endblockdef %}
{% endcomment %}

 

 

Note that this does a simple if else check to see if it contains the string of text '"children":' (all Rich Text metafields have this text inside).

 

Obviously make sure you've got a copy of your code and let me know if you have any issues.