Fetured Thumbnail picture gets disappear of selected variant on page load when we switch to other va

Technical Q&A
, ,
1

Hi, I’ve coded a feature in Shopify dawn theme to show only selected variant images. This works fine but the default selected variant featured image disappears when we switch to another color variant and again select that.
for example, on page load, the default black color is selected and shows relevant all images but when we switch from black to another color and again click on the black color it hides the main feature image.
Check Demo here:

zbug_0-1689885638062.png
zbug_0-1689885638062.png1344×1019 116 KB

zbug_1-1689885649913.png
zbug_1-1689885649913.png1341×1010 137 KB

https://nextipwllvynd26u-75063066900.shopifypreview.com

This is js function :

 filterMedia() {
      if (this.currentVariant.featured_image && this.currentVariant.featured_image.alt){
        
      document.querySelectorAll('[thumbnail-color]').forEach(img => img.style.display='none')
        const currentImgAlt = this.currentVariant.featured_image.alt
        const thumbnailSelector = `[thumbnail-color = '${currentImgAlt}']`
        document.querySelectorAll(thumbnailSelector).forEach(img => img.style.display='block')
      }
    else{
        document.querySelectorAll('[thumbnail-color]').forEach(img => img.style.display='block')
        }

This is css for hiding all images by default :

thumbnail-color = "{{ media.alt }}"
            {% if product.selected_or_first_available_variant.featured_media.alt != blank and product.selected_or_first_available_variant.featured_media.alt != media.alt %}style="display: none"{% endif %}

Looking forward to your response. Thanks

2

Hi did you ever find the answer to this? I got it working on desktop by just adding the main image as to the product twice but unfortunately on mobile that then makes it show twice in a row on the carousel. Any ideas how to fix would be awesome.