在 Stencil 中的类别页面上悬停时更改产品图像

这被添加到 loaded() 中的 assets/js/theme/category.js。你还需要将 {{inject "categoryProducts" category.products}} 添加到 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'));
    });
  });