Ensuring equal Text-List and Image-List Metafields

Store Design
1

Ensuring equal Text-List and Image-List Metafields

EDIT: SOLVED!

Hello!

I have run into an issue while working with Shopify Metafields that I think could benefit many people if there is an easily findable solution. I have Googled to no avail and I think that in the future others will be doing the same. Let’s try to get a solution out there!

For Context:

I am building a section to be added to a product template which will allow our store to add extended content. The part that I am working on right now is like a carousel that has both an image and text description tied along with it.

The Problem:

Now, I know very well how to use for loops to get through liquid arrays - which is NOT what I’m asking. Instead, I am looking for a solution that allows me to check the number of images and descriptions are equal! This has given me a ton of issues and I’m not quite sure how to implement a simple condition like this.

Let us say there are 2 metafields we are using. The first is a file list (images only) called “feature_gallery_images”. The second is a single-line-text list called “feature_gallery_descriptions”. In the product I am testing this on, it has three images, and three descriptions already added to its metafields.

The Current Code:

My solution so far has not been working and I have gotten to the point where I made the simplest Liquid possible to try and see what’s going on…

Liquid File:


Image.size: {{ product.metafields.custom.feature_gallery_images.size }}

Image.value.size: {{ product.metafields.custom.feature_gallery_images.value.size }}

Description.size: {{ product.metafields.custom.feature_gallery_descriptions.size }}

Description.value.size:{{ product.metafields.custom.feature_gallery_descriptions.value.size }}

HTML Output:


Image.size: 

Image.value.size: 

Description.size: 

Description.value.size:3

Obviously, for our descriptions, “.value.size” is exactly what we a re looking for. However, this solution is not the same for our file list. If both the single-line-text list and file-list are stored as JSON arrays, then why is it not the same solution for finding the size? Does the specification of the file list being images make it different?

If you have a solution to this problem, I’d love to hear it! Otherwise, I’m also including some of my own past solutions. I’m not a huge fan of them, but when I need a quick implementation - they work.

Current Alternate Solutions:

Now despite my extreme dislike for these following solutions, they DO work. I would love for somebody the have a more elegant solution, but in case not, I wanted to share what I’ve come up with in the past.

First, my least favorite solution is to just not check! In my situation, I am the one filling out metafields about 50% of the time. I also CAN go and check that they are being done correctly, but I’d rather the code do that for me.

My second solution solves this by switching the image list metafield into a single line text list. While this does allow me to check that there are the correct number of images, it also prevents me from using ‘image_url’, ‘image_tag’, uploading images directly, and makes for a relatively tedious implementation/upload process.

2

Update:

By adding the JSON filter to my liquid, I’m even more perplexed as to why ‘.value.size’ doesn’t work.

Liquid File:


{{ product.metafields.custom.feature_gallery_images.value | json }}

HTML Output:


["IMG_URL_HERE","IMG_URL_HERE","IMG_URL_HERE"]

Obviously, “IMG_URL_HERE” is a placeholder, but still: if the JSON is being created like this, why can ‘.size’ not return the actual number?

3

Well… I created a solution! Hopefully somebody else can use this in the future. What I found successful was actually just declaring a variable to manually store the length. I still think it’s weird that we can’t use ‘.size’ on an image list - but this solution will have to do for now. It allows for the evaluation of list size, while also being convenient to upload, edit, and use ‘image_url’ and ‘image_tag’.

Solution:

{% assign numFeatureGalleryImgs = 0 %}
{% if product.metafields.custom.feature_gallery_images != blank %}
  {% for item in product.metafields.custom.feature_gallery_images.value %}
    {% assign numFeatureGalleryImgs = numFeatureGalleryImgs | plus: 1 %}
  {% endfor %}
{% endif %}
{% if numFeatureGalleryImgs == product.metafields.custom.feature_gallery_descriptions.value.size %}
  

Same number of Images and Descriptions.

{% endif %}
  1. Assign a variable to hold the number of images. Initialize it to 0.
  2. If the Metafield has data entered, loop through it and update the variable by adding one to the value. (could also probably check for [if forloop.indexlast] → not sure which is more efficient)
  3. Now you can compare another list to this stored value!