Use our Multiple search box, where you can set advanced search options for products!
Use the following HTML markup to include it to your page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<div class="ct-searchBox ct-u-marginBottom60"> <form action="#"> <div class="ct-searchBookmark"> <a href="#" class="ct-js-filter"> <div class="ct-searchBookmark-header">Filter by: Price, Silver</div> </a> <div class="ct-searchContent"> <div class="ct-searchContent-category ct-searchContent-category--transparent">Price</div> <div class="ct-searchContent-description"> <div class="ct-searchContent-slider"> <div class="ct-js-noUiSliderPrice ct-u-marginBottom40"></div> <input type="text" class="form-control" id="lower-value"> <input type="text" class="form-control" id="upper-value"> </div> </div> <div class="ct-searchContent-category">Metal</div> <div class="ct-searchContent-description"> <!-- labels have to be next to each other --> <label for="checkbox1"> <input type="checkbox" id="checkbox1"><span>18k Yellow Gold</span> </label><label for="checkbox2"> <input type="checkbox" id="checkbox2"><span>18k White Gold</span> </label><label for="checkbox3"> <input type="checkbox" id="checkbox3"><span>14k White Gold</span> </label><label for="checkbox4"> <input type="checkbox" id="checkbox4"><span>14k White Gold</span> </label><label for="checkbox5"> <input type="checkbox" id="checkbox5"><span>Platinum</span> </label><label for="checkbox6"> <input type="checkbox" id="checkbox6"><span>Silver</span> </label><label for="checkbox7"> <input type="checkbox" id="checkbox7"><span>Stainless steel</span> </label> </div> <div class="ct-searchContent-category">Size</div> <div class="ct-searchContent-description"> <label for="checkbox8"> <input type="checkbox" id="checkbox8"><span>Less than 4mm</span> </label><label for="checkbox9"> <input type="checkbox" id="checkbox9"><span>4-6mm</span> </label><label for="checkbox10"> <input type="checkbox" id="checkbox10"><span>7-8mm</span> </label> </div> <div class="ct-searchContent-category">Color</div> <div class="ct-searchContent-color"> <select class="ct-js-colorSelector"> <option value="0" data-color="#d2a48a" selected="selected">salmon</option> <option value="1" data-color="#e1c99b">yellow</option> <option value="2" data-color="#deddd9">grey</option> <option value="3" data-color="#cd5c5c">indianred</option> <option value="4" data-color="#6495ed">cornflowerblue</option> <option value="5" data-color="#8fbc8f">darkseagreen</option> <option value="6" data-color="#ffd700">gold</option> <option value="7" data-color="#ffa500">orange</option> <option value="8" data-color="#db7093">palevioletred</option> <option value="9" data-color="#696969">dimgrey</option> </select> </div> <div class="clearfix"></div> </div> </div> </form> |
Notice, that Multiple Search box requires the following Javascripts if you want to use Color Picker and Range Slider for it:
1 2 3 4 5 |
<script src="assets/js/color-selector/colorselector.js"></script> <script src="assets/js/color-selector/init.js"></script> <script src="assets/js/nouislider/jquery.nouislider.all.js"></script> <script src="assets/js/nouislider/init.js"></script> |