Navigation

The navigation section in the Data Store provides real-time information about the current state of the URL in your web application. This includes the full URL, any parameters present, and previously defined parameters with their current values.

Understanding and utilizing navigation data is essential for controlling application logic dynamically. You can use these values to trigger API requests based on the active page, conditionally show or hide elements, or pass information between different pages.

What information does navigation provide?

The navigation section consists of three main data points:

1. href (n.href)

   • A string containing the full URL of the current page.
   • Updates automatically as you navigate between pages within your website.

2. parameter (n.parameter)

   • An object containing all URL parameters created.
   • Each parameter is stored as a key-value pair, where:
     • The key is the name of the parameter.
     • The value is the current assigned value or null if it is not set.

3. parameter.name (n.parameter.<parameter_name>)

   • A list of all previously defined parameters, each displaying:
     • The name of the parameter.
     • Its current value (updates in real time).
     • If the parameter exists in the URL but is not defined in the Data Store, its value remains null until it is explicitly added.

4. path (n.path)

   • A string containing the path without the base URL.
   • Updates automatically as you navigate between pages within your website.

How navigation works in real time

The navigation data updates instantly as you browse your site within the Wized configurator. This means that:

• If you visit another page, the href value updates automatically.
• If a URL contains parameters, they are reflected immediately in n.parameter.
• If you manually add parameters via the Canvas, they appear in real time in the Data Store.

Note

• For a parameter to be visible in the Data Store, it must exist within Wized.
• Even if a parameter is present in the URL, if it is not explicitly added, its value will be inaccessible.

How to use navigation data

navigation data is a powerful tool for dynamic behavior in your application. Here are some common use cases:

1. Execute requests based on the active page

You can use navigation data to control when a request runs.
For example, you can set up an event to execute a request only when the user is on any dashboard page:

return n.path.includes('/dashboard');

This ensures that the request will not trigger on other pages.

2. Show or hide elements based on URL parameters

With Wized’s reactive system, elements can be conditionally displayed depending on navigation values.

For example, you can configure an element to be visible only if a specific parameter is present, such as showing a discount banner only when the "promo" parameter exists:

• Create a visibility configuration for the element you want to show or hide dynamically. Then, use the following code, replacing the parameter names as needed

return n.parameter.promo !== null;

Since Wized constantly listens for changes, the element will dynamically appear or disappear as the parameter changes.

3. Modify UI based on parameter values

navigation parameters can be used in JavaScript functions to modify UI elements. For example, if a product page contains an id parameter, you can dynamically set the product name:

• Create a text configuration for the element you want to modify. Then, use the following code, replacing the parameter names as needed

return n.parameter.id === '1' ? 'Product 1' : 'Other Product';

This allows you to personalize content without needing separate pages for each product.

Interacting with navigation in the function editor

In the function editor, navigation values can be accessed using the n object. For example, to retrieve the current "id" parameter, you would use:

return n.parameter.id;