facets( )

Categorizes search results according to the specified facets.

Description

The facets() function allows you to categorize search results according to one or more specified fields.

For example, if you have a sports equipment store with products divided into collections of Basketball, Football, and Baseball equipment, you can apply collections as a facet to your search and get information about how many documents in the search results are included in each collection.

If you chained a facets() function to your search, your WixSearchResult will include an array of facet results.

Faceting is a useful tool for presenting categorization data to site visitors and allowing them to narrow down and navigate search results. Visitors can select one or more facets, and you can apply corresponding filters to your search results.

Facet Example

By default, facets() is set to none.

You cannot apply facets to your search if the documentType is set to "Site/Pages".

Only some fields can be used for faceting. You can check which fields are facetable in the schema for each documentType.

Syntax

function facets(facets: ...string): WixSearchBuilder

facets Parameters

NAME

TYPE

DESCRIPTION

facets

string

The fields to use as facets.

Returns

A WixSearchBuilder object representing the refined search.

Return Type:

WixSearchBuilder

Was this helpful?

Add a single facet to a search

Copy Code

1let newSearch = search
2  .documentType("Stores/Products")
3  .facets("inStock");

Add multiple facets to a search

Copy Code

1let newSearch = search
2  .documentType("Forum/Content")
3  .facets("likeCount", "viewCount");

Create a search, add facets to it, and run it

Copy Code

1import wixSearch from 'wix-search';
2
3// ...
4
5wixSearch.search()
6  .documentType("Stores/Products")
7  .facets("collections", "inStock")
8  .find()
9  .then( (results) => {
10    const facets = results.facets;
11  })
12  .catch( (error) => {
13    console.log(error);
14  });
15
16 /* Example facets array
17  * 
18  * [
19  *   {
20  *     "facet": "collections",
21  *     "facets":
22  *       [
23  *         {
24  *           "facetValue": "Winter",
25  *           "count": 29
26  *         },
27  *         {
28  *           "facetValue": "Spring",
29  *           "count": 17
30  *         },
31  *         {
32  *           "facetValue": "Summer",
33  *           "count": 36
34  *         }
35  *       ]
36  *   },
37  *   {
38  *     "facet": "inStock",
39  *     "facets":
40  *       [
41  *         {
42  *           "facetValue": "true",
43  *           "count": 67
44  *         },
45  *         {
46  *           "facetValue": "false",
47  *           "count": 15
48  *         }
49  *       ]
50  *   }
51  * ]
52  * 
53  */

Filter search results according to selected facets

This example demonstrates how to display facet information for store products and let site visitors filter the products by selecting a facet. We use 2 repeaters, 1 to display the facet info and 1 for the products. We apply the collections field as a facet to our search. Each facet value and number is loaded into the facet repeater. When a site visitor selects a facet, the products are filtered according to the selected collection.

Copy Code

1import wixSearch from 'wix-search';
2
3$w.onReady(function () {
4
5  // Define what happens when the facet repeater's data is set
6  $w("#facetRepeater").onItemReady(($item, itemData) => {
7    $item("#facetText").text = itemData.facetValue;
8    $item("#facetNumberText").text = "(" + itemData.count + ")";
9
10    // When a facet is selected, run the function
11    // that displays only the selected products
12    $item("facetText").onClick(event => {
13      const facet = $item("#facetText").text;
14      displaySelectedProducts(facet);
15    });
16  });
17
18  // Define what happens when the product repeater's data is set
19  $w("productRepeater").onItemReady(($item, itemData) => {
20    $item("#productTitleText").text = itemData.title;
21    $item("#productDescriptionText").text = itemData.description;
22    $item("#productImage").src = itemData.image;
23  });
24  
25  // Run a search which applies a facet that categorizes store
26  // products according to the collection they belong to
27  wixSearch.search()
28  .documentType("Stores/Products")
29  .facets("collections")
30  .find()
31  .then((results) => {
32
33      // Get the first (and only) facet result
34      const facets = results.facets[0].facets;
35
36      // Add an ID to each object in the facets 
37      // array (required for repeater data)
38      const newFacets = facets.map((facet) => {
39        facet._id = facet.facetValue;
40        return facet;
41      });
42      
43      // Set the facet repeater's data
44      $w('#facetRepeater').data = newFacets;
45      // Set the initial pre-filtered product repeater's data 
46      $w('#productRepeater').data = results.documents;
47    });
48});
49
50// Display only products from the collection 
51// corresponding to the selected facet
52export function displaySelectedProducts(facet) {
53  wixSearch.search()
54  .documentType("Stores/Products")
55  .hasSome("collections", [facet])
56  .find()
57  .then((results) => {
58    $w('#productRepeater').data = results.documents;
59  });
60}