getProductVariants( )

Gets a product's available variants based on the specified product ID and either option choices or variant IDs.

Description

The getProductVariants() function returns a Promise that is resolved to an array of VariantItem objects when the product variants with the specified choices or variant IDs are retrieved.

Syntax

function getProductVariants(productId: string, [options: ProductVariantOptions]): Promise<Array<VariantItem>>

getProductVariants Parameters

NAME

TYPE

DESCRIPTION

productId

string

The ID of the product whose variants are being retrieved. Pass only this field to retrieve all the specified product's variants.

options

Optional

ProductVariantOptions

Variant options to return. If not specified, all the product's variants are returned.

Returns

Fulfilled - The variants with the specified choices.

Return Type:

Promise<Array<VariantItem>>

NAME

TYPE

DESCRIPTION

_id

string

Unique variant ID.

choices

ProductChoices

The choices of the retrieved variant.

variant

VariantData

Variant information.

Was this helpful?

Get product variants by specified choices

Copy Code

1/*******************************
2 * Backend code - products.jsw *
3 *******************************/
4
5import wixStoresBackend from 'wix-stores-backend';
6
7export function getProductVariants(productId, options) {
8  return wixStoresBackend.getProductVariants(productId, options);
9}
10
11/*************
12 * Page code *
13 *************/
14
15import { getProductVariants } from 'backend/products';
16
17let productId = "3fb6a3c8-988b-7895-04bd-5c59ae0b18ea"; // get product ID
18let options = {
19  choices: {
20    "Size": "Large",
21    "Color": "Red"
22  }
23};
24
25getProductVariants(productId, options)
26  .then((variants) => {
27    let firstVariant = variants[0];
28    let firstPrice = firstVariant.variant.price;
29    let numberOfReturnedVariants = variants.length;
30  })
31  .catch((error) => {
32    console.error(error);
33  })
34
35/* Example of returned variants array:
36 *
37 * [
38 *   {
39 *     "_id": "00000000-0000-03e1-0005-957f699d0688",
40 *     "choices": {
41 *       "Size": "Large",
42 *       "Color": "Red",
43 *       "Pattern": "Paisley"
44 *     },
45 *     "variant": {
46 *       "currency": "USD",
47 *       "price": 25,
48 *       "discountedPrice": 25,
49 *       "formattedPrice": "$25.00",
50 *       "formattedDiscountedPrice": "$25.00",
51 *       "pricePerUnit": 0.25,
52 *       "formattedPricePerUnit": "$0.25",
53 *       "weight": 5,
54 *       "sku": "217537123517253",
55 *       "visible": true
56 *     }
57 *   },
58 *   {
59 *     "id": "00000000-0000-03e2-0005-957f699d0688",
60 *     "choices": {
61 *       "Size": "Large",
62 *       "Color": "Red",
63 *       "Pattern": "Houndstooth"
64 *     },
65 *     "variant": {
66 *       "currency": "USD",
67 *       "price": 25,
68 *       "discountedPrice": 25,
69 *       "formattedPrice": "$25.00",
70 *       "formattedDiscountedPrice": "$25.00",
71 *       "pricePerUnit": 0.25,
72 *       "formattedPricePerUnit": "$0.25",
73 *       "weight": 5,
74 *       "sku": "217537123517253",
75 *       "visible": true
76 *     }
77 *   }
78 * ]
79 *
80 */

Get product variants by variant IDs

Copy Code

1/*******************************
2 * Backend code - products.jsw *
3 *******************************/
4
5import wixStoresBackend from 'wix-stores-backend';
6
7export function getProductVariants(productId, options) {
8  return wixStoresBackend.getProductVariants(productId, options);
9}
10
11/********************
12 * Client-side code *
13 ********************/
14import { getProductVariants } from 'backend/products';
15
16let productId = "3fb6a3c8-988b-7895-04bd-5c59ae0b18ea"; // get product ID
17let options = {
18  variantIds: [
19    "00000000-0000-03e1-0005-957f699d0688",
20    "00000000-0000-03e2-0005-957f699d0688"
21  ]
22};
23
24getProductVariants(productId, options)
25  .then((variants) => {
26    let firstVariant = variants[0];
27    let firstPrice = firstVariant.variant.price;
28    let numberOfReturnedVariants = variants.length;
29  })
30  .catch((error) => {
31    console.error(error);
32  })
33
34/* Example of returned variants array:
35 *
36 * [
37 *   {
38 *     "_id": "00000000-0000-03e1-0005-957f699d0688",
39 *     "choices": {
40 *       "Size": "Large",
41 *       "Color": "Red",
42 *       "Pattern": "Paisley"
43 *     },
44 *     "variant": {
45 *       "currency": "USD",
46 *       "price": 25,
47 *       "discountedPrice": 25,
48 *       "formattedPrice": "$25.00",
49 *       "formattedDiscountedPrice": "$25.00",
50 *       "pricePerUnit": 0.25,
51 *       "formattedPricePerUnit": "$0.25",
52 *       "weight": 5,
53 *       "sku": "217537123517253",
54 *       "visible": true
55 *     }
56 *   },
57 *   {
58 *     "id": "00000000-0000-03e2-0005-957f699d0688",
59 *     "choices": {
60 *       "Size": "Large",
61 *       "Color": "Red",
62 *       "Pattern": "Houndstooth"
63 *     },
64 *     "variant": {
65 *       "currency": "USD",
66 *       "price": 25,
67 *       "discountedPrice": 25,
68 *       "formattedPrice": "$25.00",
69 *       "formattedDiscountedPrice": "$25.00",
70 *       "pricePerUnit": 0.25,
71 *       "formattedPricePerUnit": "$0.25",
72 *       "weight": 5,
73 *       "sku": "217537123517253",
74 *       "visible": true
75 *     }
76 *   }
77 * ]
78 *
79 */