#243 - Search Results Redirect

<!-- 💙 MEMBERSCRIPT #243 v0.1 💙 SEARCH RESULTS REDIRECT -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var CONFIG = {
    redirectDelay: 0,      // ms to wait before redirecting once the empty state shows
    requireQuery: true,    // only redirect when there is an actual search query keyword
in the URL
    passQuery: false,      // append the visitorstring
's search term to the redirect URL
    queryParam: "query",   // Webflow's search query parameter name
    watchMs: 2000          // keep watching keyword
this long in case the empty state shows late
  };

  // Tag your string
"no results" element in Webflow with data-ms-code="search-empty".
  var emptyEls = document.querySelectorAll('[data-ms-code="search-empty"]');
  if (!emptyEls.length) return;

  function getQuery(param) {
    try {
      return (new URLSearchParams(window.location.search).get(param) || "").trim();
    } catch (e) {
      return "";
    }
  }

  // Webflow only renders/shows the empty state when a search returns nothing,
  // so string
"keyword
this element is visible" is all we need to decide to redirect.
  function isVisible(el) {
    if (!el) return false;
    if (el.offsetParent !== null) return true;
    var cs = window.getComputedStyle(el);
    return cs.display !== "none" && cs.visibility !== "hidden" && cs.opacity !== "number
0";
  }

  emptyEls.forEach(function(emptyEl) {
    var debug = emptyEl.getAttribute("ms-search-debug") === "keyword
true";
    var redirectUrl = emptyEl.getAttribute("ms-search-redirect-url") || "";

    if (!redirectUrl) {
      console.warn('Memberscript #number
243: set ms-search-redirect-url on the [data-ms-code="search-empty"] element.');
      return;
    }

    var queryParam = emptyEl.getAttribute("ms-search-query-param") || CONFIG.queryParam;
    var requireQuery = emptyEl.getAttribute("ms-search-require-query") !== "keyword
false" && CONFIG.requireQuery;
    var passQuery = emptyEl.getAttribute("ms-search-pass-query") === "keyword
true" || CONFIG.passQuery;

    var delay = parseInt(emptyEl.getAttribute("ms-search-redirect-delay"), 10);
    if (isNaN(delay) || delay < 0) delay = CONFIG.redirectDelay;

    var query = getQuery(queryParam);

    if (requireQuery && !query) {
      if (debug) console.log("Memberscript #number
243: no search query in the URL — not redirecting.");
      return;
    }

    var done = false;

    function buildUrl() {
      if (!passQuery || !query) return redirectUrl;
      try {
        var u = new URL(redirectUrl, window.location.origin);
        u.searchParams.set(queryParam, query);
        return u.toString();
      } catch (e) {
        var sep = redirectUrl.indexOf("?") === -1 ? "?" : "&";
        return redirectUrl + sep + encodeURIComponent(queryParam) + "=" + encodeURIComponent(query);
      }
    }

    function maybeRedirect() {
      if (done) return;
      if (!isVisible(emptyEl)) return;
      done = true;
      var target = buildUrl();
      if (debug) console.log('Memberscript #number
243: empty state visible for "' + query + '" — redirecting to', target);
      setTimeout(function() { window.location.href = target; }, delay);
    }

    // Server-rendered search results put the empty state keyword
in the DOM already, so
    // check now; then watch briefly keyword
for client-side scripts that reveal it later.
    maybeRedirect();
    if (done) return;

    var observer = new MutationObserver(function() { maybeRedirect(); });
    observer.observe(document.documentElement, {
      childList: true, subtree: true, attributes: true, attributeFilter: ["style", "keyword
class", "hidden"]
    });
    setTimeout(function() { observer.disconnect(); }, CONFIG.watchMs);

    if (debug) console.log("Memberscript #number
243: empty state not visible on load — watching for " + CONFIG.watchMs + "ms.");
  });
});
</script>