<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">
<div class="dashboard-items ">
<h2 class="dashboard-items__title margin-bottom-sm">
Billing Information
</h2>
<div class="row margin-0">
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle">
Billing Address
</h3>
<div class="">
Arizona, 11-123, United States, T: 232112123
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
<a class="link actions-group__link" href="#" title="Title">
</a>
</div>
</div>
</div>
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle">
Payment Method
</h3>
<div class="">
Check / Money order
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
<a class="link actions-group__link" href="#" title="Title">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-items ">
<h2 class="dashboard-items__title margin-bottom-sm">
Shipping Information
</h2>
<div class="row margin-0">
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle">
Shipping To
</h3>
<div class="">
Arizona, 11-123, United States, T: 232112123
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
<a class="link actions-group__link" href="#" title="Title">
</a>
</div>
</div>
</div>
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle">
Shipping Method
</h3>
<div class="">
Flat Rate (Fixed) $20.00
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
<a class="link actions-group__link" href="#" title="Title">
</a>
</div>
</div>
</div>
</div>
</div>
<table class="table margin-bottom-l table--tfoot-scope-row" 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">
Item
</th>
<th class="" scope="col" role="columnheader">
Price
</th>
<th class="" scope="col" role="columnheader">
Quantity
</th>
<th class="" scope="col" role="columnheader">
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
Simple product with long name 1
</td>
<td class="" data-th="Price:" role="gridcell">
$7.59
</td>
<td class="" data-th="Quantity:" role="gridcell">
2
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$1,99.98
</td>
</tr>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
Simple product with long name 1
</td>
<td class="" data-th="Price:" role="gridcell">
$7.59
</td>
<td class="" data-th="Quantity:" role="gridcell">
2
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$1,99.98
</td>
</tr>
</tbody>
<tfoot>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Subtotal
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Shipping & Handling
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Tax
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Total for this address
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
</tfoot>
</table>
<div class="dashboard-items ">
<h2 class="dashboard-items__title margin-bottom-sm">
Shipping Information
</h2>
<div class="row margin-0">
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle">
Shipping To
</h3>
<div class="">
Arizona, 11-123, United States, T: 232112123
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
<a class="link actions-group__link" href="#" title="Title">
</a>
</div>
</div>
</div>
<div class="dashboard-items__item col-sm-6">
<h3 class="dashboard-items__subtitle">
Shipping Method
</h3>
<div class="">
Flat Rate (Fixed) $20.00
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Title">
Change
</a>
<a class="link actions-group__link" href="#" title="Title">
</a>
</div>
</div>
</div>
</div>
</div>
<table class="table margin-bottom-l table--tfoot-scope-row" 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">
Item
</th>
<th class="" scope="col" role="columnheader">
Price
</th>
<th class="" scope="col" role="columnheader">
Quantity
</th>
<th class="" scope="col" role="columnheader">
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
Simple product with long name 1
</td>
<td class="" data-th="Price:" role="gridcell">
$7.59
</td>
<td class="" data-th="Quantity:" role="gridcell">
2
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$1,99.98
</td>
</tr>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
Simple product with long name 1
</td>
<td class="" data-th="Price:" role="gridcell">
$7.59
</td>
<td class="" data-th="Quantity:" role="gridcell">
2
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$1,99.98
</td>
</tr>
</tbody>
<tfoot>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Subtotal
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Shipping & Handling
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Tax
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
<tr role="row">
<td class="" colspan='3' role="gridcell">
Total for this address
</td>
<td class="" colspan='1' role="gridcell">
$20.00
</td>
</tr>
</tfoot>
</table>
<div class="price margin-bottom-m">
<span class="price__value ">
Grand Total: $
2,035.95
</span>
</div>
<div class="checkbox ">
<input type="checkbox" id="checkbox" name="checkbox-name" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="checkbox" class="checkbox__label ">
<span class="checkbox__text">
I have read and accept the privacy policy
</span>
</label>
</div>
<div class="actions-group margin-vc-m">
<div class="actions-group__handler">
<button class="button actions-group__button" type="button" aria-label="button">
Place Order
</button>
</div>
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Back to Billing Information">
Back to Billing Information
</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 '@dashboard-items' billingAddresses merge=true }}
{{ render '@dashboard-items' shippingAddresses merge=true }}
{{ render '@table' table }}
{{ render '@dashboard-items' shippingAddresses merge=true }}
{{ render '@table' table }}
{{ render '@price' price }}
{{ render '@checkbox' checkbox }}
{{ render '@actions-group' actions }}
</main>
</div>
{{ render '@footer--checkout' }}
{
"billingAddresses": {
"title": {
"tag": "h2",
"class": "dashboard-items__title margin-bottom-sm",
"text": "Billing Information"
},
"informations": [
{
"title": {
"tag": "h3",
"class": "dashboard-items__subtitle",
"text": "Billing Address"
},
"class": "col-sm-6",
"information": "Arizona, 11-123, United States, T: 232112123",
"actions": {
"class": "margin-bottom-l",
"sides": [
{
"class": "",
"action": [
{
"link": {
"text": "Change",
"class": "actions-group__link"
}
},
{
"link": {
"text": "",
"class": "actions-group__link"
}
}
]
}
]
}
},
{
"title": {
"tag": "h3",
"class": "dashboard-items__subtitle",
"text": "Payment Method"
},
"class": "col-sm-6",
"information": "Check / Money order",
"actions": {
"class": "margin-bottom-l",
"sides": [
{
"class": "",
"action": [
{
"link": {
"text": "Change",
"class": "actions-group__link"
}
},
{
"link": {
"text": "",
"class": "actions-group__link"
}
}
]
}
]
}
}
]
},
"shippingAddresses": {
"title": {
"tag": "h2",
"class": "dashboard-items__title margin-bottom-sm",
"text": "Shipping Information"
},
"informations": [
{
"title": {
"tag": "h3",
"class": "dashboard-items__subtitle",
"text": "Shipping To"
},
"class": "col-sm-6",
"information": "Arizona, 11-123, United States, T: 232112123",
"actions": {
"class": "margin-bottom-l",
"sides": [
{
"class": "",
"action": [
{
"link": {
"text": "Change",
"class": "actions-group__link"
}
},
{
"link": {
"text": "",
"class": "actions-group__link"
}
}
]
}
]
}
},
{
"title": {
"tag": "h3",
"class": "dashboard-items__subtitle",
"text": "Shipping Method"
},
"class": "col-sm-6",
"information": "Flat Rate (Fixed) $20.00",
"actions": {
"class": "margin-bottom-l",
"sides": [
{
"class": "",
"action": [
{
"link": {
"text": "Change",
"class": "actions-group__link"
}
},
{
"link": {
"text": "",
"class": "actions-group__link"
}
}
]
}
]
}
}
]
},
"table": {
"class": "margin-bottom-l table--tfoot-scope-row",
"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",
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"content": "Item",
"childTagAttributes": "scope=\"col\" role=\"columnheader\""
},
{
"childTag": "th",
"content": "Price",
"childTagAttributes": "scope=\"col\" role=\"columnheader\""
},
{
"childTag": "th",
"content": "Quantity",
"childTagAttributes": "scope=\"col\" role=\"columnheader\""
},
{
"childTag": "th",
"content": "Subtotal",
"childTagAttributes": "scope=\"col\" role=\"columnheader\""
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Item:\" role=\"gridcell\"",
"content": "Simple product with long name 1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
"content": "$7.59"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Quantity:\" role=\"gridcell\"",
"content": "2"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
"content": "$1,99.98"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Item:\" role=\"gridcell\"",
"content": "Simple product with long name 1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
"content": "$7.59"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Quantity:\" role=\"gridcell\"",
"content": "2"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
"content": "$1,99.98"
}
]
}
]
},
{
"mainTag": "tfoot",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"content": "Subtotal",
"childTagAttributes": "colspan='3' role=\"gridcell\""
},
{
"childTag": "td",
"content": "$20.00",
"childTagAttributes": "colspan='1' role=\"gridcell\""
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"content": "Shipping & Handling",
"childTagAttributes": "colspan='3' role=\"gridcell\""
},
{
"childTag": "td",
"content": "$20.00",
"childTagAttributes": "colspan='1' role=\"gridcell\""
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"content": "Tax",
"childTagAttributes": "colspan='3' role=\"gridcell\""
},
{
"childTag": "td",
"content": "$20.00",
"childTagAttributes": "colspan='1' role=\"gridcell\""
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"content": "Total for this address",
"childTagAttributes": "colspan='3' role=\"gridcell\""
},
{
"childTag": "td",
"content": "$20.00",
"childTagAttributes": "colspan='1' role=\"gridcell\""
}
]
}
]
}
]
},
"checkbox": {
"id": "checkbox",
"name": "checkbox-name",
"attributes": "",
"label": {
"text": "I have read and accept the privacy policy",
"class": ""
}
},
"grandTotalLabel": "Grand Total:",
"price": {
"class": "margin-bottom-m",
"regularPrice": "2,035.95",
"specialPrice": "",
"prefix": {
"tag": "",
"text": "Grand Total: $"
}
},
"actions": {
"class": "margin-vc-m",
"sides": [
{
"action": [
{
"button": {
"text": "Place Order",
"class": "actions-group__button"
}
}
]
},
{
"action": [
{
"link": {
"text": "Back to Billing Information",
"title": "Back to Billing Information",
"class": "actions-group__link"
}
}
]
}
]
}
}
No notes defined.