Dynamic Number of Blocks based on Metafield data

Dynamic Number of Blocks based on Metafield data

anton_nv
Shopify Partner
25 1 7

Hi there,

 

I have a client that wants some content blocks to appear at the bottom of certain collection pages.

Each one consists of an image, heading and some text. So far that can all be done with metafields easily, especially with OS2.0

 

The issue I am having is that the number of blocks is not always the same and each field needs to be unique (image_1, heading_1, text_1...image_2, heading_2, text_2..) as they are displayed in sets of three and the third one is always larger.

 

I know the solution is to check if the field is blank but there could easily be 30+ fields here so checking them individually when looping through the blocks seems like a bad/wrong solution.

 

So far I've tried making an array of all the metafields and counting the multiples of 3 to work out how many blocks, which doesnt work because any 3 fields will count towards that. I've also tried manually counting the blocks based on whether the heading field has a value, which works but needs updating everytime the client wants to change it.

Surely there is a way for a dynamic number of blocks to display different content?

Replies 2 (2)

SheetalZadfiya
Explorer
70 15 19

Hello @anton_nv 

 

I understood your issue and I came to know that you can achieve your requirements using creating custom settings for a number of sets so as per requirement you can change value easily. We can use this in for loop. I believe this can help you to resolve the issue.

 

Please add the below code in the collection.liquid:

 

 

{% assign collection_field  = collection.metafields.my_fields  %}
{% for i in (1.. section.settings.field_set )%}

{% assign heading_field = 'heading_' | append:i %}
{% assign text_field = 'text_' | append:i %}
{% assign img_field = 'image_' | append:i %}

<div class="field-wrapper">
  {% assign heading =  collection_field[heading_field] %}
  {% assign text_info =  collection_field[text_field] %}
  {% assign img_info =  collection_field[img_field] %}

  {% if heading %}
  <h5>{{ heading }}</h5>
  {% endif%}

  {% if text_info %}
  <p>{{ text_info }}</p>
  {% endif%}

  {% if img_info %}
  <img src="{{ img_info | img_url:'200x' }}">
  {% endif%}

</div>
{% endfor %}

 

 

Please check the attached screenshots:

 

2022_06_07_meta_field.png

 

 

2022_06_07_input.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Thank you.

 

 

 

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
anton_nv
Shopify Partner
25 1 7

Hi there,

So sorry for the slow reply, this looks like a great solution, I haven't had chance to try it out yet!
Thankyou very much for the detailed response though, I will let you know how I get on with it.