bigcommerce Using javascript to customize the storefront Change product image on hover on a category page in Stencil

Example

This was added to assets/js/theme/category.js in loaded(). You will also need to add {{inject "categoryProducts" category.products}} to templates/pages/category.html

var mainImages = [];
  var rollOvers = [];
  this.context.categoryProducts.forEach(function(e, i) {
    if (e.images[0]) {
      mainImages[e.id] = e.images[0].data;
    }
    if (e.images[1]) {
      rollOvers[e.id] = e.images[1].data;
    }
  });

  rollOvers.forEach(function(image, id) {
    image = image.replace('{:size}', '500x659');

    $('a[data-product-id="' + id + '"]').closest('li.product').find('.card-image')
      .on('mouseover', function() {
      $(this).attr('src', image);
    }).on('mouseout', function() {
      $(this).attr('src', mainImages[id].replace('{:size}', '500x659'));
    });
  });