queryParams

Gets an object used to manage the query segment of the current page's URL.

Type:

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

Remove query parameters from the URL

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.queryParams.remove(["key1"]);
6
7// URL before removal:
8// www.mysite.com/page?key1=value1&key2=value2
9
10// URL after removal:
11// www.mysite.com/page?key2=value2

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});