Output variant images from variant metafields

rb_sss
Tourist
6 0 1

Hi there, 

I'm using Shopify's new meta field feature for my product variants and I want to change metadata after the user changes the variant.
Currently the variant has the following metafields:

variant_image_1 ----> file 
variant_image_2 ----> file
variant_image_3 ----> file

These are going to populate the product image gallery. So after a user selects a green shirt, they will only see the green shirt images etc.

Now when I want to get the metadata with JavaScript I get the following error for the file fields:

error"json not allowed for this object"

Bildschirmfoto 2021-08-07 um 09.38.20.png

Is there any way to get the file URL for the metadata images? 

 

This is my liquid code:

{% for variant in product.variants %}
     {% for metafield in product.variants[forloop.index].metafields.my_fields %}
         {% assign image_handle = 'variant_image_' | append: forloop.index %}
         {% assign image_alt = 'variant_image_' | append: forloop.index | append: '_alt' %}
             {% if product.selected_or_first_available_variant.metafields.my_fields[image_handle] != blank %}
              <div class="swiper-slide">
            <img
                class="product-image"
                src="{{ product.selected_or_first_available_variant.metafields.my_fields[image_handle] | img_url: 'master'}}"
                alt="{{ product.selected_or_first_available_variant.metafields.my_fields[image_alt] | escape }}"
           />
          </div>
      {% endif %}
            {% endfor %}
 {% endfor %}
 
Now I want to put the images from the selected variant into my product image slider, but I can't access any file URL to do so. 
Is there any way to access the file URL from variant metadata? 
 
Thank you!
Replies 2 (2)
irkakhodjaev
Excursionist
14 1 3

Hello! Have you found the solution for that?

rb_sss
Tourist
6 0 1

We had to go about it differently. 

Currently, we are outputting all variant images with liquid, and filtering through them via the `variant id`.  I haven't found any way to output a file URL after fetching the meta fields, unfortunately.