Skip to main content

Multiple filters with tags

Description

Extension de la classe MultipleChoicesFilters. Cette extension vous permet de facilement ajouter des tags pour les options sélectionnées de vos filtres. Vous pouvez décider de placer les tags où vous voulez. Ils peuvent être sous chaque filtre ou dans un même div. L'attribut data-tags-row, que vous ajoutez sur chaque input spécifie le id du div où vous souhaitez afficher le tag.

Le template de votre tag est tiré d'une balise <template>. Cela vous permet de modifier facilement la structure html de votre tag sans toucher à la fonction JavaScript.

Demo

Colors
Types

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 { MultipleChoicesFiltersWithTags } from "./functions/extends-tags.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 myFilterWithTags = new MultipleChoicesFiltersWithTags("#filter-wrapper-tags", {
  // your options - view default values below

})

// init your newly created filter wrapper instance
myFilterWithTags.init()
Cet élément utilise les mêmes options et argument que le Multiple choices filters.

Code

Dossier de base

Dossier des filtres