Help with searchForFacetValues widget on Shopify

Hi all,

I am a complete beginner at all things tech-related so please bear with me, any and all help is greatly appreciated!

We would like to add the searchForFacetValues and showMore widgets to our search page but I am struggling to understand exactly how to do it.

I more or less understand the demo code (below for reference) but I do not know how to determine my container name, header etc which all seem related.

  search.addWidget(
    instantsearch.widgets.refinementList({
      container: '#brand',
      attributeName: 'brand',
      operator: 'or',
      searchForFacetValues: {
        placeholder: 'Search for brands',
        templates: {
          noResults: '<div class="sffv_no-results">No matching brands.</div>',
        },
      },
      templates: {
        header: getHeader('Brand'),
      },
    })
  );

It is for this development store: https://ftt-metafields.myshopify.com/search?q=cell&hPP=12&idx=shopify_products&p=0&type=product&is_v=1
Password: kliage

We would like the user to be able to search for their colleges name within each of those alphabetized filter boxes on the left.

Thanks!

A container is an HTML block where you want your widget to be rendered.
What we expect as a string there is a CSS selector (this is a way to select a specific HTML block).
You’ll find more information about how to get one here:

On your website, the search is currently failing because you’ve been trying a selector that doesn’t match any block on your page.

Error: Container must be `string` or `HTMLElement`. Unable to find [class~="ais-facet-options.Colleges_N"]

Whenever you active a facet as hidden in the Search Options tab of the app, we actually create an empty block that you can use to activate this facet.

If you follow the process above, you’ll find it there:

As you can see, you almost had the right container, you’ll indeed just need to modify it to:

[class~="ais-facet-named_tags.Colleges_N"]

I’m a bit unsure why you’re using different Colleges named tags though. Is that one per starting letter? If you’re using searchForFacetValues, you will probably not need this split.

For the header, you can simply use a string there: 'Colleges' should work just fine.

Hi!

Thank you so much for your help. I knew that I was looking for a CSS selector but I just couldn’t seem to find it. Now that you’ve pointed it out it seems obvious - thank you!

I did as you suggested for Colleges U and I don’t get anymore issues popping up in my console but nothing appears on the page. It makes sense that it wouldn’t since I changed those facets to hidden in the admin but everything I’ve read about these widgets so far would suggest that this is the right configuration?

I’m sorry for not getting back to you before, I completely missed multiple messages here!
Have you been able to resolve your issue?
When you say “nothing appears”, do you thing no search at all, or simply no colleges starting with U?