Change main product page image on variant selection.

Technical Q&A
,
1

Hey all, using Prestige theme, and would like to change the main product image to the selected variant’s image when selected.

Currently have it showing the main product image on page load (changed from initially defaulting to variant image), and this code is in product-gallery.liquid.

{% liquid
  assign product_form_id = 'product-form-' | append: product.id | append: '-' | append: section.id
  # pepsi_max2k changed to only product.featured_media, to avoid defaulting to variant images on product page
  # assign default_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
 **assign default_media = product.featured_media | default: product.featured_media**
  assign product_gallery_carousel_id = 'product-gallery-carousel-' | append: product.id | append: '-' | append: section.id
  assign filtered_indexes = null | sort

Meanwhile, theme.js has javascript to auto-scroll to the variant image when variant is selected, on mobile. I turned the scrolling-down-the-page off on desktop cos it’s annoying.

onVariantChange_fn = function(event) {
  const filteredIndexes = __privateMethod(this, _getFilteredMediaIndexes, getFilteredMediaIndexes_fn).call(this, event.detail.product, event.detail.variant);
  this.carousel.filter(filteredIndexes);
  if (event.detail.variant["featured_media"] && event.detail.previousVariant["featured_media"]?.["id"] !== event.detail.variant["featured_media"]["id"]) {
    const position = event.detail.variant["featured_media"]["position"] - 1, filteredIndexBelowPosition = filteredIndexes.filter((filteredIndex) => filteredIndex < position);
    if (this.carousel.isScrollable) {
      this.carousel.select(position - filteredIndexBelowPosition.length, { instant: true });
    } else {
      /* pepsi_max2k stop scrolling to image on selection of variant on desktop */
      <strong>/* this.querySelector(`[data-media-id="${event.detail.variant["featured_media"]["id"]}"]`)?.scrollIntoView({ block: "start", behavior: "smooth" }); */
   </strong> }
  }
};

However, would be nice to change the main image (“default_media” in the liquid) to the variant image on selection of variant, when on desktop. No scrolling, just replace the main top image. See example below and [email removed] https://beijaflor.com.au/products/small-pot-plant-bundle

Any ideas how to do this? I’m just guessing I need to somehow change default_media to product.selected_or_first_available_variant.featured_media in the onVariantChange_fn but one’s js, one’s liquid… bleuughhhh :cry:

Screenshot 2024-09-07 121046.png
Screenshot 2024-09-07 121046.png777×896 754 KB

2

Wanted to do the same thing….

Just catch the variant object in the event, and then pull its src attribute and feed that into the first image slot.

Update that onVariantChange_fn function…
console.log(‘** Variant Change Event Fired **’);
console.log(event);
console.log(‘attemping variant image swap, new image: ’ + event.detail.variant.featured_image.src);
//replace featured image with the variant image src
document.getElementsByClassName(‘product-gallery__media’)[0].childNodes[0].src=event.detail.variant.featured_image.src;
//not doing this responsively… drop srcset to force render of new src
document.getElementsByClassName(‘product-gallery__media’)[0].childNodes[0].srcset=’';