PHPackages pdaleramirez/super-filter - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Search & Filtering](/categories/search) 4. / 5. pdaleramirez/super-filter ActiveCraft-plugin[Search & Filtering](/categories/search) pdaleramirez/super-filter ========================= A Craft CMS 5 plugin that lets you build your search page with search filters from your element fields and filter element entries by categories, tags, element relations and other fields. 3.0.0(1y ago)61.4k1[6 PRs](https://github.com/pdaleramirez/super-filter/pulls)MITPHP Since Feb 19Pushed 1y ago1 watchersCompare [ Source](https://github.com/pdaleramirez/super-filter)[ Packagist](https://packagist.org/packages/pdaleramirez/super-filter)[ RSS](/packages/pdaleramirez-super-filter/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (1)Versions (52)Used By (0) Super Filter plugin for Craft CMS 5.x ===================================== [](#super-filter-plugin-for-craft-cms-5x) Build your search page with search filters from your element fields and filter element entries by categories, tags, element relations, products (Craft Commerce) and other fields. Easily setup your search page by using twig variable functions, back-end coding not needed. Supports Vue.js with pre-built styles. Demo: super-filter-page [![Screenshot](resources/img/super-filter-quick-demo.gif)](resources/img/super-filter-quick-demo.gif) Requirements ------------ [](#requirements) This plugin requires Craft CMS 4.0 or later. Installation ------------ [](#installation) To install the plugin, follow these instructions. 1. Open your terminal and go to your Craft project: ``` cd /path/to/project ``` 2. Then tell Composer to load the plugin: ``` composer require pdaleramirez/super-filter ``` 3. In the Control Panel, go to Settings -> Plugins and click the “Install” button for Search Filter. 4. Go to Super Filter -> Setting and click **Install Example Data** button to generate example entries (Optional). Configuring Search Filter ------------------------- [](#configuring-search-filter) 1. Create a new setup entry in the **Setup Search** tab and click on *New Setup.* 2. **Setup Config:** - **Title:** Used for easy identification of your setup. - **Handle:** Necessary to initialize the search setup. - **Items per page:** The number of entries on the page during content load or pagination. - **Base Template:** If no template is found in the template override folder, it will fallback to pre-built base templates. There are only two options: *Plain* for traditional form reload and *Vue* for reactive form submission. - **Watch Fields?:** For Vue templates, this option watches the fields and filters items automatically. - **Infinite Scroll?:** For Vue templates, this option loads more items on scroll. - **Template Override Folder:** The folder containing the templates to override, modifying Vue or HTML files. The `items.twig` or `items.vue` must be copied to this folder to modify element attributes. - **Element:** The element type of the items or entries to be displayed. - **Container:** Section, group, or product type for an element. - **Sort Fields:** Drag fields to the selected column to be displayed on the sorting template for sorting elements. - **Initial Sort:** The default sort query on page load. - **Search Fields:** Drag fields to the selected column to be displayed on the search field template for filtering elements. Using Super Filter ------------------ [](#using-super-filter) 1. To override a template or templates of the twig function from the selected base pre-built style templates. You can create the twig or vue file or open the super-filter plugin folder and copy a template or templates to the site template override folder path you specified on your configuration [![styles](resources/img/template-styles.jpg)](resources/img/template-styles.jpg) 2. ### Vue Base Template [](#vue-base-template) Use this twig function and pass handle. ``` {{ craft.superFilter.render('handle') }} ``` - fields.vue - displays the search filter fields html. - items.vue - displays the element entries or filtered element entries. - sorts.vue - displays the sorting field dropdown html. - main.vue - wrapper for fields and items. - fields/\* - individual form input html. ### Plain Base Template [](#plain-base-template) Use super filter twig function to display search sections on your page. There are 5 twig function to be called on your page template. - `craft.superFilter.setup('handle')` - requires 1 parameter which is the handle of search set up entry. This should be the first function to be added to the template or the order of declaration should be above all other super filter twig function. - Template filename: `setup.twig` - `craft.superFilter.displaySearchFields()` - displays the search filter fields html. - Template filename: `fields.twig` and individual form input html in `fields/*` folder. - `craft.superFilter.displaySortOptions()` - displays the sorting field dropdown html. - Template filename: `sorts.twig` - `craft.superFilter.items()` - displays the element entries or filtered element entries. - Template filename: `items.twig` - `craft.superFilter.getPaginateLinks()` - displays element entries pagination or the infinite scroll trigger. - Template filename: `pagination.twig` - `craft.superFilter.close() ` - needed to close the search page to reset templates path. So if you have included template after the super filter twig functions you will need this. The page template should look like this: ``` {{ craft.superFilter.setup('searchList') }} {{ craft.superFilter.displaySearchFields() }} {{ craft.superFilter.displaySortOptions() }} {{ craft.superFilter.items() }} {{ craft.superFilter.getPaginateLinks() }} {{ craft.superFilter.close() }} ``` ### Craft Commerce [](#craft-commerce) If you are using craft commerce and don't want to return the default `variants` attribute on search results. You can add a `super-filter.php` setting file in the config folder with this value. ``` return [ 'variants' => false ]; ``` Recommendation -------------- [](#recommendation) ### Vue Base Template [](#vue-base-template-1) - It is recommended to initialize the calling of attributes and field attributes for your items or elements to optimize loading performance. Add the attributes or field handles on the second parameter of the setup twig variable E.g. ``` {{ craft.superFilter.render('superFilterShows', { attributes: ["title","superFilterGenre","dateCreated"] }) }} ``` in your items.vue only the initialized attributes and field values are displayed. It will be called like this ``` {{ item.title }} {{ item.superFilterGenre }} {{ item.dateCreated }} ``` Customization ------------- [](#customization) - Pre-filter - If you want your items to load with pre defined filters you can pass a json key value pair in the `craft.superFilter.setup`twig function second parameter e.g. ### Vue Base Template [](#vue-base-template-2) ``` {{ craft.superFilter.render('superFilterShows', { filter: { superFilterImdbRating: 8, superFilterGenre: [4], superFilterShowTags: [7], superFilterShowTypes: "tv-series", } }) }} ``` ### Plain Base Template [](#plain-base-template-1) ``` {{ craft.superFilter.setup('searchList', { filter: { superFilterImdbRating: 8, superFilterGenre: [4], superFilterShowTags: [7], superFilterShowTypes: "tv-series", } }) }} ``` - Formatting Date attributes - The plugin supports so you can easily format your date. In your `items.vue` you can call the date attribute like this: ``` {{ dayjs(item.dateCreated).format('dddd MMMM D, YYYY') }} ``` - Item results modification - Call item event hook that allows you to modify the search and item results from an ajax results. E.g. ``` Event::on(SearchTypes::class, SearchTypes::EVENT_ITEM_ARRAY, function (ItemArrayEvent $event) { if (Craft::$app->getPlugins()->isPluginEnabled('commerce') == true && $event->searchType instanceof ProductSearchType) { $event->item['variants'] = $event->element->getVariants(); } }); ``` Generate Console Command ------------------------ [](#generate-console-command) ### Generate Example Data and Template Files [](#generate-example-data-and-template-files) To generate example data with associated twig templates follow this steps: 1. SSH to your server and run craft console command. 2. Run the command php craft super-filter/generate/example. This will create example entries and create template files. 3. After running command, visit your url you should be able to see Shows Entries Search Page. ### Generate Setup Search Template Files [](#generate-setup-search-template-files) To generate initial `items.vue` template for a Setup Search: 1. SSH to your server and run craft console command. 2. Run the command php craft super-filter/generate/templates 3. Enter a search setup handle: {theSetupSearchHandle} Contact me for inquiries or if you require more customization. ### Health Score 40 — FairBetter than 88% of packages Maintenance41 Moderate activity, may be stable Popularity23 Limited adoption so far Community10 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 98.9% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~47 days Recently: every ~75 days Total 39 Last Release 495d ago Major Versions 1.7.3 → 2.02024-01-26 2.0.21 → 3.0.02025-01-08 ### Community Maintainers ![](https://www.gravatar.com/avatar/80ecfeba39735012c4d9816b834a200b55b09e5338357329edb98ecbb2bfe183?d=identicon)[pdaleramirez](/maintainers/pdaleramirez) --- Top Contributors [![pdaleramirez](https://avatars.githubusercontent.com/u/4172750?v=4)](https://github.com/pdaleramirez "pdaleramirez (183 commits)")[![gwillz](https://avatars.githubusercontent.com/u/3466850?v=4)](https://github.com/gwillz "gwillz (2 commits)") --- Tags cmsCraftcraftcmscraft-pluginsearch filter ### Embed Badge ![Health badge](/badges/pdaleramirez-super-filter/health.svg) ``` [![Health](https://phpackages.com/badges/pdaleramirez-super-filter/health.svg)](https://phpackages.com/packages/pdaleramirez-super-filter) ``` ### Alternatives [studioespresso/craft-scout Craft Scout provides a simple solution for adding full-text search to your entries. Scout will automatically keep your search indexes in sync with your entries. 80136.8k](/packages/studioespresso-craft-scout)[trendyminds/algolia Easily pull search results from Algolia into your Craft CMS website 1332.2k](/packages/trendyminds-algolia)[la-haute-societe/craft-elasticsearch Bring the power of Elasticsearch to your Craft CMS projects. 1712.4k](/packages/la-haute-societe-craft-elasticsearch)[swixpop/locate Harness the power of the Google Autocomplete API inside Craft. Adds an autocomplete search box to Craft entries. 154.8k](/packages/swixpop-locate)[swishdigital/faceted-navigation Provides faceted navigation of entries, using categories, which allows site users to narrow the list of entries they see by applying multiple filters (think Amazon or eBay left sidebar). 152.4k](/packages/swishdigital-faceted-navigation)[fork/craft-elastica A plugin to connect to Elasticsearch and persist elements via hooks 101.8k](/packages/fork-craft-elastica) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)