Liquid, JavaScript, themes, sales channels
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 = "";
});
}
}
Solved! Go to the solution
This is an accepted solution.
Hi @UTKbuilder,
Please add code here:
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 %}
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.
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
@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.
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.
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.
Hi @UTKbuilder,
Please send your site and if your site is password protected, please send me the password. I will check it.
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.
- Step 2: Go to global.js file, find 'updateMasterId' and add code here:
- Step 3: Change 'thumbnail.color' => 'thumbnail-color'
Hope it helps!
@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>
This is an accepted solution.
Hi @UTKbuilder,
Please add code here:
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 %}
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 %}
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024