'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