Skip to main content

turbolinks

sidebar_position: 8

Handling Turbolinks in Instant Search (Autocomplete)

Fast Simon SDK allows handling turbolinks — redirects based on specific queries — in two key scenarios.

In autocomplete results, you can extract and display turbolinks from the response and optionally use them for redirection or display as suggestions.

Here’s a sample setup:

window.FastSimonSDK.instantSearch({
  query: searchTerm,
  callback: (response) => {
    console.log(response);
    displayAutocomplete(response.payload, searchTerm);
  }
});

Within the displayAutocomplete function, you can extract the turbolinks from the response and optionally save the matching URL for later redirection:

let turboLinkUrl = null;

response.turbolinks.forEach(turbolink => {
  const turboLink = document.createElement('a');
  turboLink.href = turbolink.u;
  turboLink.innerText = turbolink.l;
  turboLink.target = '_blank'; // Or handle programmatic redirect

  if (turbolink.l.toLowerCase() === searchTerm.toLowerCase()) {
    turboLinkUrl = turbolink.u;
  }

  // Append to your suggestions UI
  linksContainer.appendChild(turboLink);
});

// Optional redirect logic
if (turboLinkUrl) {
  window.location.href = turboLinkUrl;
}

This allows either showing the turbolinks as clickable results or redirecting when the user enters an exact match.

2. Direct Navigation to Search Page (fullTextSearch)​

When a user navigates directly to the search results page with a query (e.g. ?q=gift card), the SDK may return a turbolink instruction in the response.action.

Here’s how to handle it:

window.FastSimonSDK.fullTextSearch({
  term: term,
  page: this.page,
  productsPerPage: 48,
  narrowBy: this.narrowBy,
  sortBy: this.sortBy,
  onFacetsLoaded: (response) => {
    this.renderFacets(response.payload.facets);
  },
  onProductsLoaded: (response) => {
    if (response.action === 'turbolink' && response.payload.turbolink?.u) {
      // Redirect to the turbolink URL
      window.location.href = response.payload.turbolink.u;
      return;
    }

    this.renderProducts(response.payload.products);

    // Log the search event
    window.FastSimonSDK.event({
      eventName: window.FastSimonEventName.SearchPerformed,
      data: {
        query: term,
        categoryID: category_id,
        narrowBy: this.narrowBy,
        sortBy: this.sortBy,
        products: response.payload.products.map(({ id }) => id).toString(),
        rescount: response.payload.totalResults,
        pagenum: Math.ceil(response.payload.totalResults / 48)
      }
    });
  }
});

Example Response:​

{
  "action": "turbolink",
  "payload": {
    "products": [],
    "query": "gift card",
    "turbolink": {
      "l": "Gift Card",
      "u": "https://www.example.com/products/gift-card",
      "t": ""
    },
    "totalResults": 0
  }
}

If action === "turbolink" is returned, you should perform a redirect to the specified turbolink.u.