Changing product featured images by clicking on variant Select in custom template

Store Design
1

i have created a new template product page and i want to change product image by clicking on variants of size or color , i made a code and product price and url change but product imagges doesnt change as u can show my code plz let me know about custom element or if i am making mistake in liquid , i dont know how to create custom element coding for product images help me out

{{ product.vendor }}

{%- render 'price', product: product, use_variant: true, %}

{%- if shop.taxes_included -%}
{{ ‘products.product.include_taxes’ | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ ‘products.product.shipping_policy_html’ | t: link: shop.shipping_policy.url }}
{%- endif -%}

{%- assign featured_image = product.selected_or_first_available_variant -%} {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

<myproduct-media
id=“custommediaproduct-{{ section.id }}-right”
role=“region”
{% if section.settings.enable_sticky_info %}
class=“product__media-gallery”
{% endif %}
aria-label=“{{ ‘products.product.media.gallery_viewer’ | t }}”
data-desktop-layout=“{{ section.settings.gallery_layout }}”

{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

{% if product.selected_or_first_available_variant.featured_image %}
<img
id=“featured_mediapro-{{ section.id }}-{{ featured_media.id }}”
src=“{{ product.selected_or_first_available_variant.featured_image | img_url: ‘715x717’ }}”
alt=“{{ product.featured_media.alt | escape }}”
value=“{{ value }}”

{% endif %}

    {%- for image in product.images -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
  • {%- assign media_position = 1 -%}

    {{ image.alt | escape }}

    • {%- endunless -%} {% endfor %}

{%- if product.description != blank -%}

{{ product.description }}
{%- endif -%}

<myvariant-selector
class=“variant_picker_custom”
data-section=“{{ section.id }}”
data-url=“{{ product.url }}”
{{ block.shopify_attributes }}

{%- for option in product.options_with_values -%}

{{ option.name }}
{%- endfor -%}

here’s java script

class customVariantselector extends HTMLElement {
constructor() {
super();
this.addEventListener(“change”, this.oneveryVariantChange);
const price = document.getElementById(price-${this.dataset.section});

}
oneveryVariantChange() {
this.updateURL();
this.updatevalue();
this.getVariantData();
this.updatingId();
this.changeprice();
this.updatecustomproductimage();
}
getVariantData() {
this.variantData =
this.variantData ||
JSON.parse(this.querySelector(‘[type=“application/json”]’).textContent);
return this.variantData;
}
updatevalue() {
console.log(“123”);
this.options = Array.from(
this.querySelectorAll(“select”),
(select) => select.value
);
}
updatingId() {
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options
.map((option, index) => {
return this.options[index] === option;
})
.includes(false);
});
}
changeprice() {
fetch(
${this.dataset.url}?variant=${this.currentVariant.id}&section_id=${ this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section }
)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, “text/html”);
const destination = document.getElementById(
price-${this.dataset.section}
);
const source = html.getElementById(
price-${ this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section }
);
if (source && destination) destination.innerHTML = source.innerHTML;
});
}

updateURL() {
console.log(“hellow world”);
if (!this.currentVariant || this.dataset.updateUrl === “true”) return;
window.history.replaceState(
{},
“”,
${this.dataset.url}?variant=${this.currentVariant.id}
);
}

updatecustomproductimage(event) {
if (!this.currentVariant) return;
if (!this.currentVariant.featured_media) return;

}
}

customElements.define(“myvariant-selector”, customVariantselector);

2

Not possible to check the code you shared.
Basic concept to achieve the thing you need it, on change of the variant with callback function get the image of selected variant and replace with featured one.