Search from homepage using filters and query params (?*=)

Attributes
1

Hi,

I set up a page with filters and it’s working. I also want the user to be able to search from the homepage and I used query params for this. All filters with one field work (e.g. fs-cmsfilter-field=location) but the keyword search filter fs-cmsfilter-field=* won’t work on the homepage. I can’t get * in the query params. This is the site I’m working on.

I tried using code from this thread Show Search Results on CMS Filter Page from a different page but it won’t work for me.

2

Hey @claudine! The snippet you’ve added should go on the target page to dispatch an event on the input field.

Here is the correct code to generate the query based on user input and selection.

<script>
  const userInput = document.getElementById('search-all');
  const industryCategory = document.getElementById('Category');
  const locationCategory = document.getElementById('Location');
  const form = document.getElementById('wf-form-Search-2');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    const searchInput = userInput.value;
    const queryParam = searchInput ? searchInput.replaceAll(' ', '+') : '';
    const industryValue = industryCategory.value
      ? industryCategory.value.replaceAll(' ', '+').replaceAll('&', '%26')
      : '';
    const locationValue = locationCategory.value ? locationCategory.value.replaceAll(' ', '+') : '';

    let url = '/jobs/';

    if (queryParam || industryValue || locationValue) {
      url += '?';
    }

    if (!queryParam && !industryValue && !locationValue) {
      url += 'category=All+Industries&location=All+Locations';
    } else {
      if (queryParam) {
        url += '*=' + queryParam;
      }
      if (industryValue) {
        if (url.endsWith('?')) {
          url += 'category=' + industryValue;
        } else {
          url += '&category=' + industryValue;
        }
      }
      if (locationValue) {
        if (url.endsWith('?')) {
          url += 'location=' + locationValue;
        } else {
          url += '&location=' + locationValue;
        }
      }
    }

    // console.log(url); // For testing
    window.location.href = url; // Uncomment this line to redirect to the constructed URL
  });
</script>

And here is the snippet to dispatch the new event after a user is redirected to the jobs page.


<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');
      document
        .querySelector('[fs-cmsfilter-field="*"]')
        .dispatchEvent(new Event('input', { bubbles: true }));
    },
  ]);
</script>
1 Like
3

That works perfectly. Thank you, Luis!

1 Like