<div class="page-wrapper">
<header class="header header--checkout">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
<div class="header__buttons">
<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 href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</a>
</div>
</div>
</div>
</header>
<main class="page-main container" id="maincontent">
<p class="title">
Please select a shipping address for applicable items.
</p>
<div class="dashboard-table ">
<div class="dashboard-table__content">
<table class="table margin-0" tabindex="0" role="table">
<caption class="table__caption">
This is 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
</th>
<th class="" scope="col" role="columnheader">
Qty
</th>
<th class="" scope="col" role="columnheader">
Send To
</th>
<th class="" scope="col" role="columnheader">
<span class="table__visually-hidden">
Action
</span>
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Product:" role="gridcell">
<a href="#">Simple product with long name 1</a>
</td>
<td class="" data-th="Qty:" role="gridcell">
<div class="
qty
input
">
<label for="qty" class="
label
input__label
">
Qty
</label>
<div class="quantity-update quantity-update--no-buttons-m">
<button class="button button--icon quantity-update__button quantity-update__button--minus" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#minus"></use>
</svg>
</button>
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
</td>
<td class="" data-th="Send To:" role="gridcell">
<div class="select ">
<label class="
label
" for="select-1">
Send To
</label>
<select id="select-1" class="select__field " name="">
<option class="" value="Option 1">
Option 1
</option>
<option class="" value="Option 2">
Option 2
</option>
<option class="" value="Option 3">
Option 3
</option>
</select>
</div>
</td>
<td class="" data-th="Action:" role="gridcell">
<div class="actions-group">
<div class="actions-group__handler"><a href="#" class="actions-group__button actions-group__link">Remove item</a></div>
</div>
</td>
</tr>
<tr role="row">
<td class="" data-th="Product:" role="gridcell">
<a href="#">Simple product with long name 1</a>
</td>
<td class="" data-th="Qty:" role="gridcell">
<div class="
qty
input
">
<label for="qty" class="
label
input__label
">
Qty
</label>
<div class="quantity-update quantity-update--no-buttons-m">
<button class="button button--icon quantity-update__button quantity-update__button--minus" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#minus"></use>
</svg>
</button>
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
<use href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
</td>
<td class="" data-th="Send To:" role="gridcell">
<div class="select ">
<label class="
label
" for="select-2">
Send To
</label>
<select id="select-2" class="select__field " name="">
<option class="" value="Option 1">
Option 1
</option>
<option class="" value="Option 2">
Option 2
</option>
<option class="" value="Option 3">
Option 3
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
</td>
<td class="" data-th="Action:" role="gridcell">
<div class="actions-group">
<div class="actions-group__handler"><a href="#" class="actions-group__button actions-group__link">Remove item</a></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="actions-group ">
<div class="actions-group__handler">
<button class="button actions-group__button" type="button" aria-label="button">
Go To Shipping Information
</button>
<button class="button button--secondary actions-group__button" type="button" aria-label="button">
Update Qty & Addresses
</button>
<button class="button button--secondary actions-group__button" type="button" aria-label="button">
Enter A New Address
</button>
</div>
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Back to Shopping Cart">
Back to Shopping Cart
</a>
</div>
</div>
</main>
</div>
<footer 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>
<ul class="
footer__payments-list
list
list--horizontal
">
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
</ul>
<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 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 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>
</footer>
<div class="page-wrapper">
{{ render '@header--checkout' }}
<main
class="page-main container"
id="maincontent"
>
{{ render '@heading' heading }}
{{ render '@dashboard-table' table }}
{{ render '@actions-group' actions }}
</main>
</div>
{{ render '@footer--checkout' }}
{
"heading": {
"tag": "p",
"class": "title",
"text": "Please select a shipping address for applicable items."
},
"table": {
"table": {
"captionText": "This is 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"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Qty"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Send To"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Action",
"contentVisuallyHidden": true
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product:\" role=\"gridcell\"",
"content": "<a href=\"#\">Simple product with long name 1</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"contentComponent": "quantity-update--full",
"contentContext": {
"class": "quantity-update--no-buttons-m",
"qtyClass": "input",
"qtyLabel": "Qty",
"input": {
"id": "qty",
"min": "1",
"name": "qty",
"defaultValue": "1",
"ariaLabel": "Change the quantity"
},
"minusQtyButton": {
"tag": "button",
"class": "quantity-update__button quantity-update__button--minus",
"attributes": "type=\"button\" aria-label=\"Decrease the quantity\"",
"icon": {
"id": "minus",
"class": "button__icon quantity-update__icon",
"hidden": true
}
},
"plusQtyButton": {
"tag": "button",
"class": "quantity-update__button quantity-update__button--plus",
"attributes": "type=\"button\" aria-label=\"Increase the quantity\"",
"icon": {
"id": "plus",
"class": "button__icon quantity-update__icon",
"hidden": true
}
}
}
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Send To:\" role=\"gridcell\"",
"contentComponent": "select",
"contentContext": {
"field": {
"id": "select-1"
},
"label": {
"text": "Send To"
},
"options": [
{
"text": "Option 1",
"value": "Option 1"
},
{
"text": "Option 2",
"value": "Option 2"
},
{
"text": "Option 3",
"value": "Option 3"
}
]
}
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<div class=\"actions-group\"><div class=\"actions-group__handler\"><a href=\"#\" class=\"actions-group__button actions-group__link\">Remove item</a></div></div>"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product:\" role=\"gridcell\"",
"content": "<a href=\"#\">Simple product with long name 1</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"contentComponent": "quantity-update--full",
"contentContext": {
"class": "quantity-update--no-buttons-m",
"qtyClass": "input",
"qtyLabel": "Qty",
"input": {
"id": "qty",
"min": "1",
"name": "qty",
"defaultValue": "1",
"ariaLabel": "Change the quantity"
},
"minusQtyButton": {
"tag": "button",
"class": "quantity-update__button quantity-update__button--minus",
"attributes": "type=\"button\" aria-label=\"Decrease the quantity\"",
"icon": {
"id": "minus",
"class": "button__icon quantity-update__icon",
"hidden": true
}
},
"plusQtyButton": {
"tag": "button",
"class": "quantity-update__button quantity-update__button--plus",
"attributes": "type=\"button\" aria-label=\"Increase the quantity\"",
"icon": {
"id": "plus",
"class": "button__icon quantity-update__icon",
"hidden": true
}
}
}
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Send To:\" role=\"gridcell\"",
"contentComponent": "select",
"contentContext": {
"field": {
"id": "select-2"
},
"script": true,
"label": {
"text": "Send To"
},
"options": [
{
"text": "Option 1",
"value": "Option 1"
},
{
"text": "Option 2",
"value": "Option 2"
},
{
"text": "Option 3",
"value": "Option 3"
}
]
}
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<div class=\"actions-group\"><div class=\"actions-group__handler\"><a href=\"#\" class=\"actions-group__button actions-group__link\">Remove item</a></div></div>"
}
]
}
]
}
]
}
},
"actions": {
"sides": [
{
"action": [
{
"button": {
"text": "Go To Shipping Information",
"class": "actions-group__button"
}
},
{
"button": {
"text": "Update Qty & Addresses",
"class": "button--secondary actions-group__button"
}
},
{
"button": {
"text": "Enter A New Address",
"class": "button--secondary actions-group__button"
}
}
]
},
{
"action": [
{
"link": {
"text": "Back to Shopping Cart",
"title": "Back to Shopping Cart",
"class": "actions-group__link"
}
}
]
}
]
}
}
No notes defined.