Example Description
Routers allow you to take control in handling certain incoming requests to your site. Each router defines a URL prefix. All incoming requests to URLs with that prefix pass through router code to determine which page the request will be routed to and what data will be sent to that page.
In this example, we demonstrate how to create a router that reads data from a collection. Depending on the URL used to reach the router, it then passes that data to an index page to display all the items in the collection, or to an individual item page to display detailed information about a specific item.
For demonstration purposes, we created our router pages to mimic dynamic pages we also added to the site. You can reach the router index page from the menu and the router item pages by following links on the index page.
How We Built It
Router Code
The router code can be found in the routers.js file in the backend. The router is built using two functions.
The first function, `helloworld_Router`, handles all requests to the `helloworld` prefix. It begins by reading a value from the request path using the `getRouterData()` function. If there is no value, the router retrieves all the items from the Greetings collection and sends the visitor to the index-page with the greetings data. If there is a value, the router retrieves the corresponding item from the Greetings collection and sends the visitor to the item-page with the greeting data.
The second function, `helloworld_SiteMap`, builds a sitemap for the `helloworld` prefix. It begins by retrieving the items from the Greetings collection, then builds a sitemap entry for each item. It also builds one more sitemap entry for the index page.
Index Page Elements
On the index-page we added a repeater with 2 text elements and a button in each item. The text elements display data from the Greetings collection and the button takes site visitors to the relevant item page.
Index Page Code
On the index-page we begin by retrieving the data sent from the router. We use that data to populate the repeater and its elements.
Item Page Elements
On the item-page we added 2 text elements to display data from the Greetings collection.
Item Page Code
On the item-page we begin by retrieving the data sent from the router. We then use that data to populate the text elements.
Related Examples
Did this help?
|
Thanks for your feedback!
Add to Cart Gallery
Let customers to add products to their cart
INTERMEDIATE
Hide and Show Elements
Hide and show elements in response to user interactions
BEGGINER
Hide and Show Elements
Hide and show elements in response to user interactions
BEGGINER