<div class="search-results">
<div class="search-results__inner">
<div class="search-box">
<div class="search-box__inner">
<form class="search-box__form" method="" action="">
<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="" class="search-field__input" 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-results__info">
<div class="search-info">
<div class="search-info__item">
<span class="search-info__amount">
<strong>55 results</strong> found
</span>
</div>
<div class="search-info__item">
<div class="search-info__per-page">
<div class="search-info__label">
Results per page
</div>
<div class="search-info__select">
<div class="select select--small">
<select name="" class="select__input">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</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>
</div>
</div>
</div>
<div class="search-results__list">
<div class="search-results__item">
<a href="https://pioneerdj.com/en-us/product/accessories/djc-1x-bag/bag/" class="snippet-b">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-1x-bag/djc-1x_ddj-1000.png?h=250&amp;w=400&amp;hash=B5D5C735E00683D29F73DDE87CA69D3E" class="lazyload" alt="Product shot">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Product</span>
<h2 class="snippet-b__heading heading heading--6">DJC-1X BAG - DJ controller bag for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2, DDJ-SX3 and DDJ-RX</h2>
<div class="snippet-b__description">This DJ controller bag is the perfect size for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2, DDJ-SX3, DDJ-RX. The bag's protective egg-foam and fleeced lining prevent damage from vibrations and shocks.</div>
</div>
</div>
</a>
</div>
<div class="search-results__item">
<a href="https://www.pioneerdj.com/en/product/accessories/archive/djc-wecai/cable/" class="snippet-b is-archived">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-wecai/djc-wecai-main.png?h=250&w=400&hash=0661BE7BD5A36D91CEA98BEE84F78410" class="lazyload" alt="Product shot">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Product</span>
<h2 class="snippet-b__heading heading heading--6">DJC-WeCAi - iPad cable for the DDJ-WeGO and DDJ-ERGO</h2>
<div class="snippet-b__description">Use the WeCAi cable to connect a DDJ-WeGO or DDJ-ERGO to your iTunes library on a mobile device running Algorridim's djay 2 app. Or get to grips with video mixing using Algorridim's vjay app. USB power supply The WeCAi includes a USB connection for...</div>
</div>
</div>
</a>
</div>
<div class="search-results__item">
<a href="https://www.pioneerdj.com/en/support/software/ddj-rzx/" class="snippet-b">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="/graphics/news_icon.png" class="lazyload" alt="Download icon">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Download</span>
<h2 class="snippet-b__heading heading heading--6">DDJ-RZX firmware Windows 1.10</h2>
<div class="snippet-b__description">This firmware is a system software program for your DJ CONTROLLER. Please update the firmware to the latest version to enhance the product's performance. Please read Firmware Update Guide to check the firmware version of your DJ CONTROLLER and how to...</div>
</div>
</div>
</a>
</div>
<div class="search-results__item">
<a href="#" class="snippet-b is-video video-player__trigger">
<span class="video-ID">MxRKpTI5dqo</span>
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/player/cdj-3000/cdj-3000-video-prev.jpg?mh=100&c=1&ch=100&cw=100&hash=F8C20390BEDB92852F19AD3FA50AAE87" class="lazyload" alt="Video image">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Video</span>
<h2 class="snippet-b__heading heading heading--6">CDJ-3000 Introduction video</h2>
<div class="snippet-b__description"></div>
</div>
</div>
</a>
</div>
</div>
<div class="search-results__paging">
<div class="paging">
<div class="paging__header">
<span class="paging__label">Results page</span>
</div>
<div class="paging__list">
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=1" class="paging__dir paging__dir--left">
<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>
</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=1" class="paging__link">1</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=2" class="paging__link">2</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=3" class="paging__link is-active">3</a>
</div>
<div class="paging__item">
<span class="paging__link">…</span>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=5" class="paging__link">19</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=2" class="paging__dir paging__dir--right is-active">
<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>
</a>
</div>
</div>
</div>
</div>
<footer class="search-results__footer">
<p>Didn’t find what you’re looking for? Maybe use fewer words or a more general search term.<br>If you still have no luck you can contact our <a href="/en/support/contact">customer service</a>.</p>
</footer>
</div>
</div>
<div class="search-results">
<div class="search-results__inner">
{{render '@search-box' searchbox }}
<div class="search-results__info">
{{render '@search-info' }}
</div>
<div class="search-results__list">
{{#each items }}
<div class="search-results__item">
{{render '@snippet-b' this }}
</div>
{{/each}}
</div>
<div class="search-results__paging">
{{render '@paging' }}
</div>
<footer class="search-results__footer">
{{{ footer }}}
</footer>
</div>
</div>
searchbox:
searchfilter: true
items:
- label: Product
archived: false
url: https://pioneerdj.com/en-us/product/accessories/djc-1x-bag/bag/
visual:
src: >-
https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-1x-bag/djc-1x_ddj-1000.png?h=250&w=400&hash=B5D5C735E00683D29F73DDE87CA69D3E
alt: Product shot
heading: >-
DJC-1X BAG - DJ controller bag for the DDJ-1000, DDJ-1000SRT, DDJ-SX,
DDJ-SX2, DDJ-SX3 and DDJ-RX
description: >-
This DJ controller bag is the perfect size for the DDJ-1000, DDJ-1000SRT,
DDJ-SX, DDJ-SX2, DDJ-SX3, DDJ-RX. The bag's protective egg-foam and
fleeced lining prevent damage from vibrations and shocks.
- label: Product
archived: true
url: https://www.pioneerdj.com/en/product/accessories/archive/djc-wecai/cable/
visual:
src: >-
https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-wecai/djc-wecai-main.png?h=250&w=400&hash=0661BE7BD5A36D91CEA98BEE84F78410
alt: Product shot
heading: DJC-WeCAi - iPad cable for the DDJ-WeGO and DDJ-ERGO
description: >-
Use the WeCAi cable to connect a DDJ-WeGO or DDJ-ERGO to your iTunes
library on a mobile device running Algorridim's djay 2 app. Or get to
grips with video mixing using Algorridim's vjay app. USB power supply The
WeCAi includes a USB connection for...
- label: Download
archived: false
url: https://www.pioneerdj.com/en/support/software/ddj-rzx/
visual:
src: /graphics/news_icon.png
alt: Download icon
heading: DDJ-RZX firmware Windows 1.10
description: >-
This firmware is a system software program for your DJ CONTROLLER. Please
update the firmware to the latest version to enhance the product's
performance. Please read Firmware Update Guide to check the firmware
version of your DJ CONTROLLER and how to...
- label: Video
visual:
src: >-
https://www.pioneerdj.com/-/media/pioneerdj/images/products/player/cdj-3000/cdj-3000-video-prev.jpg?mh=100&c=1&ch=100&cw=100&hash=F8C20390BEDB92852F19AD3FA50AAE87
alt: Video image
video: MxRKpTI5dqo
archived: false
url: '#'
heading: CDJ-3000 Introduction video
description: null
footer: >-
<p>Didn’t find what you’re looking for? Maybe use fewer words or a more
general search term.<br>If you still have no luck you can contact our <a
href="/en/support/contact">customer service</a>.</p>
-
Content:
- URL: /components/raw/search-results/news_icon.png
- Filesystem Path: ../src/04_organisms/search-results/news_icon.png
- Size: 1.4 KB
-
Content:
(function() { const selectors = { select: '.search-info__select .select__input', }; const el = {}; const init = function() { getElements(); addEvents(); updateElements(); }; const getElements = () => { el.select = document.querySelectorAll(selectors.select); }; const addEvents = () => { if (el.select) { [...el.select].forEach(select => select.addEventListener('change', e => { updatePage(select.value); })); } }; const updatePage = (i) => { const params = new URLSearchParams(document.location.search); window.location.href = `?q=${params.get('q')}&i=${i}&f=${params.getAll('f').join(',')}&page=1`; }; const updateElements = () => { const params = new URLSearchParams(document.location.search); const i = params.get('i'); if (!i) { return; } if (el.select) { [...el.select].forEach(select => select.value = i); } }; window.addEventListener('DOMContentLoaded', init); }()); - URL: /components/raw/search-results/search-results.js
- Filesystem Path: ../src/04_organisms/search-results/search-results.js
- Size: 1 KB
-
Content:
.search-results { padding: 0 var(--gutter--bucket); } .search-results__inner { max-width: var(--section--5); margin: 0 auto; } .search-results__info { margin-top: var(--gap--10); } .search-results__list { margin-top: var(--gap--4); } .search-results__item { margin-top: var(--gap--4); &:first-child { margin-top: 0; } } .search-results__paging { display: flex; justify-content: center; margin-top: var(--gap--10); @media (min-width: 750px) { margin-top: var(--gap--16); } } .search-results__footer { margin-top: var(--gap--10); @media (min-width: 750px) { margin-top: var(--gap--13); } } - URL: /components/raw/search-results/search-results.scss
- Filesystem Path: ../src/04_organisms/search-results/search-results.scss
- Size: 641 Bytes
- Handle: @search-results
- Preview:
- Filesystem Path: ../src/04_organisms/search-results/search-results.hbs
- References (4): @search-box, @search-info, @snippet-b, @paging
- Referenced by (1): @search-results-page
No notes defined.