CorvidReference

wix-stores

The wix-stores module contains functionality for working with your site's store from client-side code.

To use the Stores API, import wixStores from the wix-stores module:

   import wixStores from 'wix-stores';

Note

Additional Stores related APIs can be found in the CartIcon, ProductPage, and Currencies pages.

Table of Contents

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
MediaItemAn object representing a media item.
PagingOptionsAn object representing paging options.
ProductChoicesAn object representing a product variant's option choices.
ProductOptionAn object representing an option for a store product.
ProductOptionsAn object representing all the available options for a store product, such as "Size" or "Color".
ProductOptionsAvailabilityAn object returned by the getProductOptionsAvailability() function representing the availability of a product.
ProductOptionsAvailabilitySelectedVariantAn object representing the product variant selected using the getProductOptionsAvailability() function.
ProductOptionsChoiceAn object representing an options choice for a store product, such as choice "Small" for the option "Size."
ProductOptionsChoiceMediaAn object representing the choice media.
ProductVariantOptions

An object representing the selection of specific variants of a product. Use only one of choices or variantIds.

VariantInfoAn object containing variant information to use when creating or updating variants.
VariantItemAn object representing a product variant item.
VariantsAn object representing product variants.

Related Content

getProductOptionsAvailability( )

Gets the availability of a product based on the specified option choices.

Description

The getProductOptionsAvailability() function returns a Promise that is resolved to a ProductOptionsAvailability object when the product's availability information about the product is retrieved.

The information returned in the selectedVariant and availableForPurchase properties reflects the option choices passed in using the ProductChoices parameter.

If the specified choices result in the selection of a single product variant, that variant is returned in the selectedVariant property and the availableForPurchase property indicates whether that product variant is available for purchase.

If the specified choices do not result in the selection of a single product variant, no variant is returned in the selectedVariant property and the availableForPurchase property will be false.

See Also

addToCart( ), getProduct()

Syntax

function getProductOptionsAvailability(productId: string, choices: ProductChoices): Promise<ProductOptionsAvailability>
PARAMETERS
?
Values that you pass to a function.
productId
string
The ID of the product whose availability is being checked.
choices
Option choices to use when checking the product's availability.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Fulfilled - The availability information of the product.

Examples

Get a product's availability information

This example gets a product's availability information using an option choice. The product contains more than one option, so no variant is selected and the product with the specified choices is not available for purchase.

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let choices = {
  "Size": "Large"
};

