Runnig javascript on load to hide unselected variant images

Solved
UTKbuilder
Shopify Partner
9 0 9

Hi

 

I have implemented a bit of javascript to only shows pictures based on which variant the customer selects (based on (Coding with Jan's youtube video and this thread where @Vellir provided a very nice solution). However, I cannot get the function to run at the time the product page is loaded. Does anyone know if there is somewhere in global.js I can place the function so it runs when the product page is loaded - or any other method, for that matter?

 

Here is the javascript that I have inserted into global.js:

 

 

 

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

 

 

 

 

Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
3338 657 718

This is an accepted solution.

Hi @UTKbuilder,

Please add code here:

Screenshot.png

Code:

{% 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 %}

 

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 12 (12)
LitExtension
Shopify Partner
3338 657 718

Hi @UTKbuilder,

What Shopify theme are you using? Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
MS_WEB_DESIGNER
Shopify Expert
600 44 120

Hi @UTKbuilder,

I am Ani From https://www.task4store.com/  - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store Url,
-Also Mention Which Shopify theme you are using 

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!


Regards,
Ani

MS Web Designer  | Top Rated Shopify Experts in Singapore
20,000+ Tasks Completed | 1500+ Happy Clients

Want to Improve Shopify Store Speed, Redesign or custom changes, or Small tweaks on store hire me.Try Our Free Shopify App
If helpful then please Like and Accept Solution

UTKbuilder
Shopify Partner
9 0 9

@LitExtension  and @MS_WEB_DESIGNER 

 

Sorry for my late reply and thank you for your kind offer to help. Theme is Dawn. The page is not password protected.

LitExtension
Shopify Partner
3338 657 718

Hi @UTKbuilder,

I checked the tutorial you sent and it supports Debut theme, if you want to change for Dawn you need to have JS experience. Since each theme will have different HTML, CSS and JS structure, so now you copy the code, it won't work. I recommend you hire an expert to integrate it, or contact the owner of the article directly and ask for guidance for the Dawn theme.

Hope it is clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
UTKbuilder
Shopify Partner
9 0 9

Hi @LitExtension 

Thank you for your reply. It is correct that the Youtube tutorial is targeting the Debut theme, but the code I posted is adapted to Dawn. So the code works. The only thing that I am struggling with is how to call the function when the product page loads, so that images for the unselected variant are hidden right from the start. After the product page has loaded, pictures are hidden/shown whenever the customer selects a different variant.

LitExtension
Shopify Partner
3338 657 718

Hi @UTKbuilder,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
UTKbuilder
Shopify Partner
9 0 9

@LitExtensionThank you. The theme is Dawn. The page is not password protected.

LitExtension
Shopify Partner
3338 657 718

Hi @UTKbuilder,

You can follow the suggested steps below( note that it requires you to have coding experience 😞

- Step 1: Add data-thumbnail-color="{{ media.alt }}" at main-product.liquid file. 

Screenshot.png

- Step 2: Go to global.js file, find 'updateMasterId' and add code here:

Screenshot.png

- Step 3: Change 'thumbnail.color' => 'thumbnail-color'

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
UTKbuilder
Shopify Partner
9 0 9

@LitExtensionI really appreciate your suggestion and help!! Also, thank you for catching the 'thumbnail.color' => 'thumbnail-color'. I actually changed the name away from data-thumbnail-color when I deployed my own code on my own site, so I did not catch that mistake myself.

 

However, the original intent of my post and what I am trying to achieve is to have the script run on page load, not just on variant change. Right now every picture is shown on page load, even if only one variant is selected. As far as I can see, this is because the VariantSelects class in global.js uses the 'change' event listener, which is not fired on page load.

 

I am experimenting with inputting a script in main-product.liquid to call the onVariantChange function , but without success so far:

 

<script>
document.addEventListener('DOMContentLoaded', function() {
    onVariantChange(this.currentVariant);
}, false);
</script>
LitExtension
Shopify Partner
3338 657 718

This is an accepted solution.

Hi @UTKbuilder,

Please add code here:

Screenshot.png

Code:

{% 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 %}

 

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
UTKbuilder
Shopify Partner
9 0 9

That was the final piece of the puzzle. Thanks a lot!!

 

I slightly modified the logical statement, so it will also show images where the alt text is "all" on page load. The JS that I posted initially is already supports always showing any picture with the alt text "alt". This allows you to have pictures that are always shown, regardless of the chosen variant. That is useful if you for example have different color variations and what to show the pack shots of each variant only when when selected, but also have some pictures where the product is placed in context, that you would like to share across variants.

 

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

 

 

made4Uo
Shopify Partner
787 82 137

Hi,

If you have Dawn theme or Any Shopify 2.0 FREE themes, this should work. The code is made to call all the variant options related images. You can have multiple variants options. Works with the Dawn product settings too, that includes thumbnail carousel and even the media size settings.

See video for more information.

✿✿✿-If this helps, please Accept as Solution✌-✿✿✿
Need help? Custom edits?
Just visit me at my ☏ website and check my codes for as low as $7 custom sections and snippets.
I can write a code for you as well.