onChange( )

Adds an event handler that runs when an application page's URL changes.

Description

The event handler set by the onChange() function runs when the location is changed but the change doesn't trigger navigation. This situation occurs when navigating between subitems on a page that is managed by a full-page application.

For example, a store product page is a full-page application. When a product page's path changes because it is switching between items, no actual navigation is taking place. You can use the onChange() event handler to determine when a new product is displayed and perform any necessary partial updates on the current page.

The onChange() function can only be used when browser rendering happens, meaning you can only use it in frontend code after the page is ready.

To determine if a page is managed by a full-page application, use the wix-site-frontend currentPage property or getSiteStructure() function to retrieve a StructurePage object that corresponds to the page. If the object contains an applicationId value, then the page is managed by a full-page application.

Syntax

function onChange(handler: LocationChangeHandler): void
handler: function LocationChangeHandler(event: Location): void

onChange Parameters

NAME

TYPE

DESCRIPTION

handler

LocationChangeHandler

The name of the function or the function expression to run when the location changes.

Returns

This function does not return anything.

Return Type:

void

LocationChangeHandler Parameters

NAME

TYPE

DESCRIPTION

event

Location

The new location.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Get the new location path

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.onChange( (location) => {
6  let newPath = location.path;
7} );