CODEWITHSUNDEEP
arraysjsonfor-loopshopifyliquid
Dipesh Parmar
Dipesh Parmar

Reputation: 27382

Shopify JSON type meta-field loop not working

I am using shopify built in meta field and set its types to JSON, but somehow looping in that value do not work.

{
    "slides": [{
        "title": "Title 1",
        "description": "This is description body",
        "image": "https://cdn.shopify.com/s/files/"
    }, {
        "title": "Title 2",
        "description": "This is description body",
        "image": "https://cdn.shopify.com/s/files/"
    }]
}

above is sample value i set and below is code but it is not working at all.

{% if product.metafields.spec.slider != blank %}
  <div class="grid">
    {% assign sliders = product.metafields.spec.slider %}

    {% for slider in sliders %}
      <div class="grid__item">
        <img src="{{ slides.image }}" alt="" />

        <h4>{{ slides.title }}</h4>
        <p>{{ slides.description }}</p>
      </div>
    {% endfor %}
  </div>
{% endif %}

Upvotes: 1

Views: 1831

Answers (1)

Bilal Akbar
Bilal Akbar

Reputation: 4970

You will need to use value property to get the value of Metafield. Besides this, your loop variables are just mixed up. In your JSON, you have a top level property named slides that is an array of objects. So, you have to iterate over slides property instead of base JSON value.

Doing so, your code will be

{% if product.metafields.spec.slider.value != blank %}
    <div class="grid">
    {% assign slider = product.metafields.spec.slider.value %} 
    {% for slide in slider.slides %}
        <div class="grid__item">
            <img src="{{ slide.image }}" alt="" />
            <h4>{{ slide.title }}</h4>
            <p>{{ slide.description }}</p>
        </div>
    {% endfor %}
    </div>
{% endif %}

Upvotes: 5

Related Questions