在 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'));
});
});