Jquery to Plain Javascript. Hide element based on data attribute

Solved
Highlighted

Hello,

I'm trying to hide and show variant images based on selected variants. I was able to do this using the older Debut version, but the new one doesn't have jQuery. Since I'm reading about jQuery and how it might be a bad idea to add it for such a small thing, I'm trying to achieve this by using plain js.

My product-template sets variant image alt into a data attribute, then a function in theme.js does the show and hide part.

here is all of what I have in my theme.js (which was working before by jQuery), and want to translate it into js

 

   _filterThumbnails: function(variant) {
       if (variant.featured_image != null && variant.featured_image.alt != null) {
        $('[data-thumbnail-filter]').hide();
        //show thumbnails for selected variant
        var selected_variant = variant.featured_image.alt;
        var thumnail_selector = '[data-thumbnail-filter="' + selected_variant + '"]';
        $(thumnail_selector).show();
        $('[data-thumbnail-filter="all"]').show();
      } else {
        // show all thumbnails
        $('[data-thumbnail-filter]').show();
      }
    },

 

 Any help is much appreciated

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted
Shopify Partner
117 25 30

This is an accepted solution.

Here you go, vanilla javascript

 

 

       if (variant.featured_image != null && variant.featured_image.alt != null) {
            document.querySelectorAll('[data-thumbnail-filter]').forEach(function(element) {
                element.style.display = "none";
            });
            //show thumbnails for selected variant
            var selected_variant = variant.featured_image.alt;
            document.querySelectorAll('[data-thumbnail-filter="' + selected_variant + '"]').forEach(function(element) {
                element.style.display = "";
            })    
            document.querySelectorAll('[data-thumbnail-filter="all"]').forEach(function(element) {
                element.style.display = "";
            })
      } else {
            // show all thumbnails
            document.querySelectorAll('[data-thumbnail-filter]').forEach(function(element) {
                element.style.display = "";
            });
      }

 

 

 

Also, check this site out for more ways to do jQuery things in plain javascript: http://youmightnotneedjquery.com/

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
- Manage your new arrivals with Newr
1 Like
Highlighted

Thank you. You are amazing. And the link is very helpful.

This works perfectly

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes