Category suggestion navigation

Tweakwise does not store category metadata, like URLs. Only the name, a unique ID, and the relationship to other categories are stored. This is because routing is a frontend matter and exports usually do not have access to this kind of data.

To be able to navigate to the selected category, when selecting a category suggestion, the category handle function should be implemented.

Note: if this handle is not implemented, the category suggestions will not be displayed.

Popular ways to determine the URL to a category page are:

• using an endpoint
• using a dictionary or mapping

Using an endpoint

/* 
  Handle category suggestion click.
  navigationlink contains category context, that can be used to fetch the category
*/
function handleCategorySuggestion(suggestion){
  if(!suggestion) return false;
  if(!suggestion.navigationLink) return false;
  if(!suggestion.navigationLink.context) return false;
  if(!suggestion.navigationLink.context.category) return false;
  
  const categoryContext = suggestion.navigationLink.context.category;
  
  // because a category can have multiple parents, we always use category paths
  // in this case, only the last id in the path is relevant
  const path = categoryContext.path.split('-');
  const id = path[path.length - 1];

  // fetch the associated category from an endpoint in your platform
  const url = fetch('/api/categories/'+id).then((response) => response.json())
    .then(function(result){

      if(result && result.url){
        // redirect to category page
        location.href = result.url;
      } else {
        // fallback to search page
        location.href = '/search/#twn|?tn_q=' + data.match;
      }

    });
  
}

window.addEventListener("twn.suggestions.ready", function () {
  window.tweakwiseSuggestions({
    input: "#tweakwise-input",
    // ...
    categories: {
      handle(event) {
        handleCategorySuggestion(event.data);
      }
    },
  });
})

Using a dictionary or mapping

// generate a category mapping in your platform
const categories_dict = {
  '1001': '/clothing',
  '1004': '/clothing/sweaters-hoodies',
  '1005': '/clothing/shirts',
  '1006': '/clothing/dresses',
  '1007': '/clothing/blouses',
  '1002': '/accessories',
}

/* 
  Handle category suggestion click.
  navigationlink contains category context, that can be mapped to the categoryid + url dict
*/
function handleCategorySuggestion(suggestion){
  if(!suggestion) return false;
  if(!suggestion.navigationLink) return false;
  if(!suggestion.navigationLink.context) return false;
  if(!suggestion.navigationLink.context.category) return false;
  
  const categoryContext = suggestion.navigationLink.context.category;
  
  // because a category can have multiple parents, we always use category paths
  // in this case, only the last id in the path is relevant
  const path = categoryContext.path.split('-');
  const id = path[path.length - 1];

  // fetch the associated category from the mapping
  if(id in categories_dict){
    return categories_dict[id];
  }
  
  return false;
}

window.addEventListener("twn.suggestions.ready", function () {
  window.tweakwiseSuggestions({
    input: "#tweakwise-input",
    // ...
    categories: {
      handle(event) {
        // find the category url
        const url = handleCategorySuggestion(event.data);
        
        if(url){
          location.href = url;
        } else {
          // fallback to search
          location.href = '/search/#twn|?tn_q=' + data.match;
        }
      }
    },
  });
})