How to grab query string whenever it changes

sage
1

I have the following in a Search results Page Header component displaying search query and search results count using FacetWP:

<div class="SearchHero">
  <div class="SearchHero-top-banner bg-striped"></div>
  <div class="SearchHero-main">
    {{-- show search input field in left sidebar once a query has been provided, whether or not there are matching results --}}
    @if(isset($_GET['_search']) && !empty($_GET['_search']))
      <div class="SearchHero-resultsInfo">{!! facetwp_display( 'facet', 'search_results_count' ) !!}</div>
      <p class="SearchHero-searchQuery"><span class="l-wrap l-block-wrap">&ldquo;{{ $_GET['_search'] }}&rdquo;</span></p>
    @else
      @include('partials/search-header')
    @endif
  </div>
</div>

The problem is when a new search is performed, {{ $_GET['_search'] }} does not update since the page doesn’t reload. How can I grab the new query string whenever it changes? Is there a Blade directive or Sage-specific method for retrieving a query param value whenever it’s updated?

2

Found this snippet, can it be used for this?

3

You can use facetwp-loaded to grab the search facet value and update your DOM element.

3 Likes
4

Thanks @mikespainhower we did end up going with facetwp-loaded with the following implementation (for anyone curious):

const searchHero = document.querySelector('.SearchHero');

if (searchHero) {
  const query = searchHero.querySelector('.SearchHero-searchQuery span');

  document.addEventListener('facetwp-loaded', () => {
    const searchParams = new URLSearchParams(window.location.search);
    const newQuery = searchParams.get('_search');
    query.innerHTML = `&ldquo;${newQuery}&rdquo;`;
  });
}
3 Likes