We are showing the URL images that are added in the item record, images are stored in the custitem_jj_dib_image1_tfll403, custitem_jj_dib_image2_tfll403 and custitem_jj_dib_image3_tfll403 are the field id’s.
JavaScript:
Entry Point:
//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);
}
}
//extending the Itemkeymapping item images to show DO It Best images in the PDP and PLP page
Configuration.itemKeyMapping = Configuration.itemKeyMapping || {};
_.extend(Configuration.itemKeyMapping,{
_thumbnail: function(item) {
try {
const ITEMIMAGESDETAIL = item.get('itemimages_detail') || {};
let dibImages = getDoItBestImages(item);
if (dibImages) {
const HASIMAGES = ITEMIMAGESDETAIL.urls && ITEMIMAGESDETAIL.urls.some(imageObject => JSON.stringify(imageObject) === JSON.stringify(dibImages[0]));
ITEMIMAGESDETAIL.urls = ITEMIMAGESDETAIL.urls && !HASIMAGES ? [...ITEMIMAGESDETAIL.urls, ...dibImages] : dibImages;
item.dibImages = ITEMIMAGESDETAIL;
}
// If you generate a thumbnail position in the itemimages_detail it will be used
if (ITEMIMAGESDETAIL.thumbnail) {
if (
_.isArray(ITEMIMAGESDETAIL.thumbnail.urls) &&
ITEMIMAGESDETAIL.thumbnail.urls.length
) {
return ITEMIMAGESDETAIL.thumbnail.urls[0];
}
return ITEMIMAGESDETAIL.thumbnail;
}
// otherwise it will try to use the storedisplaythumbnail
if (
SC.ENVIRONMENT.siteType &&
SC.ENVIRONMENT.siteType === 'STANDARD' &&
item.get('storedisplaythumbnail')
) {
return {
url: item.get('storedisplaythumbnail'),
altimagetext: item.get('_name')
};
}
// No images huh? carry on
const PARENTITEM = item.get('_matrixParent');
// If the item is a matrix child, it will return the thumbnail of the parent
if (PARENTITEM && PARENTITEM.get('internalid')) {
return PARENTITEM.get('_thumbnail');
}
const IMAGES = Utils.imageFlatten(ITEMIMAGESDETAIL);
// If you using the advance images features it will grab the 1st one
if (IMAGES.length) {
for (let i = 0; i < IMAGES.length; i++) {
const DETAIL = IMAGES[i];
const SPLITED = DETAIL.url.split('.');
if (SPLITED[SPLITED.length - 2] === 'default') {
return DETAIL;
}
}
return IMAGES[0];
}
// still nothing? image the not available
return {
url: Utils.getThemeAbsoluteUrlOfNonManagedResources(
'img/no_image_available.jpeg',
Configuration.get('imageNotAvailable')
),
altimagetext: item.get('_name')
};
} catch (error) {
console.error('Error @ keymapping _thumbnail', error);
}
},
// @property {Array} _images Array of objects containing the URL and the altimagetext of the images of the item
//_images updating DIB items to item that are available in item record
_images: function(item) {
try {
let result = [];
let itemImagesDetail = item.get('itemimages_detail') || {};
let dibImages = getDoItBestImages(item);
if (dibImages) {
const HASIMAGES = itemImagesDetail.urls && itemImagesDetail.urls.some(imageObject => JSON.stringify(imageObject) === JSON.stringify(dibImages[0]));
itemImagesDetail.urls = itemImagesDetail.urls && !HASIMAGES ? [...itemImagesDetail.urls, ...dibImages] : dibImages;
item.dibImages = itemImagesDetail;
}
itemImagesDetail = itemImagesDetail.media || itemImagesDetail;
result = Utils.imageFlatten(itemImagesDetail);
return result.length ? result : [
{
url: Utils.getThemeAbsoluteUrlOfNonManagedResources(
'img/no_image_available.jpeg',
Configuration.get('imageNotAvailable')
),
altimagetext: item.get('_name')
}
];
} catch (error) {
console.error('Error @ keymapping _images', error);
}
}
});