Demo
Utilisez le filtre suivant pour tester le module.
Pomme
Rouge
Fruits
Patate
Brun
Jaune
Légumes
Filet mignon
Gris
Viande
Salade
Vert
Légumes
Avocat
Vert
Fruits
Banane
Jaune
Fruits
Citron
Jaune
Fruits
Lime
Vert
Fruits
Ananas
Brun
Jaune
Fruits
Celeri
Vert
Légumes
Brocoli
Vert
Légumes
Steak
Rouge
Viande
Installation
Importez la fonction dans votre projet
import { SingleFilter } from "@overdog/fn"
Note : Vous devez combiner ce filtre avec l'élément dropdown pour avoir le look de ce démo. Votre form se retrouvera dans un dropdown.
Créez et initiez une instance
new SingleFilter("#form-categories", {
divIds: ["listing"]
}).init()
Twig template Code
{# --------------------- CONTENT MAIN QUERY #}
{# if category is defined, show only entries relatedTo this category #}
{% set foodQuery = craft.entries()
.section('structureFood')
.with(['structureFoodColors', 'structureFoodTypes'])
.relatedTo((category is defined) ? category.id : null)
.all()
%}
{# --------------------- FILTER BAR #}
{# query categories with relatedTo to your section if you want ONLY the categories associated to the entries #}
{% set colorsCatGroup = craft.categories().group('groupFoodColors').all() %}
{% set catInUrl = craft.app.request.getSegment(-1) %} {# get the last url segment - see docs if need more control #}
<div class="">
{# Dropdown filter single choice #}
{% if colorsCatGroup|length %}
<div class="filter-dropdown max-w-[500px] relative mb-half">
<button
class="flex items-center border-b border-[#a5adb9] h-[50px] justify-between text-left w-full"
aria-expanded="false"
aria-controls="filter-category"
>
<span data-fn-dropdown-text>{{ 'Filter by category'|t }}</span>
{# caret #}
<span class="
border-b-0 border-x-transparent border-x-[0.3em] border-t-[0.3em] border-t-slate-600
transition-all ease-linear duration-200
group-hover:text-red
parent-is-open:rotate-180 parent-is-open:text-red
">
</span>
</button>
<div
id="filter-category" {# only for aria-controls - not used by JS #}
class="absolute hidden left-0 bg-white rounded-b-md shadow-md overflow-hidden w-full z-10
parent-is-open:block
">
<form id="form-categories">
<fieldset>
<legend class="sr-only">{{ 'Filter by category'|t }}</legend>
<div>
<input
id="all"
class="absolute inset-0 opacity-0 -z-1"
type="radio"
name="cat-radio"
value="{{ siteUrl }}/single-choice-filter"
/>
<label class="cursor-pointer block px-3.5 py-1.5 w-full hover:bg-[#e7edee]" for="all">{{ 'All colors'|t }}</label>
</div>
{% for category in colorsCatGroup %}
{# name must be the same for radio button #}
<div>
<input
id="{{ category.slug }}"
class="absolute inset-0 opacity-0 -z-1"
type="radio"
name="cat-radio"
value="{{ category.url }}" {{(category.slug in catInUrl) ? 'checked' }}
/>
<label class="cursor-pointer block px-3.5 py-1.5 w-full hover:bg-[#e7edee]" for="{{ category.slug }}">{{ category.title }}</label>
</div>
{% endfor %}
</fieldset>
</form>
</div>
</div>
{% endif %}
</div>
{# --------------------- CONTENT AND LOOP #}
<div id="listing" class="grid grid-col-1 md:grid-cols-3 gap-third">
{% if foodQuery|length %}
{{ include('_lib-fn/_card', { queryName: foodQuery }, ignore_missing = true )}}
{% else %}
<div>{{ ('There is no content matching your criteria.')|t }}</div>
{% endif %}
</div>
Options
-
NameTypeDefaultDescription
-
divIdsArray - CSS Id["listing"]Array de <div> dont le contenu sera remplacé. Idéalement, utilisez des ids.