How can I trigger variant select actions on my product page?

[ChrisTong]

Hi. I've modified product-template.liquid on my Supply theme, to display a row of variant images below the variant dropdown menu. I've added javascript code so that, when a customer selects one of the images, the visible dropdown menu choice changes accordingly, as does the hidden add to cart menu:

<a href="javascript&colon;void 0" onclick="document.getElementById('productSelect-{{ section.id }}-option-0').value = '{{ variant.title }}'; document.getElementById('productSelect-{{ section.id }}').value = '{{ variant.id }}';"><img
src="{{ variant | image_url: width: 50, height: 50 }}" data-sku="{{ variant.sku }}" value="{{ variant.id }}" alt="{{ variant.title }} {{ variant.price | money_with_currency }}"></a>

What I'd also like to happen are the events that occur when the customer selects a variant menu option:
* Change the large product image on the page to be the variant image.
* Change [cart icon] unavailable to the Add To Cart graphic / Buy with PayPal / More payment options link.
[That second bullet has to do with the fact that I've recoded the product page to display the product image, rather than the image of the first variant, upon loading. So until the customer actually picks a specific variant, the Add To Cart graphic (etc.) does not appear.]

I'm guessing I need to somehow add to my javascript code something that triggers a change event on the variant menu. I've made a few attempts at doing this, but none of them worked. Could anyone tell me how to do this? Thanks so much!

Chris

[ChrisTong · Accepted solution]

OK, I figured out how to trigger a change event on the select -- I just needed to add:
document.getElementById('productSelect-{{ section.id }}-option-0').dispatchEvent(new Event('change'));
to the end of my javascript&colon;

<a href="javascript&colon;void 0" onclick="document.getElementById('productSelect-{{ section.id }}-option-0').value = '{{ variant.title }}';
document.getElementById('productSelect-{{ section.id }}').value = '{{ variant.id }}';document.getElementById('productSelect-{{ section.id }}-option-0').dispatchEvent(new Event('change'));"><img
src="{{ variant | image_url: width: 50, height: 50 }}" width="50" height="50"
data-sku="{{ variant.sku }}" value="{{ variant.id }}" alt="{{ variant.title }} {{ variant.price | money_with_currency }}"></a>

Now, pressing any of these thumbnail images changes the variant menu value AND triggers the change of large image, and the appearance of the ADD TO CART button (if it wasn't there already).

[Mujaida]

Hi,

when You say, "as does the hidden add to cart menu:" , Is your selected variant details getting updated in cart menu? If so, Please help me and provide me details of that functionality.

I have a requirement where, one product has 22 variants and each variant is assigned one image. When a swatch is selected correct image is displayed and same flows in future actions as cart notification, cart  and checkout page. but my requirement is the selected image must be shown in featured image place but when I add variant to cart or buy, I want first variant image to flow. Can you help me proceed with this?