How to display a Variant Metafield Image instead of a Variant Image when selecting a Variant Option?

[SomethingElse]

Theme: Taste

Version: 10.0.0

Website: https://somethingelsedesigns.com.au/

Website Password: somethingelseiscoming

CONTEXT

By default, when a customer clicks a variant option on the product page, that variant option image becomes the featured image (see below).

AIM

Instead of the variant option image being displayed as the featured image, I need the variant metafield image to be shown when a variant option is selected.

POSSIBLE SOLUTION?

My initial thought was to create a variant metafield of type file.

variant.metafields.custom.design

Within the product settings, this creates a place within each variant option to upload an image file (this image is what I want displayed as the featured image when the corresponding variant option is selected).

I then dived into the code to try and find the spot where the featured image is changed when a variant is selected, however I don't know if I'm on the right track?

In media-gallery.js I found

setActiveMedia(mediaId, prepend)
{
const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`);
this.elements.viewer.querySelectorAll('[data-media-id]').forEach((element) => { element.classList.remove('is-active'); });
activeMedia.classList.add('is-active');
if (prepend)
{
activeMedia.parentElement.prepend(activeMedia);
if (this.elements.thumbnails)
{
const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
activeThumbnail.parentElement.prepend(activeThumbnail);
}
if (this.elements.viewer.slider) this.elements.viewer.resetPages();
}

this.preventStickyHeader();
window.setTimeout(() => {
if (this.elements.thumbnails) {
activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft });
}
if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
activeMedia.scrollIntoView({ behavior: 'smooth' });
}
});
this.playActiveMedia(activeMedia);

if (!this.elements.thumbnails) return;
const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
this.setActiveThumbnail(activeThumbnail);
this.announceLiveRegion(activeMedia, activeThumbnail.dataset.mediaPosition);
}

However in global.js I also found

updateMedia() {
    if (!this.currentVariant) return;
    if (!this.currentVariant.featured_media) return;

    const mediaGalleries = document.querySelectorAll(`[id^="MediaGallery-${this.dataset.section}"]`);
    
    mediaGalleries.forEach((mediaGallery) =>  
      mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true)
    );

    const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
    if (!modalContent) return;
    const newMediaModal = modalContent.querySelector(`[data-media-id="${metafieldValue}"]`);
    if (!newMediaModal) return;
    modalContent.prepend(newMediaModal);
}

I'm not sure which one to modify, how to reference the variant.metafields.custom.design ... and what to add/change to get this to work 🤔.

Let me know if you need any clarification.

Any help is much appreciated!

[Ritu-25]

Hey @SomethingElse , 

I have seen your issue and for that, I need to take a deep dive into your theme. 
Here I'm sharing with you a small solution that might help you.

variant.metafields.custom.design.value

If you'd like to discuss this more, don't hesitate to send me a PM.

Thanks, 

Ritu 

[SomethingElse]

I was trying to modify this.currentVariant.featured_media.id in the section below to something like this.currentVariant.metafields.custom.design however currentVariant can't access a variant metafield (and I can't find where currentVariant is defined)

mediaGalleries.forEach((mediaGallery) =>  
      mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true)
    );

Regarding variant.metafields.custom.design.value I can't find much documentation on the .value, I don't know how I would use this in this scenario.

Let me know if you need any context or code files.

Thanks again for the response!

[Junaid_Khawaja]

You CAN'T access metafields in shop.js