92 lines
3.5 KiB
JavaScript
Executable File
92 lines
3.5 KiB
JavaScript
Executable File
define([
|
|
'jquery'
|
|
], function ($) {
|
|
'use strict';
|
|
|
|
return function (widget) {
|
|
|
|
$.widget('mage.SwatchRenderer', widget, {
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_create: function () {
|
|
var options = this.options,
|
|
gallery = $('[data-gallery-role=gallery-placeholder]'),
|
|
productData = this._determineProductData(),
|
|
$main = productData.isInProductView ?
|
|
this.element.parents('.column.main') :
|
|
this.element.parents('.product-item-info');
|
|
|
|
if (productData.isInProductView) {
|
|
gallery.data('gallery') ?
|
|
this._onGalleryLoaded(gallery) :
|
|
gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
|
|
} else {
|
|
options.mediaGalleryInitial = [{
|
|
'img': $main.find('.product-image-photo').attr('src')
|
|
}];
|
|
}
|
|
|
|
this.productForm = this.element.parents(this.options.selectorProductTile).find('form:first');
|
|
this.inProductList = this.productForm.length > 0;
|
|
},
|
|
|
|
/**
|
|
* Update [gallery-placeholder] or [product-image-photo]
|
|
* @param {Array} images
|
|
* @param {jQuery} context
|
|
* @param {Boolean} isInProductView
|
|
*/
|
|
updateBaseImage: function (images, context, isInProductView) {
|
|
var justAnImage = images[0],
|
|
initialImages = this.options.mediaGalleryInitial,
|
|
gallery = $(this.options.mediaGallerySelector).data('gallery'),
|
|
imagesToUpdate,
|
|
isInitial;
|
|
|
|
// 每个产品图片添加caption信息
|
|
if(images.length){
|
|
images.forEach(function(img){
|
|
img.caption = initialImages[0].caption
|
|
});
|
|
}
|
|
|
|
if (isInProductView) {
|
|
imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
|
|
isInitial = _.isEqual(imagesToUpdate, initialImages);
|
|
|
|
if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
|
|
imagesToUpdate = imagesToUpdate.concat(initialImages);
|
|
}
|
|
|
|
imagesToUpdate = this._setImageIndex(imagesToUpdate);
|
|
|
|
if (gallery) {
|
|
gallery.updateData(imagesToUpdate);
|
|
}
|
|
|
|
if ($(this.options.mediaGallerySelector).length) {
|
|
if (isInitial) {
|
|
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
|
|
} else {
|
|
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
|
|
selectedOption: this.getProduct(),
|
|
dataMergeStrategy: this.options.gallerySwitchStrategy
|
|
});
|
|
}
|
|
}
|
|
|
|
if (gallery) {
|
|
gallery.first();
|
|
}
|
|
|
|
} else if (justAnImage && justAnImage.img) {
|
|
context.find('.product-image-photo').attr('src', justAnImage.img);
|
|
}
|
|
}
|
|
|
|
});
|
|
return $.mage.SwatchRenderer;
|
|
}
|
|
}); |