Description: We can add customized product images to the inventory item on the SCA websites Checkout and My Account section using “ProductLine.Common.Image”standard model file.
JavaScript:
//updating the Do It Best images in the TransactionLineModel model file by extending filterImages and getThumbnail functions
_.extend(TransactionLineModel.prototype, {
filterImages: function filterImages(itemImagesDetail, imageOptionFilters) {
try {
const self = this;
const ITEM = this.get(‘item’);
const DIBIMAGES = getDoItBestImages(ITEM);
itemImagesDetail.urls = DIBIMAGES && DIBIMAGES.length ? DIBIMAGES : (itemImagesDetail.urls? itemImagesDetail.urls : {});
let imagesContainer = itemImagesDetail;
let selectedOptionFilter;
_.each(imageOptionFilters, function(imageFilter) {
selectedOptionFilter = self.get(‘options’).findWhere({ cartOptionId: imageFilter });
if (
selectedOptionFilter &&
selectedOptionFilter.get(‘value’) &&
selectedOptionFilter.get(‘value’).label
) {
const label = selectedOptionFilter.get(‘value’).label.toLowerCase();
_.each(imagesContainer, function(value, key) {
if (key.toLowerCase() === label) {
imagesContainer = value;
}
});
}
});
return imagesContainer;
} catch (error) {
console.error(‘Error @ filterImage’, error);
}
},
getThumbnail: function getThumbnail() {
try {
const item = this.get(‘item’);
const DIBIMAGES = getDoItBestImages(item);
let itemImagesDetail = item.get(‘itemimages_detail’) || {};
itemImagesDetail.urls = DIBIMAGES && DIBIMAGES.length ? DIBIMAGES : (itemImagesDetail.urls ? itemImagesDetail.urls : {});
const IMAGEFILTERS = Configuration.get(‘productline.multiImageOption’, []);
let images = [];
let imagesContainer = {};
if (
_.isEqual(itemImagesDetail, {}) &&
item.get(‘_matrixParent’).get(‘internalid’) &&
item.get(‘_matrixParent’).get(‘itemimages_detail’)
) {
itemImagesDetail = item.get(‘_matrixParent’).get(‘itemimages_detail’);
}
// If you generate a thumbnail position in the itemimages_detail it will be used
if (itemImagesDetail.thumbnail) {
imagesContainer = this.filterImages(itemImagesDetail.thumbnail, IMAGEFILTERS);
images = Utils.imageFlatten(imagesContainer);
return item.getFirstImage(images) || itemImagesDetail.thumbnail;
}
if (SC.ENVIRONMENT.siteType === ‘STANDARD’) {
return item.getThumbnail();
}
itemImagesDetail = itemImagesDetail.media || itemImagesDetail;
imagesContainer = this.filterImages(itemImagesDetail, IMAGEFILTERS);
images = Utils.imageFlatten(imagesContainer);
return images.length ? item.getFirstImage(images): {
url: Utils.getThemeAbsoluteUrlOfNonManagedResources(
‘img/no_image_available.jpeg’,
Configuration.get(‘imageNotAvailable’)
),
altimagetext: item.get(‘_name’)
};
} catch (error) {
console.error(‘Error @ getThumbnail’, error);
}
}
})
//updating the Do It Best images in the ProductModel model file by extending filterImages and getThumbnail functions
_.extend(ProductModel.prototype, {
filterImages: function filterImages(itemImagesDetail, imageOptionFilters) {
try {
const self = this;
const ITEM = this.get(‘item’);
const DIBIMAGES = getDoItBestImages(ITEM);
itemImagesDetail.urls = DIBIMAGES && DIBIMAGES.length ? DIBIMAGES : (itemImagesDetail.urls? itemImagesDetail.urls : {});
let imagesContainer = itemImagesDetail;
let selectedOptionFilter;
_.each(imageOptionFilters, function(imageFilter) {
selectedOptionFilter = self.get(‘options’).findWhere({ cartOptionId: imageFilter });
if (
selectedOptionFilter &&
selectedOptionFilter.get(‘value’) &&
selectedOptionFilter.get(‘value’).label
) {
const label = selectedOptionFilter.get(‘value’).label.toLowerCase();
_.each(imagesContainer, function(value, key) {
if (key.toLowerCase() === label) {
imagesContainer = value;
}
});
}
});
return imagesContainer;
} catch (error) {
console.error(‘Error @ filterImage’, error);
}
},
getThumbnail: function getThumbnail() {
try {
const item = this.get(‘item’);
const DIBIMAGES = getDoItBestImages(item);
let itemImagesDetail = item.get(‘itemimages_detail’) || {};
itemImagesDetail.urls = DIBIMAGES && DIBIMAGES.length ? DIBIMAGES : (itemImagesDetail.urls ? itemImagesDetail.urls : {});
const IMAGEFILTERS = Configuration.get(‘productline.multiImageOption’, []);
let images = [];
let imagesContainer = {};
if (
_.isEqual(itemImagesDetail, {}) &&
item.get(‘_matrixParent’).get(‘internalid’) &&
item.get(‘_matrixParent’).get(‘itemimages_detail’)
) {
itemImagesDetail = item.get(‘_matrixParent’).get(‘itemimages_detail’);
}
// If you generate a thumbnail position in the itemimages_detail it will be used
if (itemImagesDetail.thumbnail) {
imagesContainer = this.filterImages(itemImagesDetail.thumbnail, IMAGEFILTERS);
images = Utils.imageFlatten(imagesContainer);
return item.getFirstImage(images) || itemImagesDetail.thumbnail;
}
if (SC.ENVIRONMENT.siteType === ‘STANDARD’) {
return item.getThumbnail();
}
itemImagesDetail = itemImagesDetail.media || itemImagesDetail;
imagesContainer = this.filterImages(itemImagesDetail, IMAGEFILTERS);
images = Utils.imageFlatten(imagesContainer);
return images.length ? item.getFirstImage(images): {
url: Utils.getThemeAbsoluteUrlOfNonManagedResources(
‘img/no_image_available.jpeg’,
Configuration.get(‘imageNotAvailable’)
),
altimagetext: item.get(‘_name’)
};
} catch (error) {
console.error(‘Error @ getThumbnail’, error);
}
}
})
//creating getDoItBestImages function to get the Do It Best images if the Item is Synced to Do It Best.
let getDoItBestImages = item => {
try {
const DIBSYNC = item.get(‘custitem_jj_dib_sync_tfll403’);
if (DIBSYNC) {
const DIBIMAGES = [
item.get(‘custitem_jj_dib_image1_tfll403’),
item.get(‘custitem_jj_dib_image2_tfll403’),
item.get(‘custitem_jj_dib_image3_tfll403’),
];
const ALTIMAGETEXT = item.get(‘displayname’);
let dibImagesArray = [];
_.each(DIBIMAGES, image => {
if (image && image !== ”) {
dibImagesArray.push({ altimagetext: ALTIMAGETEXT, url: image });
}
});
return dibImagesArray;
} else {
return false;
}
} catch (error) {
console.error(‘Error @ getDIBImages’, error);
}
}