<div class="store-locator">
<div class="spacer spacer--15"></div>
<div class="section-header section-header--centered">
<div class="section-header__inner section--9">
<h1 class="section-header__heading heading heading--4">Find your local Pioneer DJ dealership</h1>
</div>
</div>
<div class="spacer spacer--6"></div>
<div class="store-locator__search">
<div class="store-locator__search__inner">
<div class="store-search">
<div class="store-search__inner">
<div class="store-search__form">
<div class="store-search__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="" class="store-search__input" required>
<span class="input-field__placeholder">City name..</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="store-search__link">
<a href="#" class="store-seach__link link link--underlined">
<span class="link__icon"><svg class="icon-location" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M4.16 16.96h10.080l3.040 9.28 6.24-20.32zM16 32c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zM16 1.12c-8.16 0-14.88 6.72-14.88 14.88s6.72 14.88 14.88 14.88 14.88-6.72 14.88-14.88-6.72-14.88-14.88-14.88z" />
</svg>
</span>
<span class="link__label">Use my current location</span>
</a>
</div>
<div class="store-search__filter">
<section class="store-filter">
<div class="store-filter__inner">
<div class="store-filter__item">
<div class="select">
<select name="" class="select__input store-filter__categories" disabled>
<option value="" disabled selected>Product category</option>
</select>
<div class="select__trigger">
<span class="select__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>
</div>
</div>
</div>
<div class="store-filter__item">
<div class="select">
<select name="" class="select__input store-filter__products" disabled>
<option value="" disabled selected>Product</option>
</select>
<div class="select__trigger">
<span class="select__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>
</div>
</div>
</div>
<div class="store-filter__item store-filter__item--switch">
<div class="switch">
<div class="switch__item">
<input class="switch__input" type="radio" name="switch" id="offline" checked>
<label class="switch__label" for="offline">
Stores
</label>
</div>
<div class="switch__item">
<input class="switch__input" type="radio" name="switch" id="online">
<label class="switch__label" for="online">
Online stores
</label>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="store-search__note">
<div class="search-note">
Lorem ipsum note content
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer spacer--10"></div>
<div class="section--9">
<div class="store-locator__offline">
<input type="hidden" id="detailslinkfield" value="/en-us/shops/search/*/?ItemId=">
<input type="hidden" id="noshopsfoundfield" value="No stores found">
<input type="hidden" id="visitwebsite" value="Visit website">
<input type="hidden" id="moredetails" value="More details">
<input type="hidden" id="mapsBaseUrl" value="https://maps.googleapis.com/maps/api/js">
<input type="hidden" id="geoCoderKey" value="AIzaSyCNAqOpdabBGRMJ2wUgbZEWYcOsiko97bo">
<section class="store-map list-is-hidden">
<span id="store-map" class="store-map__anchor"></span>
<header class="store-map__header">
<div class="store-map__heading">
<div>
<span class="store-map__count">10</span> shops nearby <strong class="store-map__area">Antwerp</strong>
</div>
</div>
<div class="store-map__switch">
<a href="#store-map" class="store-map__switch__item is-active" data-switch=".store-map__map">Map view</a>
<a href="#store-map" class="store-map__switch__item" data-switch=".store-map__list">List view</a>
</div>
</header>
<main class="store-map__main">
<div class="store-map__list">
<section class="store-list">
<nav class="store-list__content">
<ul class="store-list__list">
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
<li class="store-list__item">
<article class="snippet-d">
<header class="snippet-d__header">
<h3 class="snippet-d__heading">Store name</h3>
<span class="caption">5km</span>
</header>
<div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>
<a href="#detail" class="snippet-d__link"></a>
<div class="snippet-d__actions actions actions--split actions--force caption">
<div class="actions__item">
<div class="snippet-d__action">
<a href="#website" class="link link--underlined">
<span class="link__label">Visit website</span>
</a>
</div>
</div>
<div class="actions__item">
<div class="snippet-d__action">
<a href="#more details" class="link link--underlined">
<span class="link__label">More details</span>
</a>
</div>
</div>
</div>
</article>
</li>
</ul>
</nav>
</section>
</div>
<div class="store-map__map view-is-active">
<div id="store-map__map">
The map will be printed here ...
</div>
</div>
</main>
<div class="store-map__actions">
<div class="actions actions--start actions--force">
<div class="actions__item">
<a href="#" class="action action--ghost action--on-light">
<span class="action__label">Show all shops worldwide</span>
<span class="action__bg"></span>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="gutter--bucket">
<div class="section--8">
<div class="store-locator__online">
<section class="store-grid">
<div class="store-grid__inner">
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
<div class="store-grid__item">
<div class="store-grid__item__inner">
<span class="store-grid__label">Name online store</span>
<span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
<span class="link__label">www.onlinestore.com</span>
</a>
</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="spacer spacer--24"></div>
</div>
<div class="store-locator">
<div class="spacer spacer--15"></div>
{{render '@section-header' heading}}
<div class="spacer spacer--6"></div>
<div class="store-locator__search">
<div class="store-locator__search__inner">
{{render '@store-search' searchbox merge=true}}
</div>
</div>
<div class="spacer spacer--10"></div>
<div class="section--9">
<div class="store-locator__offline">
{{render '@store-map'}}
</div>
</div>
<div class="gutter--bucket">
<div class="section--8">
<div class="store-locator__online">
{{render '@store-grid'}}
</div>
</div>
</div>
<div class="spacer spacer--24"></div>
</div>
heading:
heading: Find your local Pioneer DJ dealership
type: 1
size: 4
section: 9
modifier: centered
searchbox:
searchform:
method: GET
url: '#'
searchfield:
input:
placeholder: City name..
searchlink:
url: '#'
label: Use my current location
storefilter: true
searchnote: true
.store-locator__search {
@media (min-width: 750px) {
padding: 0 var(--gutter--bucket);
}
}
.store-locator__search__inner {
max-width: var(--section--4);
margin: 0 auto;
}
.store-locator__offline {
display: none;
body:not(.online--is-active) & {
display: block;
}
}
.store-locator__online {
display: none;
body:not(.offline--is-active) & {
display: block;
}
}
No notes defined.