> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./guides/advanced/routing.md).

# Routing

Redirect search and product events to appropriate shop pages.

This guide covers the recommended approach to handle redirects between different pages of an online shop that doesn't use a single-page application on the frontend layer.

### Redirect to the search page

In order to redirect all search events triggered on the homepage or other non-search pages to the product listing page, the following script should be placed above the FactFinder Web Components import tag:

```javascript
document.addEventListener("ffReady", function (event) {
    const factfinder = event.factfinder;
    const eventAggregator = event.eventAggregator;
    eventAggregator.addBeforeDispatchingCallback(function (event) {
        const isSearchEvent = event.type === "search" || event.type === "navigation-search";
        if (isSearchEvent && !isSearchPage()) {
            event.cancel(); // prevents the request from being sent before redirecting
            
            // we don't need these to appear in the redirect URL, they will be populated automatically
            ["channel", "version", "sid", "dispatchId"].forEach(function (param) { 
                delete event[param];
            });

            const dict = factfinder.common.encodeDict(event);
            const params = factfinder.common.dictToParameterString(dict);
            window.location.href = SEARCH_URL + params;
        }
    });
});
```

`SEARCH_URL` variable should contain the search URL **without** `?` and any parameters.

`&& !isSearchPage()` condition is only required if the script is also included in the actual search page to prevent redirect loops. A simple implementation of the `isSearchPage()` function could be:

```javascript
function isSearchPage() {
    return window.location.href.indexOf(SEARCH_URL) !== -1;
}
```

{% hint style="info" %}
Please do not use `search-immediate` on non-search pages, or you will be immediately redirected to the search page.

If for some reason you need to use this parameter on non-search pages, you can prevent being continuously redirected by using the `cancel` method of the event issued this way.

You can check if the event is 'immediate' by checking its property `searchImmediate`.
{% endhint %}

```javascript
document.addEventListener("ffReady", function (event) {
    const eventAggregator = event.eventAggregator;
    eventAggregator.addBeforeDispatchingCallback(function (event) {
        if (event.searchImmediate) {
            event.cancel(); // prevents issuing requests to FactFinder and following redirect
        }
    })
});
```

### `before-search` event

`before-search` event is emitted by `ff-searchbox` whenever `ff-searchbox` issues a request. In its listener, you have the opportunity to respond to only selected search requests, as ASN, paging, sorting etc. will not trigger this event.

For example, if you wish to redirect only searches that are triggered by entering a new query in the searchbox, you could use the following code:

```javascript
ffSearchBoxElem.addEventListener("before-search", function (event) {
    window.location.href = SEARCH_URL + "?query=" + event.detail.query;
});
```

### Redirect to the product details page

Due to tracking purposes, the redirect should happen through the `data-redirect` attribute inside the ff-record component. For the concrete example see the `Redirecting to product page` section of the [Record List documentation](file:///api/4.x/ff-record-list).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./guides/advanced/routing.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.