Skip to main content

Multiple choices filters

Demo

Colors
Types
Radio Button Field

Ananas

Brun Jaune
Fruits

Avocat

Vert
Fruits

Banane

Jaune
Fruits

Brocoli

Vert
Légumes

Celeri

Vert
Légumes

Citron

Jaune
Fruits

Filet mignon

Gris
Viande

Lime

Vert
Fruits

Patate

Brun Jaune
Légumes

Pomme

Rouge
Fruits

Salade

Vert
Légumes

Steak

Rouge
Viande

Documentation

Importez la fonction dans votre projet

import { MultipleChoicesFilters } from "./functions/multiple-filters.js"

Instance et initialisation

Votre sélecteur est un div qui "wrap" vos multiples data-filters-group. Idéalement, utilisez un ID pour ce wrapper. Inspectez l'exemple ci-dessus si vous avez des questions ou regardez la structure HTML dans le fichier de template.

const myFilterMultiple = new MultipleChoicesFilters("#filter-wrapper-multiple", {
  // your options - view default values below
  divIds: ["listing"], 
  clearAllButtonId: "clear-all"
})

// init your newly created filter wrapper instance
myFilterMultiple.init()

Arguments - Options

  • Name
    Type
    Default
    Description
  • divIds
    Array - Liste de ID
    ["listing"]
    Array de <div> dont le contenu sera remplacé. Idéalement, utilisez des ids.
  • clearAllButtonId
    ID
    null
    ID du bouton pour tout désélectionner
  • fetchOnlyOnSubmit
    Boolean
    false
    Mettez à true dans les options de votre instance si vous désirez utiliser un submit button au lieu de déclancher sur changement.
  • regexToRemove
    Regex
    /\/p[0-9]+/
    Permet de supprimer un morceau de URL lorsqu'un event du filtre a lieu. Par défaut, cela va supprimer la pagination de Craft CMS par défaut (/p2).

Code

Dossier de base

Dossier des filtres