Download the PHP package pdaleramirez/super-filter without Composer
On this page you can find all versions of the php package pdaleramirez/super-filter. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download pdaleramirez/super-filter
More information about pdaleramirez/super-filter
Files in pdaleramirez/super-filter
Package super-filter
Short Description 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.
License MIT
Informations about the package super-filter
Super Filter plugin for Craft CMS 4.x
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
Requirements
This plugin requires Craft CMS 4.0 or later.
Installation
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).
Configuring Search Filter
- Create a new setup entry in the Setup Search tab and click on New Setup.
- 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
oritems.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
- 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
2.
Vue Base Template
Use this twig function and pass 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
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
- Template filename:
-
craft.superFilter.displaySearchFields()
- displays the search filter fields html.- Template filename:
fields.twig
and individual form input html infields/*
folder.
- Template filename:
-
craft.superFilter.displaySortOptions()
- displays the sorting field dropdown html.- Template filename:
sorts.twig
- Template filename:
-
craft.superFilter.items()
- displays the element entries or filtered element entries.- Template filename:
items.twig
- Template filename:
craft.superFilter.getPaginateLinks()
- displays element entries pagination or the infinite scroll trigger.- Template filename:
pagination.twig
- Template filename:
-
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 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.
Recommendation
Vue Base Template
- 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.
in your items.vue only the initialized attributes and field values are displayed. It will be called like this
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
Plain Base Template
-
Formatting Date attributes - The plugin supports https://day.js.org/ so you can easily format your date. In your
items.vue
you can call the date attribute like this: - Item results modification - Call item event hook that allows you to modify the search and item results from an ajax results. E.g.
Generate Console Command
Generate Example Data and Template Files
To generate example data with associated twig templates follow this steps:
- SSH to your server and run craft console command.
- Run the command php craft super-filter/generate/example. This will create example entries and create template files.
- After running command, visit your url https://your-url.test/super-filter-page you should be able to see Shows Entries Search Page.
Generate Setup Search Template Files
To generate initial items.vue
template for a Setup Search:
- SSH to your server and run craft console command.
- Run the command php craft super-filter/generate/templates
- Enter a search setup handle: {theSetupSearchHandle}
Contact me for inquiries or if you require more customization. [email protected]