Facets from URL

Search Search UI React
1

Hello Yext community,

I’m currently working on a project that involves utilizing Yext Pages and Search UI. I’ve successfully implemented the logic to extract search parameters from the URL, which works well for query, sorting, pagination, and offset functionalities. However, I’ve encountered an issue when attempting to work with facets.

For instance, take this URL as an example: verticalKey=healthcare_professionals&facets=%7B"address.city"%3A%5B"Shreveport"%5D%2C"gender"%3A%5B"Male"%5D%

Upon parsing the URL, the facets appear as an array. Therefore, I’ve attempted to loop through them using the following JavaScript code:

image

            if (facetsParsed) {
                facetsParsed.forEach((facet) => {
                    searchActions.setFacetOption(
                        facet.fieldId,
                        { matcher: Matcher.Equals, value: facet.value },
                        facet.selected
                    )
                })
            }
            searchActions.executeVerticalQuery()

Unfortunately, this approach doesn’t work, and I haven’t received any error notifications or indications from Yext regarding the issue. Would you happen to have any suggestions or ideas on how to properly handle this?

2

I’ve only recently begun developing with Yext so I’m unsure if this is the proper way of handling this scenario, this is just from my limited experience.

I’ve created similar logic to parse a URL to execute a search and apply any facets found in the URL. When first attempting this, I ran into the following warning in the browser console when trying to use setFacetOption():

image
image910×26 3.51 KB

Since Yext doesn’t know what facets exist before a search occurs, it won’t apply them. You need to execute an initial vertical search before applying the facet options and then execute another vertical search for them to take affect. Here’s some pseudo-code for how I solved this:

  1. Parse URL
  2. Set query and vertical and another other initial search configurations you may have
  3. Execute and await the initial vertical query
    let response = await searchActions.executeVerticalQuery();
  4. if (facetsParsed && response.facets) - apply the facets with setFacetOption()
  5. Execute another vertical query for them to take affect

Hopefully this helps!

1 Like
3

Thks Brett works so beautiful

4

Of course! Glad I could help :blush: