<body>
<div class="container">
<h2>Quasiris Search Data Picker Demo</h2>
<section class="search-box">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input
type="search"
id="search-box"
class="search-query form-control"
placeholder="Search"
autocomplete="off"
data-provide="typeahead" data-items="4" placeholder="type in letter h, i or s" data-source='["iPhone", "HTC", "Samsung"]'
/>
<span class="input-group-btn">
<button class="btn btn-danger" type="submit" id="search-button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</section>
<section class="menu">
<div class="mini-menu_gender">
<div class="mini-menu-gender_name">
<p>Gender</p>
</div>
<div class="widget">
<h6 class="filter-title"><p>FILTER TITLE 1</p></h6>
<label class="filter" id="woman" data-filter="gender=woman">
<a href="#">WOMAN</a>
<span>11</span>
</label>
<label class="filter" id="man">
<a href="#">MAN</a>
<span>12</span>
</label>
</div>
<div class="widget">
<h6 class="filter-title"><p>FILTER TITLE 2</p></h6>
<label class="filter" id="woman" data-filter="gender=woman">
<a href="#">WOMAN</a>
<span>21</span>
</label>
<label class="filter" id="man">
<a href="#">MAN</a>
<span>22</span>
</label>
</div>
<ul id="myList" class="list">
<li class="filter" id="woman" data-filter="gender=woman">
<a href="#">WOMAN</a>
</li>
<li class="filter" id="man">
<a href="#">MAN</a>
</li>
<li class="filter" id="kids">
<a href="#">KIDS</a>
</li>
<li>
<button class="btnChild">
Add a Child Node
</button>
</li>
</ul>
</div>
</section>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<section class="sorting">
<div class="mini-menu">
<label>Sorting</label>
<select class="form-control" id="sortbox">
<option value="first_value" class="first_class" data-function-attr="data-function-attr1111" data-url="first_data-url_attribute">Mark</option>
<option value="second_value" class="second_class" data-function-attr="data-function-attr2222" data-url="second_data-url_attribute">Price</option>
</select>
</div>
</section>
<section class="productstest">
<div class="product">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSS8oEITt9vJtsCPRH0mvi2pRf8YZfN6YnkASdjsibLyayVVlidSUwG64QIWw"
alt="jacket" class="img-item"/>
<div class="info">
<h3>Our Legacy Splash Jacquard Knit 1</h3>
<p class="descroption">Black Grey Plants 1</p>
<h5>$2901</h5>
</div>
</div>
<div class="product">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSS8oEITt9vJtsCPRH0mvi2pRf8YZfN6YnkASdjsibLyayVVlidSUwG64QIWw"
alt="jacket" class="img-item"/>
<div class="info">
<h3>Our Legacy Splash Jacquard Knit 2</h3>
<p class="descroption">Black Grey Plants 2</p>
<h5>$2902</h5>
</div>
</div>
</section>
<section class="products">
<div class="grid"></div>
</section>
<section class="pagination">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</section>
</div>
<script src="https://unpkg.com/@quasiris/search-data-picker@1.8.9/dist/main.bundle.js"></script>
<script>
const config = {
"sessionConfigurations": {
"storage": "cookie",
"expiration": 43200
},
"endpointConfigurations": {
"url": "https://qsc-dev.quasiris.de/api/v1/search-data-picker/quasiris/search-data-picker-demo"
},
"pickerConfigurations": {
"documents": [
{
"eventSelector": ".product .info",
"event": "click",
"fields": [
{
"key": "title",
"selector": "h3"
},
{
"key": "count",
"selector": "h5"
}
]
}
],
"sorting": [
{
"eventSelector": "body > div > section.sorting > div > select",
"event": "change",
"fields": [
{
"key": "title",
},
{
"key": "data-url",
"attribute": "data-url"
},
{
"key": "data-function-attr",
"func": "function(element) {return element.selectedOptions[0].getAttribute('data-function-attr');}",
},
{
"key": "test function",
"func": function() {
return 'some other test function';
}
}
]
}
],
"filter": [
{
"eventSelector": ".widget > label > a",
"event": "click",
"fields": [
{
"key": "title",
},
{
"key": "href",
"attribute": "href",
},
{
"key": "count",
"selector": "absolutePathFromEventSelector:'.widget > label > span'",
},
{
"key": "filterName",
"func": function(element, helpers) {
return helpers.absolutePathFromEventSelector(".widget > .filter-title");
}
}
]
}
],
'pagination': [
{
"eventSelector": "body div section.pagination nav ul li a",
"event": "click",
}
]
}
],
"search-query": [
{
"eventSelector": ".search-box #custom-search-input .input-group #search-box",
"event": "keyup",
"id": "search_input",
"fields": [
{
"key": "search_value_keyup",
"func": function(element) {
return element.value;
}
}
]
},
{
"observe": "#custom-search-input .input-group",
"eventSelector": ".typeahead.dropdown-menu",
"event": "click",
"fields": [
{
"key": "value_from_typeahead",
"selector": "li.active a"
}
]
}
]
}
}
picker.initPicker.fromConfigFile(config);
</script>
</body>