Tag filter edge cases
On this page:
Example 1 - Events list
Filter options
-
|
Location: , Language:
No item match this combination of filters.
Source code
<section id="filteredEventsList" class="wb-tagfilter wb-paginate provisional" data-wb-paginate='{
"itemsPerPage": 5,
"section": ".events-list",
"selector": "li",
"uiTarget": "#filteredEventsListPagination"
}'>
<h2>Example 1 - Events list</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-3">
<details open>
<summary>
<h3>Filter options</h3>
</summary>
<div class="form-group mrgn-bttm-0">
<fieldset>
<legend class="h5 mrgn-tp-0"><span class="field-name">Language</span></legend>
<ul class="list-unstyled">
<li class="radio">
<label>
<input type="radio" name="language" class="wb-tagfilter-ctrl" value="" checked> All
</label>
</li>
<li class="radio">
<label>
<input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__french"> French
</label>
</li>
<li class="radio">
<label>
<input type="radio" name="language" class="wb-tagfilter-ctrl" value="language__english"> English
</label>
</li>
</ul>
</fieldset>
</div>
<div class="form-group mrgn-bttm-0">
<fieldset>
<legend class="h5 mrgn-tp-0"><span class="field-name">Event location</span></legend>
<ul class="list-unstyled">
<li class="checkbox">
<label>
<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__montreal"> Montreal
</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__online"> Online
</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" name="location" class="wb-tagfilter-ctrl" value="location__vancouver"> Vancouver
</label>
</li>
</ul>
</fieldset>
</div>
<div class="form-group mrgn-bttm-0">
<label for="dayList">Day of the week</label>
<select id="dayList" name="dayOTW" class="form-control full-width wb-tagfilter-ctrl">
<option value="">All</option>
<option value="dayOTW_monday">Monday</option>
<option value="dayOTW_tuesday">Tuesday</option>
<option value="dayOTW_wednesday">Wednedsday</option>
<option value="dayOTW_thursday">Thursday</option>
<option value="dayOTW_friday">Friday</option>
<option value="dayOTW_saturday">Saturday</option>
<option value="dayOTW_sunday">Sunday</option>
</select>
</div>
</details>
</div>
<div class="col-xs-12 col-sm-8 col-lg-9">
<ul class="list-unstyled events-list wb-tagfilter-items" data-wb-json='{
"url": "data_en.json#/events",
"mapping": [
{ "selector": "li", "attr": "data-wb-tags", "value": "/tags" },
{ "selector": "h3", "value": "/title" },
{ "selector": ".event-date", "value": "/date" },
{ "selector": ".event-time", "value": "/time" },
{ "selector": ".event-location", "value": "/location" },
{ "selector": ".event-language", "value": "/language" }
]
}'>
<template>
<li data-wb-tags="">
<h3></h3>
<p><span class="event-date"></span> | <span class="event-time"></span></p>
<p><strong>Location:</strong> <span class="event-location"></span>, <strong>Language</strong>: <span class="event-language"></span></p>
</li>
</template>
</ul>
<div class="wb-tagfilter-noresult">
<p>No item match this combination of filters.</p>
</div>
<div id="filteredEventsListPagination"></div>
</div>
</div>
</section>
Page details
- Date modified: