Categorize your store products

Show and tell
, ,
1

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 .

929×547 229 KB

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;
  });
}
1 Like