Function for changing selected image

Store Design
, , , , , , ,

Topic summary

A developer is attempting to update product images when variant options change in a custom-coded Shopify bundle. Their current JavaScript function tries to add/remove an ‘is-active’ class to display the correct variant image, but the image doesn’t appear in the first thumbnail slide position.

Technical Issue Identified:
A community member debugged the code and found a ‘TypeError: mediaList.select is not a function’ error preventing images from updating. They provided a screenshot highlighting the problematic code logic.

Previous Approach:
The developer’s earlier solution replaced the first product image entirely, which caused unwanted side effects: it duplicated variant images and removed the initially selected variant image. That code included a loading spinner and scroll-to-center functionality.

Current Status:
The discussion remains open with the developer seeking a better method to properly select and display variant images from the image list when custom variant selectors change, without losing the first product image or creating duplicates.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1 
function updateImageForSelectedVariant(selector) {
  const selectedVariantId = selector.value;

  const productMediaOld = document.querySelector('.product__media-item.is-active');
if (productMediaOld) {
  productMediaOld.classList.remove('is-active');
}

// Find the new media item that matches the selected variant
const productMedia = document.querySelector(`.product__media-item[data-media-id*="${selectedVariantId}"]`);

  console.log(productMedia);
if (productMedia) {
  productMedia.classList.add('is-active');
}
}

Hello I’m trying to display the new product image on variant change on a manual coded bundle but when I set the other image active it is not selected yet and does not appear on the first slide of the thumbnail. Is there an easier way to do this? I previously changed the selected image to the new selected image, but this got rid of the first selected image. Thanks in advance! URL: https://interiorglows.com/products/glowcurtain-400-led-lights

1 Like
2

Hi @TrendBlend

I am from Mageplaza - Shopify solution expert.

I have debugged the JavaScript code on your website. The error ‘TypeError: mediaList.select is not a function’ occurred, which prevented the images from updating when selecting an option.

Please review the logic of the code shown in the attached image below.

2025-04-26_17-34.png
2025-04-26_17-34.png1907×873 276 KB

If you need any further assistance, just ping me.

Best regards!

3

Hello @mageplaza-cs , thanks for the reply. I know that causes an error but I was wondering if there was a method to select the variant images from the list of images when switching (custom) variant selectors. I previously did it like this, but this only changed the 1st product image and duplicates variant images and gets rid of the first product image which is the variant image of the firstly selected image. Previous code:

function updateImageForSelectedVariant(selector) {
  const selectedVariantId = selector.value;

  const productMedia = document.querySelector('.product__media');
    const existingSpinner = productMedia.querySelector('.spinner'); // Check if there's already a spinner

  if (existingSpinner) {
    existingSpinner.remove(); // Remove the existing spinner if present
  }
  
    const spinner = document.createElement('div');
    spinner.classList.add('spinner'); // Add the spinner class for styling
    productMedia.appendChild(spinner);

  // Get the height of the header (assuming it's a fixed header)
  const headerHeight = document.querySelector('header').offsetHeight || 0;
  
  // Calculate the position to scroll to, centered in the viewport
  const elementTop = productMedia.getBoundingClientRect().top + window.pageYOffset;
  const centerPosition = elementTop - (window.innerHeight / 2) + (productMedia.offsetHeight / 2);

  // Scroll to the calculated center position
// Check if the device width is less than or equal to 768px (common for phones)
if (window.innerWidth <= 768) {
  window.scrollTo({
    top: centerPosition - headerHeight, // Adjust for header
    behavior: 'smooth'
  });
}

  getVariantById(selectedVariantId).then(variant => {
    
    const selectedImage = variant.featured_image ? variant.featured_image.src : null;
    if (selectedImage) {
      const productImageElement = document.querySelector('.product__media img'); // Ensure this selector is correct
      if (productImageElement) {
        const updatedImagesrc=selectedImage + "?t=" + new Date().getTime(); // Cache busting
        
        // Temporarily hide the image while updating
        productImageElement.style.visibility = 'hidden';

        // Update the image source
        productImageElement.src=updatedImageSrc;
        productImageElement.srcset = updatedImageSrc; // Update srcset as well
        
        // Wait for the new image to load
        productImageElement.onload = function() {
          // Hide the spinner once the image has loaded
          spinner.remove();

          // Show the image again after it's loaded
          productImageElement.style.visibility = 'visible';
        };

        productImageElement.onerror = function() {
          console.error('Error loading image');
          spinner.remove(); // Remove the spinner in case of error
        };
      }
    }
  }).catch(error => {
    console.error("Error updating image:", error);
    spinner.remove(); // Remove the spinner in case of an error
  });
}