Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to correctly display JSON array values from ACF metafields in a Shopify Liquid template?

I’m using the ACF plugin on my test site (which I use for website development) to add the ability to select clothing sizes for products. However, I’m currently unable to display this data, even though I’m following the documentation. Could you suggest what might be wrong?

Theme: Dawn 13.0.1
File: main-product.liquid

    <h2>ACF 'oval' Metafield Debug</h2>
    <p><strong>Raw JSON Value:</strong> {{ product.metafields.custom.oval }}</p>
    {% assign oval_array = product.metafields.custom.oval | parse_json %}
    <p><strong>Parsed Array:</strong> {{ oval_array | join: ', ' }}</p>

    <h3>Iterating Over 'oval' Array</h3>
    {% if oval_array.size > 0 %}
    <ul>
    {% for item in oval_array %}
    <li>{{ item }}</li>
    {% endfor %}
    </ul>
    {% else %}
    <p>Error: JSON is not parsed correctly.</p>
    {% endif %}

    {% if product.metafields.custom.oval %}
    <ul>
    {% for item in product.metafields.custom.oval %}
    <li>{{ item }}</li>
    {% endfor %}
    </ul>
    {% else %}
    <p>No items found in 'oval'.</p>
    {% endif %}

    Result:

    <h2>ACF 'oval' Metafield Debug</h2>
    <p><strong>Raw JSON Value:</strong> "["1","2","3"]"</p>
    <p><strong>Parsed Array:</strong> "["1","2","3"]"</p>
    <h3>Iterating Over 'oval' Array</h3>
    <p>Error: JSON is not parsed correctly.</p>
    <ul></ul>

[Result](https://i.stack.imgur.com/CiQRu.png)
[Settings](https://i.stack.imgur.com/kEZLM.png)
[Settings](https://i.stack.imgur.com/OBrpg.png)
[Settings](https://i.stack.imgur.com/WeGDq.png)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

It seems like the issue lies in the format of the JSON string you’re receiving from the metafield.

Direct Output: Instead of using Liquid’s {{ product.metafields.custom.oval }} to output the value, try directly outputting the value without Liquid interpreting it. For example:

<p><strong>Raw JSON Value:</strong> {{ product.metafields.custom.oval | json }}</p>

Custom Parsing: If the direct output doesn’t work, you might need to manually parse the JSON string to remove the extra quotes. Here’s how you can do it:

{% assign oval_json = product.metafields.custom.oval %}
{% assign oval_array = oval_json | replace: '"', '' | parse_json %}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading