<div class="mypage">
<div class="mypage__nav">
<nav class="myPageNav">
<ul class="myPageNav__list">
<li class="myPageNav__item myPageNav__item--main">
<a href="#" class="myPageNav__link myPageNav__link--main">My page top</a>
</li>
<li class="myPageNav__item myPageNav__item--main">
<a href="#" class="myPageNav__link myPageNav__link--main">Account</a>
<ul class="myPageNav__list myPageNav__list--sub">
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Registration information</a>
</li>
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Password management</a>
</li>
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Email reception settings</a>
</li>
</ul>
</li>
<li class="myPageNav__item myPageNav__item--main">
<a href="#" class="myPageNav__link myPageNav__link--main">Hardware</a>
<ul class="myPageNav__list myPageNav__list--sub">
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Product registration</a>
</li>
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
</li>
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">AlphaTheta Care Extended warranty service</a>
</li>
</ul>
</li>
<li class="myPageNav__item myPageNav__item--main myPageNav__item--active">
<a href="#" class="myPageNav__link myPageNav__link--main">Recordbox</a>
<ul class="myPageNav__list myPageNav__list--sub">
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Contract Plan/Purchase History</a>
</li>
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
</li>
<li class="myPageNav__item myPageNav__item--sub">
<a href="#" class="myPageNav__link myPageNav__link--sub">Cloud settings</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="mypage__content">
<section class="mypage__section">
<div class="mypage__heading">
<a href="#" class="mypage__link link link--back link--icon-left">
<span class="link__icon">
<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 class="link__label">Back to rekordbox</span>
</a>
<div class="product-link">
<svg class="icon-info" width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="35" cy="35" r="33.5" fill="#007DE1" stroke="#007DE1" stroke-width="3" />
<path d="M33.3221 50V28.1818H36.6744V50H33.3221ZM35.0266 24.5455C34.3732 24.5455 33.8098 24.3229 33.3363 23.8778C32.8723 23.4328 32.6403 22.8977 32.6403 22.2727C32.6403 21.6477 32.8723 21.1127 33.3363 20.6676C33.8098 20.2225 34.3732 20 35.0266 20C35.68 20 36.2388 20.2225 36.7028 20.6676C37.1763 21.1127 37.413 21.6477 37.413 22.2727C37.413 22.8977 37.1763 23.4328 36.7028 23.8778C36.2388 24.3229 35.68 24.5455 35.0266 24.5455Z" fill="white" />
</svg>
<a href="#" class="mypage__link link link--icon-right">
<span class="link__icon">
<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 class="link__label">More info here</span>
</a>
</div>
</div>
<h1 class="mypage__titlewrap">
<span>Purchase history list</span>
</h1>
</section>
<section class="mypage__section">
<div class="select__wrapper select--filter">
<div class="select select--small">
<select name="filter" class="select__input">
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Lorem ipsum 2">Lorem ipsum 2</option>
<option value="Lorem ipsum 3">Lorem ipsum 3</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="spacer spacer--8"></div>
<div class="mypage__block">
<div class="grid grid--gutter grid--gutter--m--4 grid--m--2">
<div class="grid__inner">
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="grid__item item--hidden">
<div class="grid__item__inner">
<article class="product-purchased product-purchased--atc-small">
<div class="product-purchased__content product-purchased__content--cropped">
<div class="grid grid--three-col">
<div class="grid__col grid__col--fullw">
<div class="col__label">Plan name</div>
<div class="col__content"><strong>Core</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Purchase date</div>
<div class="col__content">Jun 22 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Termination date</div>
<div class="col__content">Jun 22 2022</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="spacer spacer--6"></div>
<div class="load-more hidden">
<a href="#" class="loadmore loadmore--showmore">
<span class="loadmore__icon">
<span class="icon-plus">
<span class="icon-plus__inner"></span>
</span>
</span>
<span class="loadmore__label">Load more products</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div class="mypage">
<div class="mypage__nav">
{{var "activeNav" "Recordbox"}}
{{render '@nav-mypage' this merge=true }}
</div>
<div class="mypage__content">
<section class="mypage__section">
<div class="mypage__heading">
{{ render '@link--icon-left' backlink merge=true }}
<div class="product-link">
{{render '@icon-info' icon merge=true}}
{{render '@link--icon-right' productlink merge=true}}
</div>
</div>
<h1 class="mypage__titlewrap">
<span>Purchase history list</span>
</h1>
</section>
<section class="mypage__section">
<div class="select__wrapper select--filter">
{{render '@select' filter merge=true }}
</div>
<div class="spacer spacer--8"></div>
<div class="mypage__block">
<div class="grid grid--gutter grid--gutter--m--4 grid--m--2">
<div class="grid__inner">
{{#each products }}
<div class="grid__item{{#if class}} {{ class }}{{/if}}">
<div class="grid__item__inner">
{{render '@product-purchased--atc-small' this merge=true }}
</div>
</div>
{{/each}}
</div>
</div>
<div class="spacer spacer--6"></div>
<div class="load-more hidden">
{{ render '@loadmore' loadmore merge=true }}
</div>
</div>
</section>
</div>
</div>
productlink:
label: More info here
class: mypage__link
modifier: false
hardwarelink:
label: See more
class: mypage__link
modifier: false
rekordboxlink:
label: Check/change contract information
class: mypage__link
modifier: false
alphathetacarelink:
label: Check/change contract information
class: mypage__link
modifier: false
registrationinformationlink:
label: See more
class: mypage__link
modifier: false
editlink:
label: Edit
class: mypage__link
modifier: false
backlink:
label: Back to rekordbox
class: mypage__link
modifier: back
registerlink:
label: Register products
modifier: false
loadmore:
label: Load more products
modifier: false
url: '#'
class: showmore
data: null
productregistration:
label: + Product registration
modifier: false
products:
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
- name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
class: item--hidden
filter:
small: true
name: filter
options:
- value: Lorem ipsum
label: Lorem ipsum
- value: Lorem ipsum 2
label: Lorem ipsum 2
- value: Lorem ipsum 3
label: Lorem ipsum 3
No notes defined.