{{craftSnippets}}
Home Articles Plugins Starter theme Components on Github Gists About
  • Home
  • Articles
  • Filtering entries in control panel using Searchit plugin
Posted on Feb 28, 2019 by Piotr Pogorzelski

Filtering entries in control panel using Searchit plugin

Searchit filter config on github gists

Notification

Method described in this article is outdated and the Searchit plugin is no longer mantained.
For filtering content in the Craft control panel, i recommend using Quick FIlters plugin.

Searchit is powerfull Craft CMS plugin that allows you to filter trough content in control panel. In this article you will learn how to filter entries by categories, creating "category tree" widget.
Table of contents:
  • Filtering entries by category
  • Solution - simulating "tree view"
  • How does it looks like in practice?

For information on Searchit plugin functionality overview, you can visit Searchit github page. In a nutshell, Searchit allows you to filter elements in control panel by their associated fields and attributes. In this article, we will focus on a specific use case - filtering entries by their categories, while categories are nested on multiple levels.

Filtering entries by category #

In my recent project, I was working on a website with thousands of entries, each assigned to one from over 200 categories. These categories were nested, sometimes up to 4th level. Searchit provided me and my client much-needed functionality - filtering through these entries by their categories. However, after some time I noticed that there are some limitations. This is a filter config I have came up with initially:

{% set handle = 'category_handle' %}
{% for category in craft.categories.group(handle).all() %}
   {{ ({
       filter: {
           relatedTo: category.id
       },
       label: category.title
   })|json_encode() }}{{ not loop.last ? ‘,’ }}
{% endfor %}

Notice that Searchit uses Twig for its filter configs - thanks to that we have quite large flexibility in how we want our data filtered. But in the end, filtering is done just by using html <select> field, so there are some limitations. In that case: all categories, regardless of their nesting depth were displayed one after another and nothing distinguished level 1 category from level 4.

Solution - simulating "tree view" #

To make category list inside <select> more readable, I decided to prepend = characters to category title - the more nested category was, the more equal signs would be appended. Using twig, This was done quite easily.

{% set handle = 'category_handle' %}
{% for category in craft.categories.group(handle).all() %}
{% set line = '' %}
{% set depth = category.getAncestors()|length %}
{% for number in range(0, depth) %}
{% set line = line ~ '=' %}
{% endfor %}
    {{ ({
        filter: {
            relatedTo: category.id
        },
        label: line ~ ' ' ~  category.title
    })|json_encode() }}{{ not loop.last ? ',' }}
{% endfor %}

There is one slight drawback worth mentioning. If your website has multiple pages, categories names will always be displayed in language of first page, even if we switch language to other on entries list. If you want these categories displayed in other language, just adjust category query in second line.

How does it looks like in practice? #

In example below we can see nested list of "places" categories - composed of continents, countries and cities:


TAGS:
#control panel #plugins
If you want to get latest updates on Craft CMS tutorials and components, follow me on Twitter or subscribe to RSS feed.
Quick links for this article:
Searchit filter config on github gists
Articles on blog:
  • Frontend testing for Craft CMS websites with Codeception and Cypress
  • Building reactive Craft Commerce product page with Sprig plugin
  • Dynamically generated PDF attachments for Freeform submissions
  • Using template hooks in Craft CMS
  • Alpine JS modal component for Craft CMS
  • Using template UI elements to extend Craft CMS control panel
  • Matrix within a Matrix - possible solutions for Craft CMS
  • Universal email template for Craft CMS
  • Creating attributes table from entry fields in Craft CMS
  • Namespacing forms in Craft CMS
  • Creating map-based navigation for Craft CMS
  • Placeholder image macro for Craft CMS
  • Building AJAX contact form with Craft CMS
  • Using incognito field plugin for Craft CMS
  • Email footer creator made with Craft CMS
  • Infinite scrolling and lazy loading with Craft CMS
  • Using Javascript in Twig templates with Craft CMS
  • Twig templating tips and tricks for Craft CMS
  • Basic SEO functionality for Craft CMS
  • Working with dates in Craft CMS templates
  • Working with SVG images in Craft CMS templates
  • Responsive and lazy-loaded youtube videos with Craft CMS
  • Debugging and inspecting Twig templates in Craft CMS
  • Creating article excerpts with Twig component in Craft CMS
  • Adding favicons to Craft CMS website
  • Truncating text with Twig macros in Craft CMS
  • Universal language switcher for Craft CMS
  • Read time macro for Craft CMS
  • Using attr() function to render HTML attributes in Craft CMS
  • Building dynamic, AJAX based pagination for Craft CMS
  • How to add Disqus comments to Craft CMS website
  • Ellipsis pagination component for Craft CMS
  • Converting email addresses into links using Twig macro
  • Breadcrumb created from URL for Craft CMS
  • Best developer-oriented Craft CMS plugins
  • Search autocomplete component for Craft CMS
  • RSS feed - template component for Craft CMS
  • Testing emails sent by Craft CMS using Mailtrap
  • Quick edit link - Twig component for Craft CMS
  • Filtering entries in control panel using Searchit plugin
  • Fetching routes into Twig templates in Craft CMS


Frontend testing for Craft CMS websites with Codeception and Cypress

Building reactive Craft Commerce product page with Sprig plugin

Dynamically generated PDF attachments for Freeform submissions

Using template hooks in Craft CMS

Alpine JS modal component for Craft CMS

Using template UI elements to extend Craft CMS control panel

Matrix within a Matrix - possible solutions for Craft CMS

Universal email template for Craft CMS

Copyright ©2023 Piotr Pogorzelski