Skip to main content

Product methods

Products are often a key component of Experiences, whether recommending items, displaying product information, or personalizing content based on product data. Using the Experience JS SDK, you can retrieve detailed product information including pricing, availability, images, and custom attributes. The methods below enable you to access and work with product data in your Experience.

getProduct​

This method returns the product details for the given product ID or SKU.

Arguments​

ArgumentTypeRequiredDescription
external_idstringYesProduct ID or SKU
optionsobjectIf product is in a catalog, yes.Query filters used to narrow the returned products. See supported filters below.

Supported options:​

OptionTypeDescription
localestringReturns localized product content for the provided locale, such as en_CA. Required when the product belongs to a designated product catalog.

Example​

window.wyng['_WYNG_ID_']
  .getProduct('SKU96405')
  .then(product => {
    console.log(product);
  })
  .catch(error => {
    console.error('Error fetching product:', error);
  });

Potential Output​

{
  "availability": "in stock",
  "click_through_url": "https://wyng.com/products/dummy_product.html",
  "color": "Neutral Porcelain (N-010)",
  "custom1": "Extra light beige with a balance of yellow & pink; slightly more yellow; for pale skin",
  "custom2": "All skin tones and types.",
  "custom3": "After moisturizing skin, lightly glide across forehead, cheeks, nose, and chin. Blend with fingertips or a sponge. Build coverage as desired.",
  "description": "A portable cream foundation stick that glides on weightless medium-to-full coverage that lasts all day.",
  "external_id": "SKU96405",
  "image_url": "https://dummyimage.com/1080x1080/e8e8e8/222222.jpg&text=Product+Image+1",
  "item_group_id": "29723",
  "locale" : {
    "code": "en_CA",
    "name": "English (Canada)"
  },
  "locale_id" : "en_CA",
  "name": "Skin Foundation Stick, Neutral Porcelain",
  "price": "$69.00",
  "sale_price": "$59.00",
  "size": "0.31 oz/9g"
}

getProducts​

This method returns a list of products matching the provided filters.

Arguments​

ArgumentTypeRequiredDescription
filtersobjectIf product is in a catalog, yes.Query filters used to narrow the returned products. See supported filters below.

Supported filters:​

FilterTypeDescription
external_idstring or string[]Filters by one or more product IDs or SKUs. When an array is provided, the SDK sends repeated query parameters such as external_id=SKU96405&external_id=SKU96406.
item_group_idstring or string[]Filters by one or more item group IDs. When an array is provided, the SDK sends repeated query parameters such as item_group_id=29723&item_group_id=29724. Use this when you want to fetch all products that belong to the same product group or variant family.
localestringReturns localized product content for the provided locale, such as en_CA. Required when products belong to a designated product catalog.

Example​

window.wyng['_WYNG_ID_']
  .getProducts({
    external_id: ['SKU96405', 'SKU96406'],
    item_group_id: ['29723', '29724']
  })
  .then(products => {
    console.log(products);
  })
  .catch(error => {
    console.error('Error fetching products:', error);
  });

Potential Output​

[
  {
    "availability": "in stock",
    "click_through_url": "https://wyng.com/products/dummy_product.html",
    "color": "Neutral Porcelain (N-010)",
    "custom1": "Extra light beige with a balance of yellow & pink; slightly more yellow; for pale skin",
    "custom2": "All skin tones and types.",
    "custom3": "After moisturizing skin, lightly glide across forehead, cheeks, nose, and chin. Blend with fingertips or a sponge. Build coverage as desired.",
    "description": "A portable cream foundation stick that glides on weightless medium-to-full coverage that lasts all day.",
    "external_id": "SKU96405",
    "image_url": "https://dummyimage.com/1080x1080/e8e8e8/222222.jpg&text=Product+Image+1",
    "item_group_id": "29723",
    "locale" : {
      "code": "en_CA",
      "name": "English (Canada)"
    },
    "locale_id" : "en_CA",
    "name": "Skin Foundation Stick, Neutral Porcelain",
    "price": "$69.00",
    "sale_price": "$59.00",
    "size": "0.31 oz/9g"
  }
  {
    "availability": "in stock",
    "click_through_url": "https://wyng.com/products/dummy_product.html",
    "color": "Warm Porcelain (W-010)",
    "custom1": "Extra light beige with a balance of yellow & green; for pale skin",
    "custom2": "All skin tones and types.",
    "custom3": "After moisturizing skin, lightly glide across forehead, cheeks, nose, and chin. Blend with fingertips or a sponge. Build coverage as desired.",
    "description": "A portable cream foundation stick that glides on weightless medium-to-full coverage that lasts all day.",
    "external_id": "SKU96406",
    "image_url": "https://dummyimage.com/1080x1080/e8e8e8/222223.jpg&text=Product+Image+1",
    "item_group_id": "29723",
    "locale" : {
      "code": "en_CA",
      "name": "English (Canada)"
    },
    "locale_id" : "en_CA",
    "name": "Skin Foundation Stick, Warm Porcelain",
    "price": "$69.00",
    "sale_price": "$59.00",
    "size": "0.31 oz/9g"
  }
]

setProduct​

This method programmatically sets or updates the product displayed inside a specific Product Card component.

This only applies to standalone Product Card components, not Result Cards with product information in Quiz components. To override product information in a Quiz Result Card, use setQuizNextStepHandler.

Arguments​

ArgumentTypeRequiredDescription
external_idstringYesProduct ID or SKU
componentIdstringYesComponent Id of the Product Card component
optionsobjectIf product is in a catalog, yes.Query filters used to narrow the targeted product. See supported filters below.

Supported options:​

OptionTypeDescription
localestringReturns localized product content for the provided locale, such as en_CA. Required when the product belongs to a designated product catalog.

Example​

window.wyng['_WYNG_ID_'].setProduct('SKU96405', 'product_card_9920138439897')