Velo: About Data Hooks for Dynamic Pages

Visit the Velo by Wix website to onboard and continue learning.

When a request comes in for one of your dynamic pages, a router uses the URL of the request to decide which page to show and what data to bind to the page's dataset. You can add a data binding router hook to intercept this process at certain points and insert additional logic. Some hooks can be used with router pages as well.

Note: If you duplicate a dynamic page and change a router prefix, you must also update the hook function.

Router Hooks

After defining a router for your site, you can define data binding router hooks in routers.js located in the Public & Backend section of the Code sidebar (Wix Studio), or the Velo sidebar (Wix Editor).

Note: To define data hooks, you must first create a router and add it your site. See how to create a router in Wix Studio, or in the Wix Editor.

The hook functions are named with the following convention:

Copy
1
<router prefix>_<hook name>()

The router prefix is the first part of the URL you chose when creating your dynamic page. You can find the URL of your dynamic page in the page's settings. 

For example, if you have a page with the URL /dishes/name and you want to create a beforeRouter hook, the function would look like this:

Copy
1
export function dishes_beforeRouter(request) {
2
// function code
3
}

The hooks you can register are listed here in the order they run:

  • beforeRouter
  • customizeQuery
  • afterRouter
  • afterSitemap

To learn more about the hook functions, see the Router API reference.

You can also register data hooks that run code before or after certain interactions with your site's collections. If you’ve done so, the data hooks will run between customizeQuery() and afterRouter().

beforeRouter()

This hook is triggered before the router goes to the requested page. You can use this hook to route requests to a different page or return an error response. For example, you can check who is requesting the page and then decide based on the user's role whether to let the router continue to the next step or to return an error type response code.

customizeQuery()

This hook is triggered before the page's data query is executed. You can use this hook to further refine or change the query that will determine what data is bound to your page's dataset. For example, you can filter the query to only return items that have a status field set to active.

afterRouter()

This hook is triggered after the router has bound the data, but before the page is displayed. You can use this hook to change the router's response based on the data that was retrieved. For example, you can have two versions of a page, one for portrait oriented images and another for landscape oriented ones. After the image is pulled from the database, you can show the page that corresponds to the image's orientation. 

afterSitemap()

This hook is triggered after a sitemap is created. You can use this hook to revise the list of pages in your sitemap. For example, you can add a search page's information to your sitemap.

Was this helpful?
Yes
No