Source code - Fluid Topics - Latest

Conditional Facets in the Search Page

Category
Technical Notes
Audience
public
Version
Latest
  1. Go to the Portal menu and open the Custom JavaScript section.
  2. Copy and paste the following script:

    // Variables
    const PRIMARY_META = "prodname";
    const SECONDARY_META = "vrm_version";
    
    function hideSecondaryMeta() {
      document.querySelector(`.facets-section[data-ft-facet-id="${SECONDARY_META}"]`).style.display = "none";
    }
    
    function showSecondaryMeta() {
      document.querySelector(`.facets-section[data-ft-facet-id="${SECONDARY_META}"]`).style.display = "";
    }
    
    function isPrimaryMetaSelected(facets) {
      for (let fi = 0; fi < facets.length; ++fi) {
        if (facets[fi].key === PRIMARY_META) return true;
      }
      return false;
    }
    
    // When searching, show or hide SECONDARY_META depending on whether PRIMARY_META is selected
    document.addEventListener("ft:analytics:userevents", function (event) {
      let events = event.detail;
      for (let event of events) {
        switch (event.name) {
          case "khub.search":
            let facets = event.parameters.searchQuery.facets;
            if (isPrimaryMetaSelected(facets)) {
              showSecondaryMeta();
            } else {
              hideSecondaryMeta();
            }
        }
      }
    });
    
  3. Replace the values of PRIMARY_META and SECONDARY_META.

    Check the ID of a metadata key in the configuration of facets in the search page, or inspect the search page to retrieve the data-ft-facet-id.

  4. Save.

Once saved, the facet Version (or PRIMARY_META) is not visible in the Search results page. Selecting one of the Product values (or SECONDARY_META) shows the Version facet and its associated values.