CorvidReference

wix-stores

The wix-stores module contains functionality for working with your site's store from 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 and ProductPage elements.

Table of Contents

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
PagingOptionsAn object representing paging options.
ProductVariantOptions

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

VariantInfoAn object containing variant information.
VariantItemAn object representing a product variants.
VariantListAn 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 StoreProductChoices 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: StoreProductChoices): 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-backend';

// ...

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 VariantList object when the product variants with the specified choices or variant IDs are retrieved.

Syntax

function getProductVariants(productId: string, options: ProductVariantOptions): Promise<VariantList>
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<VariantList>
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
 * }
 */

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
 * }
 */

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.

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.
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 variants.

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. * @snippet [Stores-getProductVariants_choices.es6=Get product variants by 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
 * }
 */

VariantList

An object representing product variants.

See Also

getProductVariants( )

Syntax

type VariantList = {
  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
 * }
 */