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

Arguments

Argument	Type	Description
external_id	string - required	Product ID or SKU

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

Example

Using Async/Await

async function fetchProduct() {
  const product = await window.wyng['_WYNG_ID_'].getProduct('SKU96405');
  console.log(product);
}

fetchProduct();

Using Promises

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": "SKU100605",
  "image_url": "https://dummyimage.com/1080x1080/e8e8e8/222222.jpg&text=Product+Image+1",
  "item_group_id": "29723",
  "name": "Skin Foundation Stick, Neutral Porcelain",
  "price": "$69.00",
  "sale_price": "$59.00",
  "size": "0.31 oz/9g"
}

getProducts

Arguments

Argument	Type	Description
filters	object	Optional query filters used to narrow the returned products

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

Supported filters:

Filter	Type	Description
external_id	string 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_id	string	Filters products by item group ID. Use this when you want to fetch all products that belong to the same product group or variant family.

Example

Using Async/Await

async function fetchProducts() {
  const products = await window.wyng['_WYNG_ID_'].getProducts({
    external_id: ['SKU96405', 'SKU96406'],
    item_group_id: '29723',
  });

  console.log(products);
}

fetchProducts();

Using Promises

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

Potential Output

[
  {
    "availability": "in stock",
    "external_id": "SKU96405",
    "image_url": "https://dummyimage.com/1080x1080/e8e8e8/222222.jpg&text=Product+Image+1",
    "name": "Skin Foundation Stick, Neutral Porcelain",
    "price": "$69.00",
    "sale_price": "$59.00"
  },
  {
    "availability": "in stock",
    "external_id": "SKU96406",
    "image_url": "https://dummyimage.com/1080x1080/e8e8e8/222222.jpg&text=Product+Image+2",
    "name": "Skin Foundation Stick, Warm Ivory",
    "price": "$69.00",
    "sale_price": "$59.00"
  }
]

setProduct

Arguments

Argument	Type	Description
external_id	string - required	Product ID or SKU
componentId	string	Component Id of the Product Card component

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.