CoursesGraphQL Storefront APIModule 5: Site Content and Search

Faceted and Textual Search

Plan: Developer Foundations

 Lesson 17 of 28 · 30 min

Overview

BigCommerce’s GraphQL Storefront API lets merchants on headless storefronts use faceted and textual search powered by results from our back-end search engine. These built-in capabilities also allow Stencil developers to take advantage of our search engine.

Faceted search is a method of helping shoppers navigate a store’s product inventory by categorizing products into various categories, brands, product features, and more.

Textual search is a method of retrieving products based on product fields, for example, product name and description.

Faceted and Textual Search Features

The GraphQL Storefront API’s faceted and textual search lets you create the following features:

  • Load category pages with no selections, including both the facets and products relevant to the search results.
  • Load category pages with facet selections for specific facets.
  • Load featured products from specific categories.
  • Quickly search products by using search terms (textual search).
  • Sort products alphabetically, from newest to oldest and more.

Note

You can query facets, filter by rating, or filter by “in-stock” only if the merchant is on a Pro or Enterprise plan. A merchant must enable product filtering for facets to be returned.

In addition, only facets that a merchant marks as visible in their Product Filtering settings will be returned.

Filter Products and Facets

To use faceted and textual search, specify a filter in the argument for SearchProducts. For faceted search, you can filter by price, rating, among other features and attributes of products. For textual search, use the searchTerm field.

The filters below affect both the products and facets that are returned. For example, filtering by rating returns only products within the specified rating range and only facets that have products within the rating range.

...
  searchProducts(
  filters: {
    searchTerm: "Sample"
    price:{
      minPrice:11,
      maxPrice:200
    },
    rating:{
      minRating:3,
      maxRating:5
    },
    categoryEntityId:24,
    searchSubCategories:false,
    categoryEntityIds:[23],
    brandEntityIds:[35],
    productAttributes:[
      {
        attribute:"Color",
        values:["Black"]
      }
    ],
    isFreeShipping:true,
    isFeatured:true,
    isInStock:true
  }
  ...
) {
...

Get Products

To get products, specify products as a field in searchProducts.

Below is an example request that returns the first two products with a rating between three and five:

query {
  site {
    search {
      searchProducts(
        filters: {
          rating:{
             minRating:3,
             maxRating:5
           }
        }
      ) {
        products(first: 2) {
          edges {
            node {
              entityId
              name
              prices {
                price {
                  value
                }
              }
            }
          }
        }
      }
    }
  }
}

Sort Results

You can sort the products that are returned using the sort field. The sort affects only the list of products returned. The product filtering settings determine how facets are sorted.

Below is an example query that searches for products using a search term and sorts the returned products in alphabetical order:

query {
  site {
    search {
      searchProducts(
        filters: {
          searchTerm: "Sample"
        }
        sort: A_TO_Z
      ) {
        products(first: 2) {
          edges {
            node {
              entityId
              name
              prices {
                price {
                  value
                }
              }
            }
          }
        }
      }
    }
  }
}

For a list of product fields that searchTerm searches, see the Store Search Product Fields article.

Get Facets

To get facets, specify filters as a field in searchProducts.

Below is an example request that returns the specified facets that have products with a rating between three and five:

query {
  site {
    search {
      searchProducts(
        filters: {
           rating:{
             minRating:3,
             maxRating:5
           }
        }
      ) {
         filters {
           edges {
             node {
               __typename
               name
               isCollapsedByDefault
               ... on CategorySearchFilter {
                 name
                 displayProductCount
                 isCollapsedByDefault
                 categories {
                   edges {
                     node {
                       entityId
                       isSelected
                       productCount
                       subCategories {
                         edges {
                           node {
                             entityId
                             name
                           }
                         }
                       }
                     }
                   }
                 }
               }
               ... on OtherSearchFilter {
                 name
                 displayProductCount
                 isCollapsedByDefault
                 freeShipping {
                   isSelected
                   productCount
                 }
                 isInStock {
                   isSelected
                   productCount
                 }
                 isFeatured {
                   isSelected
                   productCount
                 }
               }
             }
           }
         }
      }
    }
  }
}

For a complete list of facets, see the GraphQL Storefront Playground.

Put It All Together: Get Products and Facets

To get both products and facets, specify both products and filters fields in searchProducts.

query {
  site {
    search {
      searchProducts(
        filters: {
          searchTerm: "Sample"
           rating:{
             minRating:3,
             maxRating:5
           }
        }
        sort: A_TO_Z
      ) {
        products(first: 2) {
          edges {
            node {
              entityId
              name
              prices {
                price {
                  value
                }
              }
            }
          }
        }
         filters {
           edges {
             node {
               __typename
               name
               isCollapsedByDefault
               ... on CategorySearchFilter {
                 name
                 displayProductCount
                 isCollapsedByDefault
                 categories {
                   edges {
                     node {
                       entityId
                       isSelected
                       productCount
                       subCategories {
                         edges {
                           node {
                             entityId
                             name
                           }
                         }
                       }
                     }
                   }
                 }
               }
               ... on OtherSearchFilter {
                 name
                 displayProductCount
                 isCollapsedByDefault
                 freeShipping {
                   isSelected
                   productCount
                 }
                 isInStock {
                   isSelected
                   productCount
                 }
                 isFeatured {
                   isSelected
                   productCount
                 }
               }
             }
           }
         }
      }
    }
  }
}

If product filtering has not been enabled, you will receive an empty array for the returned facets, though products will still be returned. To enable product filtering, refer to the KB Article below:

Resources