wixStores.getProductOptionsAvailability(productId, choices)
  .then( (availability) => {
      let available = availability.availableForPurchase;  // false
      let options = availability.productOptions;          // see below
      let mainMedia = availability.mainMedia;
      let mediaItems = availability.mediaItems;
      let selectedVariant = availability.selectedVariant; // null
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * options:
 *
 * "Size":{
 *   "optionType":"drop_down",
 *   "name":"Size",
 *   "choices":[
 *     {
 *       "value":"Small",
 *       "description":"Small",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"Large",
 *       "description":"Large",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * },
 * "Color":{
 *   "optionType":"color",
 *   "name":"Color",
 *   "choices":[
 *     {
 *       "value":"rgb(0, 128, 0)",
 *       "description":"green",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"rgb(255, 0, 0)",
 *       "description":"red",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * }
 */

Get a product's availability information

This example gets a product's availability information using multiple option choices. Since all the product's options have a corresponding choice, a variant is selected.

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let choices = {
  "Size": "Large",
  "Color": "Red"
};

wixStores.getProductOptionsAvailability(productId, choices)
  .then( (availability) => {
      let available = availability.availableForPurchase;  // true
      let options = availability.productOptions;          // see below
      let mainMedia = availability.mainMedia;
      let mediaItems = availability.mediaItems;
      let selectedVariant = availability.selectedVariant; // see below
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * options:
 *
 * "Size":{
 *   "optionType":"drop_down",
 *   "name":"Size",
 *   "choices":[
 *     {
 *       "value":"Small",
 *       "description":"Small",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"Large",
 *       "description":"Large",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * },
 * "Color":{
 *   "optionType":"color",
 *   "name":"Color",
 *   "choices":[
 *     {
 *       "value":"rgb(0, 128, 0)",
 *       "description":"green",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"rgb(255, 0, 0)",
 *       "description":"red",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * }
 *
 *
 * selectedVariant:
 *
 * "selectedVariant":{
 *   "sku":"366615376135191",
 *   "currency":"USD",
 *   "price":7.5,
 *   "discountedPrice":7.5,
 *   "formattedPrice":"$7.50",
 *   "formattedDiscountedPrice":"$7.50",
 *   "visible":true,
 *   "inStock":true,
 *   "weight":0
 * }
 */

getProductVariants( )

Gets a product's available variants based on the specified option choices.

Description

The getProductVariants() function returns a Promise that is resolved to a Variants object when the product variants with the specified choices or variant IDs are retrieved.

Syntax

function getProductVariants(productId: string, options: ProductVariantOptions): Promise<Variants>
PARAMETERS
?
Values that you pass to a function.
productId
string
The ID of the product whose variants are being retrieved.
options
Option to use when checking the product's variants.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Variants>
Fulfilled - The variants with the specified choices.

Examples

Get product variants by specified choices

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large",
    "Color": "Red"
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */

Get product variants by variant IDs

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "variantIds": [
    "00000000-0000-03e1-0005-957f699d0688",
    "00000000-0000-03e2-0005-957f699d0688"
  ]
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */

Get product variants using paging options

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large"
  },
  "paging": {
    "limit": 2,
    "skip": 2 
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Blue",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 6
 * }
 */

MediaItem

An object representing a media item.

Description

The src property of a MediaItem can be an image or video from the Media Manager.

The image source format for Media Manager images is: wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]

The video source format is: wix:video://v1/<video_uri>/<filename>#posterUri=<poster_uri>&posterWidth=<width>&posterHeight=<height>

Syntax

type MediaItem = {
  id: string
  title: string
  description: string
  type: string
  src: string
  thumbnail: string
}
MEMBERS
?
The properties of an object.
id
string
Media item ID.
title
string
Media item title.
description
string
Media item description.
type
string
Media items type. Can be "image" or "video."
src
string
Media item URL.
thumbnail(Optional)
string
Thumbnail URL for videos only.

PagingOptions

An object representing paging options.

See Also

getProductVariants()

Syntax

type PagingOptions = {
  limit: number
  skip: number
}
MEMBERS
?
The properties of an object.
limit
number
Maximum number of variants to retrieve. Defaults to 300.
skip
number
Number of variants to skip before the retrieved variants. Defaults to 0.

Examples

Get product variants using paging options

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large"
  },
  "paging": {
    "limit": 2,
    "skip": 2 
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Blue",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 6
 * }
 */

ProductChoices

An object representing a product variant's option choices.

See Also

getProductVariants()

Syntax

type ProductChoices = {
  optionKey: string
}
MEMBERS
?
The properties of an object.
optionKey
string

Value of the choice. This key name is dependent on the product option. For example, if a product has a size option, this key value will be something like "Size" and its value will be something like "Large".

optionKey is not case-sensitive. Therefore the values for the option keys "Size", "SIZE", and "size" are combined.

Examples

Get product variants by specified choices

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large",
    "Color": "Red"
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */

ProductOption

An object representing an option for a store product.

See Also

getProduct( ), ProductOptions

Syntax

type ProductOption = {
  optionType: string
  name: string
  choices: Array<ProductOptionsChoice>
}
MEMBERS
?
The properties of an object.
optionType
string
Option type. Either "color" or "drop_down".
name
string
Option name.
choices
Option choices.

ProductOptions

An object representing all the available options for a store product, such as "Size" or "Color".

Description

An option cannot be changed if it has choices and variants. To change an option, reset its variants with resetVariantData(). For each option, you can define a maximum of six choices.

See Also

getProduct(), Product

Syntax

type ProductOptions = {
  optionKey: ProductOption
}
MEMBERS
?
The properties of an object.
optionKey

Name of the option. This key name  is dependent on the options added to the product. For example, if a product has a size  option, this key will be something like "Size".

optionKey is not case-sensitive. Therefore the values for the option keys "Size", "SIZE", and "size" are combined.

ProductOptionsAvailability

An object returned by the getProductOptionsAvailability() function representing the availability of a product.

See Also

getProductOptionsAvailability( )

Syntax

type ProductOptionsAvailability = {
  availableForPurchase: boolean
  productOptions: ProductOptions
  mainMedia: string
  mediaItems: MediaItem
  selectedVariant: ProductOptionsAvailabilitySelectedVariant
}
MEMBERS
?
The properties of an object.
availableForPurchase
boolean
Whether the product with the specified option choices is available for purchase.
productOptions
An object representing all the available options for a store product.
mainMedia
string
Main product media item (image or video) URL.
mediaItems
List of product media items.
selectedVariant
The variant of the product selected using the specified option choices if there is one.

Examples

Get a product's availability information

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let choices = {
  "Size": "Large"
};

wixStores.getProductOptionsAvailability(productId, choices)
  .then( (availability) => {
      let available = availability.availableForPurchase;  // false
      let options = availability.productOptions;          // see below
      let mainMedia = availability.mainMedia;
      let mediaItems = availability.mediaItems;
      let selectedVariant = availability.selectedVariant; // null
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * options:
 *
 * "Size":{
 *   "optionType":"drop_down",
 *   "name":"Size",
 *   "choices":[
 *     {
 *       "value":"Small",
 *       "description":"Small",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"Large",
 *       "description":"Large",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * },
 * "Color":{
 *   "optionType":"color",
 *   "name":"Color",
 *   "choices":[
 *     {
 *       "value":"rgb(0, 128, 0)",
 *       "description":"green",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"rgb(255, 0, 0)",
 *       "description":"red",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * }
 */

ProductOptionsAvailabilitySelectedVariant

An object representing the product variant selected using the getProductOptionsAvailability() function.

See Also

getProductOptionsAvailability( ), ProductOptionsAvailability( )

Syntax

type ProductOptionsAvailabilitySelectedVariant = {
  sku: string
  currency: string
  price: number
  discountedPrice: number
  formattedPrice: string
  formattedDiscountedPrice: string
  visible: boolean
  inStock: boolean
  weight: number
}
MEMBERS
?
The properties of an object.
sku
string
Product variant stock keeping unit value.
currency
string
Product variant currency.
price
number
Product variant price. The variant price must be greater than its discount.
discountedPrice
number
Discounted product variant price.
formattedPrice
string
Product variant price formatted with the currency.
formattedDiscountedPrice
string
Discounted product variant price formatted with the currency.
visible
boolean
Whether the product variant is shown in the store.
inStock
boolean
Whether the product variant is in stock.
weight
number
Product variant weight.

Examples

Get a product's availability information

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let choices = {
  "Size": "Large",
  "Color": "Red"
};

wixStores.getProductOptionsAvailability(productId, choices)
  .then( (availability) => {
      let available = availability.availableForPurchase;  // true
      let options = availability.productOptions;          // see below
      let mainMedia = availability.mainMedia;
      let mediaItems = availability.mediaItems;
      let selectedVariant = availability.selectedVariant; // see below
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * options:
 *
 * "Size":{
 *   "optionType":"drop_down",
 *   "name":"Size",
 *   "choices":[
 *     {
 *       "value":"Small",
 *       "description":"Small",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"Large",
 *       "description":"Large",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * },
 * "Color":{
 *   "optionType":"color",
 *   "name":"Color",
 *   "choices":[
 *     {
 *       "value":"rgb(0, 128, 0)",
 *       "description":"green",
 *       "inStock":true,
 *       "visible":true
 *     },
 *     {
 *       "value":"rgb(255, 0, 0)",
 *       "description":"red",
 *       "inStock":true,
 *       "visible":true
 *     }
 *   ]
 * }
 *
 *
 * selectedVariant:
 *
 * "selectedVariant":{
 *   "sku":"366615376135191",
 *   "currency":"USD",
 *   "price":7.5,
 *   "discountedPrice":7.5,
 *   "formattedPrice":"$7.50",
 *   "formattedDiscountedPrice":"$7.50",
 *   "visible":true,
 *   "inStock":true,
 *   "weight":0
 * }
 */

ProductOptionsChoice

An object representing an options choice for a store product, such as choice "Small" for the option "Size."

Description

You can define between one and thirty choices for each option.

See Also

getProduct(), ProductOption

Syntax

type ProductOptionsChoice = {
  value: number
  description: number
  media: ProductOptionsChoiceMedia
  inStock: boolean
  visible: boolean
}
MEMBERS
?
The properties of an object.
value
number
Choice value.
description
number
Choice description.
media
inStock
boolean
Whether the product with this choice is in stock.
visible
boolean
Whether the product with this option is visible.

ProductOptionsChoiceMedia

An object representing the choice media.

See Also

getProduct(), ProductOptionsChoice

Syntax

type ProductOptionsChoiceMedia = {
  mainMedia: string
  mediaItems: MediaItem
}
MEMBERS
?
The properties of an object.
mainMedia
string
Main choice media item (image or video thumbnail) URL.
mediaItems
List of choice media items.

ProductVariantOptions

An object representing the selection of specific variants of a product. Use only one of choices or variantIds.

See Also

getProductVariants()

Syntax

type ProductVariantOptions = {
  choices: ProductChoices
  variantIds: Array<string>
  paging: PagingOptions
}
MEMBERS
?
The properties of an object.
choices
The choices the retrieved variants will have.
variantIds
Array<string>
IDs of variants to retrieve.
paging
Paging options.

Examples

Get product variants using paging options

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large"
  },
  "paging": {
    "limit": 2,
    "skip": 2 
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Blue",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 6
 * }
 */

Get product variants by variant IDs

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "variantIds": [
    "00000000-0000-03e1-0005-957f699d0688",
    "00000000-0000-03e2-0005-957f699d0688"
  ]
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */

VariantInfo

An object containing variant information to use when creating or updating variants.

See Also

getProductVariants()

Syntax

type VariantInfo = {
  currency: string
  price: number
  discountedPrice: number
  formattedPrice: string
  formattedDiscountedPrice: string
  weight: number
  sku: string
  visible: boolean
}
MEMBERS
?
The properties of an object.
currency
string
Variant currency.
price
number
Variant price. The variant price must be greater than its discount. If the variant price has been updated, changes to the product price do not affect the variant price.
discountedPrice
number
Discounted variant price.
formattedPrice
string
Variant price formatted with the currency.
formattedDiscountedPrice
string
Discounted variant price formatted with the currency.
weight
number
Variant weight.
sku
string
Variant stock keeping unit value.
visible
boolean
Whether the variant is visible in the store.

Examples

Get product variants by specified choices

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large",
    "Color": "Red"
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */

VariantItem

An object representing a product variant item.

See Also

getProductVariants()

Syntax

type VariantItem = {
  _id: string
  choices: ProductChoices
  variant: VariantInfo
}
MEMBERS
?
The properties of an object.
_id
string
Unique variant ID.
choices
The choices of the retrieved variant.
variant
Variant information.

Examples

Get product variants by specified choices

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large",
    "Color": "Red"
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */

Variants

An object representing product variants.

See Also

getProductVariants()

Syntax

type Variants = {
  items: Array<VariantItem>
  length: number
  totalCount: number
}
MEMBERS
?
The properties of an object.
items
List of variant items that match the specified choices or variant IDs.
length
number
Number of items in the current results page.
totalCount
number
Total number of variants with the specified choices.

Examples

Get product variants by specified choices

import wixStores from 'wix-stores';

// ...

let productId = // get product ID
let options = {
  "choices": {
    "Size": "Large",
    "Color": "Red"
  }
};

wixStores.getProductVariants(productId, options)
  .then( (variants) => {
    let firstVariant = variants.items[0];
    let firstPrice = firstVariant.variant.price;
    let length = variants.length;
    let totalCount = variants.totalCount;
  } )
  .catch( (error) => {
    console.log(error);
  } );

/*
 * variants:
 *
 * { 
 *   "items": [ 
 *     { 
 *       "_id": "00000000-0000-03e1-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Paisley"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible": true
 *       }
 *     },
 *     { 
 *       "id": "00000000-0000-03e2-0005-957f699d0688",
 *       "choices": { 
 *         "Size": "Large",
 *         "Color": "Red",
 *         "Pattern": "Houndstooth"
 *       },
 *       "variant": { 
 *         "currency": "USD",
 *         "price": 25,
 *         "discountedPrice": 25,
 *         "formattedPrice": "$25.00",
 *         "formattedDiscountedPrice": "$25.00",
 *         "weight": 5,
 *         "sku":"217537123517253",
 *         "visible":true
 *       }
 *     }
 *   ],
 *   "length": 2,
 *   "totalCount": 2
 * }
 */