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

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.

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