URL Parameters


URL parameters allow you to persist key information when the User changes page, or the page is reloaded. Siteglide uses them for pagination and for storing search terms. 

Below is an example of a URL:

https://not-a-real-domain.siteglide.com/slug/slug2?parameter-1=hello&parameter-2=hello&20world

The URL contains the following key elements when we break it down. 

  • Protocol and domain - 
https://not-a-real-domain.siteglide.com
  • Slugs help locate a particular page on the domain
/slug/slug2
  • Query parameters store key-value pairs of information:
?parameter-1=hello&parameter-2=hello&20world


Notice that a question mark "?" starts off the parameters and an ampersand "&" separates each pair. An equals sign "=" sits between each key (which defines the name of the parameter) and the value. In the example we have the following parameters.

parameter-1 = "hello"
parameter-2 = "hello world"

Setting query parameters


There are three main ways to set query parameters:

  1. Manually add them to a URL in a browser - just click in your browser address bar and type.
  2. Use HTML and liquid- the liquid is used to add the current URL as the beginning of the href attribute, then the parameters are added.
<a href="{{context.headers.PATH_INFO}}?message=hello&20world">Add a greeting to the URL!</a>

   3.  Use custom JavaScript

Reading query parameters


Replace my_parameter_name with the key of your parameter:

{{context.params.my_parameter_name}}

If a parameter is not in the URL, this code will output null.

A note on security: normally when you output information from the URL on the page, it opens up your site to a certain form of XSS attack, however, as Siteglide runs on pOS, we are safe from this common problem. At the time of writing all liquid with a {% %} and {{ }} syntax is sanitised by default and malicious JavaScript removed. See the platformOS docs for up-to-date information.

Percent-Encoding


URLs only accept certain characters. In the example above, we convert spaces to "%20" to encode them so they preserve their meaning while only using accepted characters.

You can use liquid to encode when writing to the URL:

{% capture my_URL_params %}?message=hello world{% endcapture %}
<a href="{{context.headers.PATH_INFO}}{{my_URL_params | url_encode }}">Add a greeting to the URL!</a>


and decode when reading the URL:

{{context.params.my_parameter_name | url_decode }}


JavaScript also has custom methods to assist with this.

Did this answer your question?