onProductSelect

Registers a callback that runs when a user selects a product via the product catalog.

Usage

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<partner_api_key>",
    autoAuthToken: "<auto_auth_token>",
    container: document.getElementById("container"),
  });

  const onProductSelect = (opts) => {
    // the user has selected a product via the catalog
    console.log(opts);
  };

  api.showCatalog({
    onProductSelect,
  });
})();

JAVASCRIPT

You don't need to directly access the properties in the opts object. You only need to pass them straight into the createDesign method.

Parameters

To understand the meaning of the Volatile column, see the definition of Volatile parameters in the Glossary.

Parameter	Type	Required	Volatile	Description
`opts`	object	Yes	N/A	Options for configuring the editor.
`opts.analyticsCorrelationId`	string	Yes	Yes	The ID to track user interactions with a design.
`opts.designSource`	string	Yes	Yes	Whether a design is created via a product catalog or by directly launching the Canva editor.
`opts.partnerProductId`	string	Yes	No	The ID of a partner's product. Some examples are `"Poster11x17in"` and `"Banner96x24in"`. A partner product ID determines the dimensions, the templates, the furniture (if applicable), and the export settings to apply for a design. A partner may provide a partner product ID to Canva beforehand. This may match with a product ID in a partner's back-end, such as SKU or internal system identifier. If partner doesn't provide a partner product ID, Canva assigns one for each product.
`opts.productId`	string	Yes	Yes	The ID of a type of partner's product. Some examples are `"posters"` and `"cards"`.
`opts.productSizeOptionId`	string	Yes	Yes	The ID of the partner's product size option.
`opts.maxPages`	number	Yes	No	The maximum number of pages a user can print. The default value is 2.
`opts.minPages`	number	Yes	No	The minimum number of pages a user can print. The default value is 1.
`opts.template`	string	No	Yes	The ID of a template.