Solved

How do I target Slides using Variant.Image from Thumbnails using Product.Media?

no_robotocha
Shopify Partner
43 2 7

Hello folks,

 

I am implementing a SwiperJS image slider as the product image gallery on the product page. I want this slider to update the current slide to the variant image when a variant is selected elsewhere on the page. I can use the swiper.slideTo() method to do this, but I'm finding this challenging as the ID of the images used in the gallery (coming from product.media.id) are different to the IDs used in the variant selector (variant.image.id). 

 

I need to use product.media to get all the images (I also pull the first image on the slider from a metafield) in the slider and I need to use variant.image as I want to display the variants in variant picker. 

 

Can anyone tell me the way to click a variant and then jump to the slide index whose image corresponds with the variant which has been clicked?

 

Thanks!

--
No, Robotocha!
Accepted Solution (1)

no_robotocha
Shopify Partner
43 2 7

This is an accepted solution.

I solved this by utilising product.images.variants[0].id

 

and as I was playing around and figuring stuff out, I used variations of the following code to test outputs, maybe helpful to someone:

 

{% for pic in product.images %}
  {{ pic.variants[0].id }} <br />
{% endfor %} {% endcomment %}

{% comment %} {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
{%- assign variant_ids = product.images | where: 'attached_to_variant?', true | map: 'id' -%}

<script>
  console.log({{variant_ids | json}});
</script>

{%- if product.media.size > 1 -%}
  {%- for media in product.images -%}
    {%- if variant_images contains media.src -%}
      product media id: {{ media.id }} 
      product media variant id: {{ media.variants[0].id }}<br />
    {%- else -%}
      not in attached to variant array <br />
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}   
= = = = <br />
{%- for variant in product.variants -%}
  variant id: {{ variant.id }}
  variant image id: {{ variant.image.id }} <br />
{%- endfor -%}
--
No, Robotocha!

View solution in original post

Replies 2 (2)

no_robotocha
Shopify Partner
43 2 7

This is an accepted solution.

I solved this by utilising product.images.variants[0].id

 

and as I was playing around and figuring stuff out, I used variations of the following code to test outputs, maybe helpful to someone:

 

{% for pic in product.images %}
  {{ pic.variants[0].id }} <br />
{% endfor %} {% endcomment %}

{% comment %} {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
{%- assign variant_ids = product.images | where: 'attached_to_variant?', true | map: 'id' -%}

<script>
  console.log({{variant_ids | json}});
</script>

{%- if product.media.size > 1 -%}
  {%- for media in product.images -%}
    {%- if variant_images contains media.src -%}
      product media id: {{ media.id }} 
      product media variant id: {{ media.variants[0].id }}<br />
    {%- else -%}
      not in attached to variant array <br />
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}   
= = = = <br />
{%- for variant in product.variants -%}
  variant id: {{ variant.id }}
  variant image id: {{ variant.image.id }} <br />
{%- endfor -%}
--
No, Robotocha!
Liam
Shopify Staff
2731 299 769

Hi No_robotocha,

 

Great to hear you figured this out and thanks for posting up your solution. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog