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.
If you duplicate a dynamic page and change a router prefix, you must also update the hook function.


Data binding router hooks are defined in the routers.js file which can be found in the Code File's Backend section of the Velo Sidebar

The hook functions are named with the following convention:
<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:

export function dishes_beforeRouter(request) {
  // function code

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().


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.


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.


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. 


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.

Did this help?


Hire a Velo Web Developer

Need a little extra help with your site? Hire a developer from the Wix Marketplace to build and deploy advanced web applications.
Get Started