add( )

Adds query parameters to the current page's URL.

Description

Adds one or more query parameters to the current page's URL.

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

If a specified key already exists as a query parameter, the newly specified value will overwrite the key's previous value.

Calling the add() function triggers the onChange() event handler if it has been registered.

Note: To retrieve the page's current query parameters, use the query property.

Syntax

function add(toAdd: Object): void

add Parameters

NAME

TYPE

DESCRIPTION

toAdd

Object

An object containing a key:value pair for each query parameter to add to the URL, where the object's keys are the query parameter keys and the object's values are the corresponding query parameter values.

Returns

This function does not return anything.

Return Type:

void

Related Content:

remove( )

Was this helpful?

Add query parameters to the URL

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.queryParams.add({
6  "key2": "value2new",
7  "key3": "value3"
8});
9
10// URL before addition:
11// www.mysite.com/page?key1=value1&key2=value2
12
13// URL will look like:
14// www.mysite.com/page?key1=value1&key2=value2new&key3=value3

Add, update, remove, and get URL query parameters

Note: It's easiest to test this example in a published version of your site. If you test using preview, you will see a lot of extra query parameters from the Editor URL. You can test out the code in our example template.

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3$w.onReady(function () {
4  $w("#addButton").onClick((event) => {
5    const key = $w('#addKey').value;
6    const value = $w('#addValue').value;
7    if (key && value) {
8      const toAdd = { [key]: value };
9      wixLocationFrontend.queryParams.add(toAdd);
10      $w('#addKey').value = undefined;
11      $w('#addValue').value = undefined;
12    }
13  });
14
15  $w("#removeButton").onClick((event) => {
16    const paramToRemove = [$w('#removeKey').value];
17    wixLocationFrontend.queryParams.remove(paramToRemove);
18    $w('#removeKey').value = undefined;
19  });
20
21  $w("#getButton").onClick((event) => {
22    const query = wixLocationFrontend.query;
23    if (query) {
24      $w('#getText').value = JSON.stringify(query, null, 2);
25    }
26  });
27});