Updating Product Details

Update products using Product Hydration

This document provides a more detailed view of the Bambuser Live Shopping Product Factory.


Using the product factory to update a product

Example

// Example for how to get the product factory 
 window.onBambuserLiveShoppingReady = player => { 
	
   player.on(player.EVENT.PROVIDE_PRODUCT_DATA, event => { 
     event.products.forEach(({ ref: sku, id: productId, url: publicUrl }) => { 
             // event.products contains products information scraped in Bambuser Dashboard 
       player.updateProduct(productId, factory => { 
         // Use the factory to create a product and return it 
       }); 
     }); 
   }); 
 };

Composing a product

Once you have your own product data, let's for the example call it yourProduct you can use the chained methods on the product instance created above to convert it into a product we understand.

// Inside the PROVIDE_PRODUCT_DATA event handler... 

 const { ref: sku, id: productId, url: publicUrl } = event.products[0]; 

 const yourProduct = await someGetMethodForYourProduct(sku); 

 // Full Example 
 // All methods described here: 
 player.updateProduct(productId, factory => factory 

   // currency to display price in 
   .currency(yourProduct.currency) 

   // locale that product is localized to 
   .locale(yourProduct.locale) 

   // -> the product method contains a new chain 
   //    these are methods specific to this actual product 
   .product(p => p 

     // brand name to display for the product 
     .brandName(yourProduct.brand) 

     // describes which index in the variations list below 
     // contains the default variation 
     // (e.g. if variations contain colors, and you want to display 
     //  the white version of a shirt, send the index for the white variation) 
     .defaultVariationIndex(0) 

     // localized description for the product 
     .description(yourProduct.description) 

     // localized name of the product 
     .name(yourProduct.name) 

     // sku (or any other identifier for your product) 
     .sku(yourProduct.skuOrProductIdentifier) 

      // -> the variations method contains a new chain 
      //    returned array defines variants (e.g. colors) of your product 
     .variations(v => yourProduct.colors.map(variation => 
       // v contains a factory returning a new instance of a variation 
       v() 

         // -> the attributes method contains a new chain 
         //    defines attributes for the variation 
         .attributes(a => a 
           // which name to display for the color, 
           // if multiple variations exist, 
           // in the dropdown 
           .colorName(variation.colorName) 
           .colorHexCode(variation.colorHexCode) //optional 
         ) 

         // list of image urls for the variation 
         // ordered the same as you want it displayed 
         .imageUrls(variation.images) 

         // name of the variation 
         .name(variation.name) 

         // sku (or any other identifier for your product) 
         // specific down to this variation 
         .sku(`${yourProduct.skuOrProductIdentifier}`) 

         // -> the sizes method contains a new chain 
         //    defines sizes for the variation 
         .sizes(s => variation.sizes.map(size => 
            // s contains a factory returning a new instance of a variation 
           s() 
             // name of the size 
             // (used in dropdowns) 
             .name(size.name) 

             // set whether this combination of 
             // variation and size is in stock 
             .inStock(size.quantityInStock > 0) 

             // -> the price method contains a new chain 
             //    defines price for the variation and size combo 
             .price(p => p 
               // currency to show price in 
               .currency(sizePrice.currency) 

               // current price as a number 
               .current(sizePrice.current) 

               // original price (in case current is a sale price) 
               .original(sizePrice.original) 
             ) 

             // sku (or any other identifier for your product) 
             // specific down to this size 
             .sku(`${yourProduct.skuOrProductIdentifier}`); 
         })) 
     )) 
   );

Full example with dummy data

window.onBambuserLiveShoppingReady = player => { 

   player.on(player.EVENT.PROVIDE_PRODUCT_DATA, event => { 

     event.products.forEach(({ ref: sku, id: productId, url: publicUrl }) => { 

       player.updateProduct(productId, factory => factory 
         .currency('USD') 
         .locale('en-US') 
         .product(p => p 
           .brandName('NomNom Pet Products Inc.') 
           .defaultVariationIndex(0) 
           .description('Super fun toy for your kitten') 
           .name('Cat Toys') 
           .sku('12345') 
           .variations(v => [ 
             v() 
               .attributes(a => a 
                 .colorName('Red')) 
               .imageUrls(['https://placekitten.com/500/500']) 
               .name('Red cat toy') 
               .sku('123456') 
               .sizes(s => [ 
                 s() 
                   .name('One Size') 
                   .inStock(false) 
                   .price(p => p 
                     .currency('USD') 
                     .current(19.99)) 
                   .sku('1234567'), 
               ]), 
           ]) 
         ) 
       ); 

     }); 
   }); 
 }