Easily update the query string with a link

Question

I'm working on a site with some filters that result in a page with a URL similar to this: domain.com/led-products?series=67&efficacy=1000to5000&lumens=over150

That results page contains buttons/links like so:

[Series Name x] [1,000 to 5,000 Efficacy x] [Over 150 Lumens x]

Clicking on one of those would remove that filter. Let's say a user clicks on Series Name to remove that filter, the resulting URL would then be: domain.com/led-products?efficacy=1000to5000&lumens=over150

My problem is that I have no idea how to get that filter/parameter removal functionality in Craft. Does this require a JS solution?

I've played around with something like this and can't seem to get it to work for my needs.

Help?

Answer 1

OK, this should be a working code example:

{% set queryParams = craft.app.request.queryParams %}
{% for key, value in queryParams %}
  {% set url = siteUrl ~ craft.app.request.fullPath %}
  {% set arr = queryParams | filter((v, k) => k != key) %}
  {% if arr|length > 0 %} 
    {% set url = url ~ '?' ~ arr|url_encode %}
  {% endif %}
  <a href="{{url}}">{{key}} {{value}} x</a>
{% endfor %}

Line by line:

Create an array based on the current request parameters:

{% set queryParams = craft.app.request.queryParams %}

Loop through the array and get the key/value pair:

{% for key, value in queryParams %}

While inside the loop, get the URL that we want to modify, minus the request params:

{% set url = siteUrl ~ craft.app.request.fullPath %}

Filter a local copy of the array to remove the current key:

{% set arr = queryParams | filter((v, k) => k != key) %}

If there are any parameters left, modify the URL we previously set with the remaining parameters:

{% if arr|length > 0 %} 
  {% set url = url ~ '?' ~ arr|url_encode %}
{% endif %}

Output the link that will load the page without the current parameter.

<a href="{{url}}">{{key}} {{value}} x</a>

I would probably do this in a macro to keep the template code a bit cleaner and easy to read.