Installation

¶Installing the addon

You can install Statamic Livewire Filters using Composer:

        
        composer require reachweb/statamic-livewire-filters
    

¶Configuration

There are a few configuration options. If you which to change them, publish the config file using:

        
        php artisan vendor:publish --tag statamic-livewire-filters-config
    

The available config options at the time are:

• enable_query_string: enables Livewire's query string feature. Defaults to false.

• validate_filter_values: when using fields that have predefined options the addon would validate that the value the user wants to filter by, actually exists in the options array. Defaults to true.

• enable_filter_values_count: When enabled, Livewire Filters calculates and displays counts for each option in checkboxes, radio, and select fields next to their labels. This feature is resource-intensive, as it performs a query for each filter option on the page and repeats these queries after each user action to update the counts. Therefore, it should be used cautiously, especially with large data sets. By default, this setting is false.

¶Publish the views

To publish the views use the vendor:publish command:

        
        php artisan vendor:publish --tag statamic-livewire-filters-views
    

¶Livewire assets

We are using the jonassiewertsen/statamic-livewire package under the hood, which injects Livewire styles and scripts automatically into the page. However, this does not work if caching is enabled (half/full). In that case, you want to include them manually, by using the respective tags {{ livewire:styles }} and{{ livewire:scripts }}. Read more here.

¶Assets handling with TailwindCSS

If you're using TailwindCSS, add the paths in your tailwind.config.js file:

        
            

                

                    
                    tailwind.config.js
                
            
        
        /** @type {import('tailwindcss').Config} */
export default {
    content: [
        './resources/**/*.antlers.html',
        './resources/**/*.antlers.php',
        './resources/**/*.blade.php',
        './resources/**/*.vue',
        './content/**/*.md',
    	'./resources/views/vendor/statamic-livewire-filters/**/*.blade.php',
    	'./resources/views/vendor/statamic-livewire-filters/**/*.antlers.html',
    ],

    theme: {
        extend: {},
    },

    plugins: [
        require('@tailwindcss/typography'),
    ],
};
    

If you plan on building on the default filter templates, it's a good idea to add the @tailwindcss/forms plugin as well and add it in your plugins array.

        
        npm install @tailwindcss/forms
    

Plugins array in your tailwind.config.js:

        
            

                

                    
                    tailwind.config.js
                
            
        
        plugins: [
	require('@tailwindcss/typography'),
    require("@tailwindcss/forms")({
        strategy: 'class'
      }),
],
    

¶Javascript

Right now, Statamic Livewire Filters does not need Javascript unless you are using the default DateFilter component. If you are, you need to import Flatpickr in your project. We bundled it with the addon's assets and you can import it using the Vite tag:

        
            

                

                    
                    resources/views/layout.antlers.html
                
            
        
        {{ vite src="resources/js/app.js" directory="vendor/statamic-livewire-filters/build" }}

    

¶Add the assets at your project (if not using TailwindCSS)

Post-installation, the assets will be available at vendor/reachweb/statamic-livewire-filters/resources/build. If not using TailwindCSS, you could add the assets in your layout file:

        
            

                

                    
                    resources/views/layout.antlers.html
                
            
        
        {{ vite src="resources/css/app.css|resources/js/app.js" directory="vendor/statamic-livewire-filters/build" }}
    

Omit the Javascript file if not using the default DateFilter component, as previously mentioned.