<div class="page-wrapper">
<header class="header header--checkout">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="/components/preview/home" aria-label="Homepage">
<img
class="logo__image "
src="/images/logo/logo_cruc.jpeg"
alt="Cruc Logo"
>
</a>
<div class="header__buttons">
<div class="header__icon">
<a class="
header-button
button
button--icon
button--icon-light
" href="#" aria-label="cartLink">
<svg
class="icon header-button__icon"
role="img"
>
<title>cart link</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
<span class="header-button__label"></span>
</a>
</div>
</div>
</div>
</div>
</header>
<main id="maincontent" class="page-main container">
<div class="block-shipping margin-bottom-m">
<div class="dashboard-items ">
<div class="dashboard-table__header">
<h2 class="dashboard-table__title">
Address 1 of 1
</h2>
<a class="link dashboard-table__link" href="" title="Manage Addresses">
Manage Addresses
</a>
</div>
<div class="row margin-0">
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle margin-bottom-l">
Shipping to
</h3>
<div class="">
qweqwe qwe 136 N. Bay Road
</div>
<div class="actions-group ">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
</div>
</div>
</div>
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle margin-bottom-l">
Shipping Method
</h3>
<div class="radio ">
<fieldset class="fieldset Flat Rate" aria-labelledby="legend-id">
<legend class="radio__legend " id="legend-id">
Choose option
</legend>
<div class="radio__handler">
<input type="radio" id="id1" name="radio1" class="radio__field">
<label for="id1" class="radio__label">
<span class="radio__text">
Option one
</span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div class="dashboard-table ">
<div class="dashboard-table__content">
<table class="table margin-0" tabindex="0" role="table">
<caption class="table__caption">
This sis a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
</caption>
<thead>
<tr role="row">
<th class="" scope="col" role="columnheader">
Product Name
</th>
<th class="" scope="col" role="columnheader">
Qty
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Product Name:" role="gridcell">
<a href="#">Simple product with long name 1</a>
</td>
<td class="" data-th="Qty:" role="gridcell">
2
</td>
</tr>
<tr role="row">
<td class="" data-th="Product Name:" role="gridcell">
<a href="#">Simple product with long name 1</a>
</td>
<td class="" data-th="Qty:" role="gridcell">
3
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="actions-group ">
<div class="actions-group__handler">
<button class="button actions-group__button" type="button" aria-label="button">
Continue To Billing Information
</button>
</div>
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Back to Select Addresses">
Back to Select Addresses
</a>
</div>
</div>
</main>
</div>
<footer>
<div class="footer-top margin-top-xl footer--checkout">
<div class="newsletter__footer ">
<div class="newsletter__content">
<div class="newsletter__footer--heading ">
<h2 class="newsletter__footer--title">
Wil je 10% korting op je volgende bestelling?
</h2>
<p class="newsletter__footer--subtitle">
Meld je nu aan voor de nieuwsbrief van cruc en ontvang 10% korting op je volgende aankoop.
</p>
</div>
<form class="newsletter__form newsletter__footer--form">
<div class="newsletter__footer--fields">
<div class="control">
<label for="newsletter">
<span class="label">Abonneer u op onze nieuwsbrief</span>
<div class="input newsletter__input" >
<label
class="
label
input__label
label--hidden
newsletter__label
"
for="newsletterEmail"
>
Email for newsletter subscription
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
</div>
</label>
<div class="newsletter__footer--agreements">
<div class="checkbox newsletter__footer--checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
<a href="#" title="Privacy Policy">Privacy Policy</a>
</span>
</label>
</div>
</div>
</div>
</div>
<div class="newsletter__footer--button">
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
</form>
</div>
</div>
</div>
<div class="footer-center">
<div class="contact-bar__footer container">
<div class="row">
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
<span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Stuur een mail</span>
<span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Via Facebook</span>
<span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#chat"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Via de Chat</span>
<span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer margin-top-xl footer--checkout">
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
German
<svg
class="icon dropdown-list__icon"
aria-hidden="true"
role="img"
>
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
USD - US Dollar
<svg
class="icon dropdown-list__icon"
aria-hidden="true"
role="img"
>
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('currency-dropdown'));
</script>
</div>
</div>
</section>
</div>
</footer>
<div class="page-wrapper">
{{ render '@header--checkout' }}
<main id="maincontent" class="page-main container">
<div class="block-shipping {{ shippingClass }}">
{{ render '@dashboard-items' addresses merge=true }}
{{ render '@dashboard-table' table }}
</div>
{{ render '@actions-group' actions }}
</main>
</div>
{{ render '@footer--checkout' }}
{
"shippingClass": "margin-bottom-m",
"addresses": {
"title": {
"tag": "h2",
"class": "dashboard-table__title",
"text": "Address 1 of 1"
},
"link": {
"text": "Manage Addresses",
"class": "dashboard-table__link"
},
"informations": [
{
"title": {
"tag": "h3",
"class": "dashboard-items__subtitle margin-bottom-l",
"text": "Shipping to"
},
"class": "col-sm-6",
"information": "qweqwe qwe 136 N. Bay Road",
"actions": {
"sides": [
{
"action": [
{
"link": {
"text": "Change",
"class": "actions-group__link"
}
}
]
}
]
}
},
{
"title": {
"tag": "h3",
"class": "dashboard-items__subtitle margin-bottom-l",
"text": "Shipping Method"
},
"class": "col-sm-6",
"contentComponent": "radio",
"contentContext": {
"name": "radio1",
"legendClass": "",
"fieldsetClass": "Flat Rate",
"legend": "Choose option",
"legendId": "legend-id",
"options": [
{
"id": "id1",
"label": "Option one"
}
]
}
}
]
},
"table": {
"table": {
"captionText": "This sis a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
"class": "margin-0",
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Product Name"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Qty"
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\" role=\"gridcell\"",
"content": "<a href=\"#\">Simple product with long name 1</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"content": "2"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\" role=\"gridcell\"",
"content": "<a href=\"#\">Simple product with long name 1</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"content": "3"
}
]
}
]
}
]
}
},
"actions": {
"sides": [
{
"action": [
{
"button": {
"text": "Continue To Billing Information",
"class": "actions-group__button"
}
}
]
},
{
"action": [
{
"link": {
"text": "Back to Select Addresses",
"title": "Back to Select Addresses",
"class": "actions-group__link"
}
}
]
}
]
}
}
There are no notes for this item.