Collection Filters

On pages with a Collections Listing, URL Filters can be used to filter the displayed images in the Collection Listing. For example, a click on a button can be used to display all items about a certain category. Also, the sorting order can be adjusted. This way you give the website visitors the possibility to show only items they are especially interested in.

In order to use URL Filters, you have to activate them by activating the checkbox Consider URL filters in the Collection Listing:

If the item with the link is located within a collection listing, the Website Builder can even set this URL filter automatically. Just switch to the Link tab and select Collection Filter as link type:

This article, however, deals with the use of manually created URL filters. And here is how it works:

• Filter by fields
• Adjust order
• Limit results

Filter by fields

In general, it is possible to filter by the data field types choice, checkbox, date, and text fields. To filter by one (or more) fields, this URL structure is always required:

*COLLECTION-LISTING-PAGE*#!filter[columns.*FIELD*]=*OPERATOR*:*VALUE*

Please replace *COLLECTION-LISTING-PAGE*, *FIELD*, *OPERATOR* and *VALUE* as follows:

• *COLLECTION-LISTING-PAGE*: This is the URL to the page where the collection listing was placed: 
  • If the collection listing is on the same page, this part can be omitted
  • For example, if the collection container is located on the "blog" page and the "slug" to the blog page is "/blog", simply replace *COLLECTION-LISTING-PAGE* with "/blog"
• *FIELD*: The field key usually corresponds to the field name in the collection itself. Please note that all spaces and special characters need to be replaced by "_".  To check the field key open More > Collections Manager. There you will click on the cog icon for the collection you want to check (1.), then you will click on the field for that you want the key (2.) and below the label, you will find the key (3.):
  

  

• *OPERATOR*: The following options can be used as a comparison operator if the value of the field should not exactly match the *VALUE*. 
  • lt: lower than
  • lte: lower than / equal
  • gt: greater than
  • gte: greater than / equal
  • notEqual: not equal
• *VALUE*: Depending on the data field type, it is necessary to specify the value to be filtered in a certain format.
  • Choice: The value must be URL-coded, including upper and lower case, which means that characters (e.g. the space character) must be replaced by a specific character string "%20".
  • Checkbox: The value is either
    • "1" for "selected" or
    • "0" for "not selected (without quotes)
  • Date: The date must be entered in the format "YYYY-MM-DD" (without quotation marks), where "YYYY" is the year, "MM" is the month, and "DD" is the day (with a leading "0" for numbers below "10"). In addition to an exact date, "now" can also be used. In combination with the comparison operator "lte", you can filter for all items, which have a date value of today or in the past.
  • Text fields: For texts, it is only possible to filter for exact texts

Example:

For this example, imagine the following scenario:

• Only items with a date field named "published on" and a date after 2023-03-23 should be displayed
• The Collection Listing is located on the page with the slug "/blog".
• The items should be displayed after clicking a button

Assign the following link to the button:

/blog#!filter[columns.published_at]=gt:2023-03-23

Several filters are concatenated with the help of an "&" sign. For example, you could additionally filter according to the author. Then the filter URL would look like this:

/blog#!filter[columns.published_at]=gt:2023-03-23&filter[columns.author]=John%20Doe

Adjust order

Also, the order of the collection items to be displayed can be adjusted. In doing so, an additional parameter is appended to the URL. The general format for changing the order looks like this:

order=columns.*FIELD*_*DIRECTION*

Please replace *FIELD* and *DIRECTION* as follows:

• *FIELD*: As already mentioned in the section "Filter by Fields", the respective field is uniquely identified by the field key
• *DIRECTION*: Here you specify the order in which the collection entries should be sorted according to the field specified by "Field key":
  • ASC: ascending order (A-Z)
  • DESC: descending order (Z-A)

If all items of the blog described above are to be sorted in descending order by publication date, the corresponding URL part for the order could look as follows:

/blog#!order=columns.published_at_DESC

If you now want to combine both filters from the "Filter by Fields" section and the order from this section, the URL will look like this

/blog#!filter[columns.published_at]=gt:2023-03-23&filter[columns.author]=John%20Doe&order=columns.published_at_DESC

Limit results

In addition to filtering and sorting, you can also limit the number of items to be displayed. You do this with the keyword "limit". For example, if you only want to display 3 items, the URL would be as follows:

/blog#!limit=3

You can also specify that not the first item should be displayed, but items at a certain position. Use the keyword "Offset" for this. "Offset" moves the selection of entries to be displayed. For example, if you want to display the 4th, 5th and 6th item, use the following URL:

/blog#!limit=3&offset=3