The Vue Storefront Essentials Course is now available! Learn More
Products

Products

Introduction

This section will cover the basics of products and how to fetch them. We will also cover how to fetch the product's variants and options.

API Reference

You can find all available BigCommerce module methods and their description in the API Reference.

Fetching products

To fetch the products data, you can use the getProducts method.

Fetching products by their id is the most common use case. To fetch a single product, you can pass the product's id as the id parameter.

import { sdk } from '~/sdk.config.ts';

const product = await sdk.bigcommerce.getProducts({ id: 1992695 });

Fetching multiple products by their ids can be done by passing the id:in parameter.

import { sdk } from '~/sdk.config.ts';

const products = await sdk.bigcommerce.getProducts({ ['id:in']: [1992695, 1992696, 1992697] });

You can specify the fields you want to receive in the response by passing them as the include_fields in a comma-separated list. The ID and the specified fields will be returned.

import { sdk } from '~/sdk.config.ts';

const product = await sdk.bigcommerce.getProducts({
  id: 1992695,
  include_fields: 'name,price'
});

You can specify the fields you want to exclude in the response by passing them as the excluded_fields in a comma-separated list. The specified fields will be excluded from a response. The ID cannot be excluded.

import { sdk } from '~/sdk.config.ts';

const product = await sdk.bigcommerce.getProducts({
  id: 1992695,
  excluded_fields: 'upc,condition'
});

Pagination

You can use the limit and page parameters to paginate the results.

import { sdk } from '~/sdk.config.ts';

const products = await sdk.bigcommerce.getProducts({
  page: 2,
  limit: 15
});

Filtering

You can use the getProductsWithFilter method.

import { sdk } from '~/sdk.config.ts';

const filteredProducts = await sdk.bigcommerce.getProductsWithFilter({ filters: { categoryEntityId: 31   } })

Sorting

You can use the sort parameter to sort the results. More information about the sort options can be found here

import { sdk } from '~/sdk.config.ts';

const filteredProducts = await sdk.bigcommerce.getProductsWithFilter({ 
  filters: { 
    categoryEntityId: 31
  },
  sort: 'NEWEST'
})

You can use the searchTerm parameter in the getProductsWithFilter method. The searchTerm parameter accepts a string with the search term.

import { sdk } from '~/sdk.config.ts';

const products = await sdk.bigcommerce.getProductsWithFilter({
  filters: {
    searchTerm: 'cup'
  }
})

getProductById GraphQL Method

To fetch a single products' data, you can use the getProductById method. This method uses BigCommerce GraphQL endpoint and will retrieve the product data including configurations and variants in a single call.

import { sdk } from '~/sdk.config.ts';

const product = await sdk.bigcommerce.getProductById({ entityId: 77 });

getProductsById GraphQL Method

The getProductsById method is similar to the getProductById, but with a support to receive data for multiple products in a single request. This endpoint uses GraphQL and will be able to retrieve the products' data including configurations and variants in a single call.

import { sdk } from '~/sdk.config.ts';

const products = await sdk.bigcommerce.getProductsById({ ids: ['77', '75'] });