Livewire Collection tag

¶General

The {{ livewire-collection }} tag is the cornerstone of this addon. It is responsible for loading the main Livewire component, LivewireCollection, and can handle almost all the parameters and syntax of the original {{ collection }} tag.

For instance, if you have a collection tag like this:

        
        {{ collection:cars paginate="10" sort="title:asc" }}
	{{# Your template here #}}
{{ /collection:cars }}

    

You can replace it like so:

        
        {{ livewire-collection:cars paginate="10" sort="title:asc" }}
    

¶Parameters

This tag can manage almost all collection parameters, passing them to the Livewire component. When using conditions, they are parsed, and the collection is filtered accordingly. If an active filter component for the condition exists, the filter will automatically populate with the correct values. Which means you can do stuff like and expect them to just work:

        
        {{ livewire-collection:cars taxonomy:car_brand:any="toyota" max_passengers:gte="4" }}
    

To see preset conditions examples in action, visit the relevant section.

The {{ livewire-collection }} also accepts the following parameters:

• view: Select a different view (template) for the entries, enabling the use of varied templates for different collections. For example, view="cars" will search for the template at resources/views/vendor/statamic-livewire-filters/livewire/cars.antlers.html.

• paginate: While this is a parameter of the original collection tag, here it replaces the pagination with a pre-built Livewire-compatible one. Use the {{ links }} variable in your template for pagination.

• allowed_filters: Given that this addon leverages Laravel Livewire, it's important to note that all server requests can potentially be modified by a malicious user. This could lead to unintended conditions being applied, such as listing draft entries. While this may not be a significant concern since the data being filtered is public, you might still wish to restrict the filters users can apply for enhanced security.

  To specify which filters are permissible, you can set a parameter that defines the allowed conditions. This is achieved by passing a pipe-separated list of permissible filters. For example:

        
        {{ livewire-collection:cars paginate="6" allowed_filters="taxonomy:car_brand:any|transmission:is" }}
    

When using with query_scopes you need to allow both parameters:

        
        {{ livewire-collection:cars paginate="8" allowed_filters="taxonomy:car_brand:any|query_scope:multiselect|multiselect:special_categories" }}
    

¶Pagination

Pagination is seamlessly managed by the LivewireCollection component. Simply include the paginate property in the tag to activate it. Within your template, use the {{ links }} tag to generate a TailwindCSS-styled pagination control.

If you prefer to customize the pagination appearance, you can modify the default pagination template located at vendor/statamic-livewire-filters/livewire/ui/pagination.blade.php.

For situations where you need to display the total number of entries (e.g., "Showing 5 of 60 results"), remember that using {{ entries | count }} will only count the entries on the current page. To display the total number of entries across all pages, use the {{ pagination_total }} variable anywhere within your template.