<div class="search-box">
<div class="search-box__inner">
<form class="search-box__form" method="GET" action="https://pioneerdj.com/en/search-results/">
<div class="search-box__field">
<div class="search-field">
<div class="search-field__input">
<div class="parent-class input-field is-required">
<div class="input-field__inner">
<input type="text" name="q" id="" value="" required>
<span class="input-field__placeholder">Search..</span>
</div>
<div class="input-field__error">
<p>This field is not filled in correctly or cannot be empty.</p>
</div>
</div>
</div>
<div class="search-field__submit">
<div class="action action--normal action--on-light action--icon">
<span class="action__icon">
<svg class="icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 57">
<path fill="currentColor" d="M60 54.93 39.86 34.91a21.74 21.74 0 0 0 4.28-12.97C44.14 9.84 34.24 0 22.07 0S0 9.84 0 21.94s9.9 21.94 22.07 21.94c6.23 0 11.87-2.59 15.88-6.73L57.92 57 60 54.93ZM22.07 40.95c-10.55 0-19.13-8.53-19.13-19.02S11.52 2.92 22.07 2.92 41.2 11.45 41.2 21.94s-8.58 19.02-19.13 19.02Z" />
</svg>
</span>
<span class="action__bg"></span>
</div>
</div>
</div>
</div>
<div class="search-box__filter">
<div class="search-filter">
<div class="select-checkboxes">
<div class="select-checkboxes__inner">
<label class="select-checkboxes__label">Filter by</label>
<span class="select-checkboxes__value"></span>
<span class="select-checkboxes__trigger">
<span class="select-checkboxes__symbol"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</span>
</div>
<div class="select-checkboxes__content">
<div class="select-checkboxes__options">
<ul class="select-checkboxes__items">
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 1">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 2">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 3">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 4" checked>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 5" checked>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 6">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 7">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
</ul>
<div class="select-checkboxes__actions">
<div class="actions actions--end">
<div class="actions__item">
<a href="#" target="_blank" class="select-checkboxes__action action action--normal action--on-light">
<span class="action__label">Apply filters</span>
<span class="action__bg"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="search-box">
<div class="search-box__inner">
<form class="search-box__form" method="{{searchform.method}}" action="{{searchform.url}}">
<div class="search-box__field">
{{render '@search-field' searchfield}}
</div>
<div class="search-box__filter">
{{render '@search-filter' searchfilter merge=true}}
</div>
</form>
</div>
</div>
searchform:
method: GET
url: https://pioneerdj.com/en/search-results/
searchfield:
input:
placeholder: Search..
name: q
required: true
disabled: false
value: ''
class: ''
searchfilter: true
storefilter: true
searchnote:
content: Please contact retailer directly to check stock availability
.search-box {
position: relative;
padding: calc(var(--gap) * 4);
border: 1px solid var(--color--neutrals-2);
@media (min-width: 750px) {
padding: calc(var(--gap) * 8);
}
}
.search-box__inner {
max-width: var(--section--4);
margin: 0 auto;
}
.search-box__filter {
margin-top: calc(var(--gap) * 8);
}
No notes defined.