ProductFetcher API

API used to fetch products, product variants and product related information from the store.

classDiagram
direction LR
    ProductFetcherAPI --> getProduct
    ProductFetcherAPI --> getProducts
    ProductFetcherAPI --> getProductVariant
    ProductFetcherAPI --> getProductVariantStockOptionValues
    ProductFetcherAPI --> getProductsFromCategory

    class ProductFetcherAPI {
        getProduct(productId: number) Promise~Product|null~
        getProducts(productsId: number[], options?: TGetProductsOptions) Promise<TWebapiList<Product>|null>
        getProductVariant(productId: number, options: TProductVariantOptions) Promise~ProductStock|null~
        getProductVariantStockOptionValues(productId: number, selectedOptionsValuesSoFar: string[]) Promise~string[]~
        getProductsFromCategory(productId: number, options?: TGetProductsOptions) Promise<TWebapiList<Product>|null>
    }

    link getProduct "../methods/get-product/"
    link getProducts "../methods/get-products/"
    link getProductVariant "../methods/get-product-variant/"
    link getProductVariantStockOptionValues "../methods/get-product-variant-stock-option-values/"
    link getProductsFromCategory "../methods/get-products-from-category/"

Get API

To get the ProductFetcher API use its name ProductFetcherApi with the getApi method.

This API is initialized asynchronously which means that if you use the getApiSync method to get it, it might not exist yet and you will get an error as a result.

useStorefront(async ({ getApi }) => {
    const productFetcherApi = await getApi('ProductFetcherApi');
});

This API is not automatically initialized. Unless you initialize it by hand, you won't be able to fetch the API. To do it you can use the registerDynamic method from the Feature System API. Here is an example on how to do it:

useStorefront(async (storefront) => {
    const featureSystemApi = this.getApiSync('FeatureSystemApi');
    await featureSystemApi.registerDynamic('ProductFetcher');

    const productFetcherApi = await storefront.getApi('ProductFetcherApi');
});

Methods

• getProduct - returns a single product by its id.
• getProducts - returns a list of products by their ids.
• getProductVariant - returns a single product variant by its id and selected options.
• getProductVariantStockOptionValues - returns a list of available stock option values for a product variant.
• getProductsFromCategory - returns a list of products from a category.

Example

Get product with id 1:

useStorefront(async ({ getApi }) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = this.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const product = await productFetcherApi.getProduct(1);
});

Example

Get products with id 10 and 12:

useStorefront(async ({ getApi }) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = this.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const products = await productFetcherApi.getProducts([10, 12]);
});