'NetSuite SCA 2021.1 - Dynamically Override PDP Product Image
Working on an extension to override the PLP and PDP product image for books so we can pull them from a third party service.
I borrowed the techniques from https://developers.suitecommerce.com/change-thumbnail-images-based-on-color-refinement-on-a-product-list-page.html
Got everything working on the PLP side:
Layout.addToViewContextDefinition('Facets.ItemCell.View', 'thumbnail', 'string', function thumbnail(context) {
// Create a copy of the model so that it's easy to query the current item's data from it
var model = _.find(PLP.getItemsInfo(), function (item) {
return item.internalid == context.itemId;
}),
// Keep the original thumbnail just in case we don't want to change it
thumbnail = context.thumbnail,
isbn = model.custitem_nsts_csic_isbn ? model.custitem_nsts_csic_isbn : '';
// Check if ISBN exists, we don't want to change the thumbnail otherwise.
if (isbn.length > 0) {
thumbnail.url = 'REPLACEMENT_URL';
}
return thumbnail;
});
But when I try to do the same thing on the PDP side the code executes but the image is not overwritten. I've tried both of the following methods without the desired result.
Layout.addToViewContextDefinition('ProductDetails.ImageGallery.View', 'firstImage', 'object', function firstImage(context) {
var model = PDP.getItemInfo().item,
// Keep the original thumbnail just in case we don't want to change it
firstImage = context.firstImage,
isbn = model.custitem_nsts_csic_isbn ? model.custitem_nsts_csic_isbn : '';
// Check if ISBN exists, we don't want to change the thumbnail otherwise.
if (isbn.length > 0) {
firstImage.url = 'REPLACEMENT_URL';
}
return firstImage;
});
Layout.addToViewContextDefinition('ProductDetails.ImageGallery.View', 'images', 'array', function images(context) {
// Create a copy of the model so that it's easy to query the current item's data from it
var model = PDP.getItemInfo().item,
// Keep the original thumbnail just in case we don't want to change it
images = context.images,
isbn = model.custitem_nsts_csic_isbn ? model.custitem_nsts_csic_isbn : '';
// Check if ISBN exists, we don't want to change the thumbnail otherwise.
if (isbn.length > 0) {
images[0].url = 'REPLACEMENT_URL';
}
return images;
});
Any insight would be appreciated.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
