Categorize your store products

Ever heard of facets? You might not have heard of them but I'm sure you've seen them on e-commerce websites. They're those filters on the side that let you know how many items are in each subcategory. You can create them using the Corvid Search API.

Here's what you need to do:

1. Create a store collection for each facet you want to show. For example, you might have Sweaters, T-shirts, and Jackets collections.

2. Add products to each collection. Products can belong to multiple collections.

3. Add 2 repeaters to your page: 1 to display the facets, and 1 to display the filtered products.

4. Add the code below to your page. Don't forget to match your element IDs to the IDs used in the code.

import wixSearch from 'wix-search';
 
$w.onReady(function () {
 
  // Define what happens when the facet repeater's data is set
  $w("#facetRepeater").onItemReady(($item, itemData, index) => {
    $item("#facetText").text = itemData.facetValue;
    $item("#facetNumberText").text = "(" + itemData.count + ")";
 
    // When a facet is clicked, run the functions that display only 
    // the selected products and bold the selected facet text
    $item("facetText").onClick(event => {
      const selectedIndex = index;
      const facet = $item("#facetText").text;
      displaySelectedProducts(facet);
      boldSelectedFacet(selectedIndex);
    });
  });
 
  // Define what happens when the product repeater's data is set
  $w("productRepeater").onItemReady(($item, itemData) => {
    $item("#productTitleText").text = itemData.title;
    $item("#productDescriptionText").text = itemData.description;
    $item("#productImage").src = itemData.image;
  });
 
  // Run a search which applies a facet that categorizes store
  // products according to the collection they belong to
  wixSearch.search()
  .documentType("Stores/Products")
  .facets("collections")
  .find()
  .then((results) => {
 
    // Get the first (and only) facet result
    const facets = results.facets[0].facets;
 
    // Add an ID to each object in the facets 
    // array (required for repeater data)
    const newFacets = facets.map((facet) => {
      facet._id = facet.facetValue;
      return facet;
    });
 
    // Set the facet repeater's data
    $w('#facetRepeater').data = newFacets;
    
    // Set the initial pre-filtered product repeater's data 
    $w('#productRepeater').data = results.documents;
  });
});
 
// Function for bolding the selected facet and unbolding 
// all other facets
function boldSelectedFacet(selectedIndex) {
  $w("#facetRepeater").forEachItem(($item, itemData, index) => {
    let facetText = $item("#facetText").text;
    let facetCount = $item("#facetNumberText").text
 
    // If this is the selected facet text, bold it. You can also 
    // add whatever other formatting or styles you want.     
    if (index === selectedIndex) {
      $item("#facetText").html = `<span style='font-weight:bold'>${facetText}</span>`;
      $item("#facetNumberText").html = `<span style='font-weight:bold'>${facetCount}</span>`;
      
    // If this is not the selected facet text, unbold it.  
    } else {
      $item("#facetText").html = `<span style='font-weight:normal'>${facetText}</span>`;
      $item("#facetNumberText").html = `<span style='font-weight:normal'>${facetCount}</span>`;
    }
  });
}
 
// Function for displaying only products from the collection 
// corresponding to the selected facet
function displaySelectedProducts(facet) {
  wixSearch.search()
  .documentType("Stores/Products")
  .hasSome("collections", [facet])
  .find()
  .then((results) => {
    $w('#productRepeater').data = results.documents;
  });
}