A Craft CMS 4 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.
OTHER License
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
This plugin requires Craft CMS 4.0 or later.
To install the plugin, follow these instructions.
Open your terminal and go to your Craft project:
cd /path/to/project
Then tell Composer to load the plugin:
composer require pdaleramirez/super-filter
In the Control Panel, go to Settings -> Plugins and click the “Install” button for Search Filter.
Go to Super Filter -> Setting and click Install Example Data button to generate example entries (Optional).
items.twig
or items.vue
must be copied to this folder to modify element attributes.Use this twig function and pass handle.
{{ craft.superFilter.render('handle') }}
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.
setup.twig
craft.superFilter.displaySearchFields()
- displays the search filter fields html.
fields.twig
and individual form input html in fields/*
folder.craft.superFilter.displaySortOptions()
- displays the sorting field dropdown html.
sorts.twig
craft.superFilter.items()
- displays the element entries or filtered element entries.
items.twig
craft.superFilter.getPaginateLinks()
- displays element entries pagination or the infinite scroll trigger.
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:
<div id="search-app">
{{ craft.superFilter.setup('searchList') }}
<div class="row">
<div class="col-sm-2 col-md-2">
{{ craft.superFilter.displaySearchFields() }}
</div>
<div class="col-sm-10 col-md-10">
{{ craft.superFilter.displaySortOptions() }}
{{ craft.superFilter.items() }}
{{ craft.superFilter.getPaginateLinks() }}
{{ craft.superFilter.close() }}
</div>
</div>
</div>
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
];
{{ 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 }}
craft.superFilter.setup
{{ craft.superFilter.render('superFilterShows', {
filter: {
superFilterImdbRating: 8,
superFilterGenre: [4],
superFilterShowTags: [7],
superFilterShowTypes: "tv-series",
}
}) }}
{{ craft.superFilter.setup('searchList', {
filter: {
superFilterImdbRating: 8,
superFilterGenre: [4],
superFilterShowTags: [7],
superFilterShowTypes: "tv-series",
}
}) }}
items.vue
you can call the date attribute like this:{{ dayjs(item.dateCreated).format('dddd MMMM D, YYYY') }}
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();
}
});
To generate example data with associated twig templates follow this steps:
To generate initial items.vue
template for a Setup Search:
Contact me for inquiries or if you require more customization. [email protected]