<div class="page-wrapper">
<header class="header ">
<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.svg" alt="Solarwood Logo">
</a>
<div class="header__buttons">
<div class="header__switchers">
<div id="dropdown-default" class="dropdown-list dropdown-list--detailed-content">
<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-content">
dropdown title
<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-content" 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('dropdown-default'));
</script>
</div>
<div class="side-menu ">
<button class="button button--icon modal-trigger button--rotate-icon side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
<svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
<title>Mobile-menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
<div role="document" class="modal__container side-menu__container" tabindex="0">
<div class="modal__content side-menu__content">
<div class="modal__middle side-menu__content-middle">
<div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
dropdown title
<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>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<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-1-1">
Item name
<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-1-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<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-1-2">
sublist item name
<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-1-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
Item name
<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-2-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
dropdown title
<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-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
dropdown title
<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-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<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-3-1">
Item name
<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-3-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
Item name
<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-3-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
Item name
<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-3-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
item name
<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-3-4" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
<div class="modal__bottom side-menu__content-bottom">
<div class="modal__bottom-actions side-menu__bottom-actions">
<div class="
modal__bottom-action
side-menu__bottom-action
">
<div class="contact-bar contact-bar--vertical">
<div class="contact-bar__container ">
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Klantenservice
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Groothandel
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:+31858772604" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
T: 085 - 877 26 04
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:info@solarwood.nl" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
E-mail
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
</script>
</div>
<svg class="icon octagon" role="presentation" focusable="false">
<title>octagon</title>
<use xlink:href="/images/icons-sprite.svg#octagon"></use>
</svg>
</div>
</div>
</div>
</header>
<main id="maincontent" class="page-main container">
<h1 class="heading--page">
Review order
</h1>
<div class="paypal-review">
<div class="
payapal-review__details
margin-bottom-m
block-order-details-view
">
<div class="block-content row">
<div class="
payapal-review__details-item
col-lg-4
margin-right-auto
margin-bottom-m
">
<form class="form">
<div class="select select--native">
<label class="
label
" for="field-id">
Shipping Method
</label>
<select id="field-id" class="select__field " name="field-name">
<option class="" value="option1">
Option 1
</option>
<option class="" value="option2">
Option 2
</option>
<option class="" value="option3" disabled>
Option 3
</option>
</select>
</div>
</form>
</div>
<div class="
payapal-review__details-item
col-lg-3
margin-bottom-m
box-order-shipping-address
">
<h2 class="heading--third-level">
Shipping Address
</h2>
<address>
John Doe<br> ul. Mostowa 11<br> Poznań, Armed Forces Africa 60-688<br> United States<br> <a href="tel:887887887"> 887887887 </a>
</address>
<div class="actions-group actions-toolbar">
<div class="actions-group__handler">
<a class="link actions-group__link padding-top-xs" href="#" title="Title">
Edit
</a>
</div>
</div>
</div>
<div class="
payapal-review__details-item
col-lg-3
margin-bottom-m
box-order-billing-address
">
<h2 class="heading--third-level">
Payment method
</h2>
<div class="box-content">
PayPal<br> qwe@qwe.com
</div>
<div class="actions-group actions-toolbar">
<div class="actions-group__handler">
<a class="link actions-group__link padding-top-xs" href="#" title="Title">
Edit Payment Information
</a>
</div>
</div>
</div>
</div>
</div>
<div class="
payapal-review__discount
row
margin-bottom-xl
paypal-review-discount
">
<div class="col-lg-5">
<div class="discount-code">
<button class="discount-code__button" type="button">
<span class="discount-code__button-text">
Discount
</span>
<svg class="icon discount-code__button-icon" role="img">
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div class="discount-code__content"></div>
</div>
</div>
</div>
<div class="payapal-review__shopping-cart paypal-review-items">
<h2 class="heading--third-level">
Items in your shopping cart
</h2>
<div class="actions-group actions-toolbar">
<div class="actions-group__handler">
<a class="link actions-group__link padding-top-0" href="#" title="Title">
Edit Shopping Cart
</a>
</div>
</div>
<div class="table-wrapper order-items">
<table class="table " tabindex="0" role="table">
<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">
Qty
</th>
<th class="" scope="col" role="columnheader">
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
<div class="row middle-sm"><img class="paypal-review__product-image lazyload margin-right-m" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-160_240.jpg" alt="Image of product Bluzka 'ONLSANSA SINGLET WVN'">
<div class="paypal-review__product-details"><span class="paypal-review__product-name">Bluzka 'ONLSANSA SINGLET WVN'</span></div>
</div>
</td>
<td class="" data-th="Price:" role="gridcell">
$159.95
</td>
<td class="" data-th="Qty:" role="gridcell">
1
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$159.95
</td>
</tr>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
<div class="row middle-sm"><img class="paypal-review__product-image lazyload margin-right-m" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-160_240.jpg" alt="Image of product Bluzka 'ONLSANSA SINGLET WVN'"><span class="paypal-review__product-name">Bluzka 'ONLSANSA SINGLET WVN'</span></div>
</td>
<td class="" data-th="Price:" role="gridcell">
$159.95
</td>
<td class="" data-th="Qty:" role="gridcell">
1
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$159.95
</td>
</tr>
<tr role="row">
<td class="" data-th="Item:" role="gridcell">
<div class="row middle-sm"><img class="paypal-review__product-image lazyload margin-right-m" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-160_240.jpg" alt="Image of product Bluzka 'ONLSANSA SINGLET WVN'"><span class="paypal-review__product-name">Bluzka 'ONLSANSA SINGLET WVN'</span></div>
</td>
<td class="" data-th="Price:" role="gridcell">
$159.95
</td>
<td class="" data-th="Qty:" role="gridcell">
1
</td>
<td class="" data-th="Subtotal:" role="gridcell">
$159.95
</td>
</tr>
</tbody>
<tfoot>
<tr role="row">
<th class="" colspan='3' role="rowheader" scope="row">
Subtotal
</th>
<td class="" data-th="Subtotal:" role="gridcell">
$480
</td>
</tr>
<tr role="row">
<th class="" colspan='3' role="rowheader" scope="row">
Shipping & Handling (Expedited Shipping - UPS Worldwide Expedited)
</th>
<td class="" data-th="Shipping & Handling (Expedited Shipping - UPS Worldwide Expedited):" role="gridcell">
$0.00
</td>
</tr>
<tr role="row">
<th class="" colspan='3' role="rowheader" scope="row">
Tax
</th>
<td class="" data-th="Tax:" role="gridcell">
$0.00
</td>
</tr>
<tr role="row">
<th class="" colspan='3' role="rowheader" scope="row">
Grand Total
</th>
<td class="" data-th="Grand Total:" role="gridcell">
$480
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<form class="form order-review-form">
<div class="actions-toolbar">
<button class="button button--fluid margin-top-m" type="submit">
Place order
</button>
</div>
</form>
</div>
</main>
</div>
<footer>
<div class="footer-top margin-top-xl">
<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 solarwood 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">
<div class="footer__handler container">
<button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
<svg class="icon " role="presentation" focusable="false">
<title>Scroll to top</title>
<use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
</button>
<section class="footer__links">
<div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
Customers
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign in">
Login to My Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign up">
Create an Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Orders">
My Orders
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Cart">
My Cart
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Checkout">
Checkout
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
Information
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Hours">
Hours
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="About Us">
About Us
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Contact Us">
Contact Us
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Job Openings">
Job Openings
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Returns">
Returns
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Shipping">
Shipping
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 3
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Privacy Policy">
Privacy Policy
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Terms & Conditions">
Terms & Conditions
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Site Map">
Site Map
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 4
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Reviews">
Reviews
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Email Us!">
Email Us!
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-footer'));
</script>
</section>
<div class="footer__social-handler ">
<h3 class="footer__social-list-title">
Let's get social!
</h3>
<ul class="list list--with-icon list--horizontal footer__social-list">
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
<svg class="icon footer__social-icon" role="img">
<title>Facebook logo</title>
<use xlink:href="/images/icons-sprite.svg#facebook"></use>
</svg>
</a>
</li>
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
<svg class="icon footer__social-icon" role="img">
<title>Twitter logo</title>
<use xlink:href="/images/icons-sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__payments">
<ul class="footer__payments-list list list--horizontal ">
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>AfterPay</title>
<use xlink:href="/images/icons-sprite.svg#afterpay"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>iDEAL</title>
<use xlink:href="/images/icons-sprite.svg#ideal"></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 xlink:href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use xlink: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--visa" role="img">
<title>Visa</title>
<use xlink:href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
</ul>
</div>
</div>
<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 class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
<a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<button class="
button
button--icon
cookie-message__close
cookie-message__button
button--rotate-icon
" type="button" aria-label="Close cookie message">
<svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
</div>
</footer>
<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
{{ render '@header' }}
<main
id="maincontent"
class="page-main container"
>
{{ render '@heading' heading }}
<div class="paypal-review">
<div
class="
payapal-review__details
margin-bottom-m
block-order-details-view
"
>
<div class="block-content row">
<div
class="
payapal-review__details-item
col-lg-4
margin-right-auto
margin-bottom-m
"
>
<form class="form">
{{ render '@select--native' shippingMethodSelect merge=true }}
</form>
</div>
<div
class="
payapal-review__details-item
col-lg-3
margin-bottom-m
box-order-shipping-address
"
>
{{ render '@heading' shippingAddress.title }}
<address>
{{{ shippingAddress.details }}}
</address>
{{ render '@actions-group' shippingAddress.actions }}
</div>
<div
class="
payapal-review__details-item
col-lg-3
margin-bottom-m
box-order-billing-address
"
>
{{ render '@heading' paymentMethod.title }}
<div class="box-content">
{{{ paymentMethod.details }}}
</div>
{{ render '@actions-group' paymentMethod.actions }}
</div>
</div>
</div>
<div
class="
payapal-review__discount
row
margin-bottom-xl
paypal-review-discount
"
>
<div class="col-lg-5">
{{ render '@discount-code' }}
</div>
</div>
<div class="payapal-review__shopping-cart paypal-review-items">
{{ render '@heading' shoppingCart.title }}
{{ render '@actions-group' shoppingCart.actions }}
<div class="table-wrapper order-items">
{{ render '@table' table }}
</div>
</div>
<form class="form order-review-form">
<div class="actions-toolbar">
{{ render '@button' submitBtn }}
</div>
</form>
</div>
</main>
</div>
{{ render '@footer' }}
{
"heading": {
"tag": "h1",
"class": "heading--page",
"text": "Review order"
},
"shippingMethodSelect": {
"class": "select--native",
"label": {
"attributes": "",
"text": "Shipping Method"
}
},
"shippingAddress": {
"title": {
"tag": "h2",
"class": "heading--third-level",
"text": "Shipping Address"
},
"details": "John Doe<br> ul. Mostowa 11<br> Poznań, Armed Forces Africa 60-688<br> United States<br> <a href=\"tel:887887887\"> 887887887 </a>",
"actions": {
"class": "actions-toolbar",
"sides": [
{
"action": [
{
"link": {
"text": "Edit",
"class": "actions-group__link padding-top-xs"
}
}
]
}
]
}
},
"paymentMethod": {
"title": {
"tag": "h2",
"class": "heading--third-level",
"text": "Payment method"
},
"details": "PayPal<br> qwe@qwe.com",
"actions": {
"class": "actions-toolbar",
"sides": [
{
"action": [
{
"link": {
"text": "Edit Payment Information",
"class": "actions-group__link padding-top-xs"
}
}
]
}
]
}
},
"shoppingCart": {
"title": {
"tag": "h2",
"class": "heading--third-level",
"text": "Items in your shopping cart"
},
"actions": {
"class": "actions-toolbar",
"sides": [
{
"action": [
{
"link": {
"text": "Edit Shopping Cart",
"class": "actions-group__link padding-top-0"
}
}
]
}
]
}
},
"table": {
"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": "Qty",
"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": "<div class=\"row middle-sm\"><img class=\"paypal-review__product-image lazyload margin-right-m\" src=\"data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=\" data-src=\"/images/product/product-160_240.jpg\" alt=\"Image of product Bluzka 'ONLSANSA SINGLET WVN'\"><div class=\"paypal-review__product-details\"><span class=\"paypal-review__product-name\">Bluzka 'ONLSANSA SINGLET WVN'</span></div></div>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
"content": "$159.95"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"content": "1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
"content": "$159.95"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Item:\" role=\"gridcell\"",
"content": "<div class=\"row middle-sm\"><img class=\"paypal-review__product-image lazyload margin-right-m\" src=\"data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=\" data-src=\"/images/product/product-160_240.jpg\" alt=\"Image of product Bluzka 'ONLSANSA SINGLET WVN'\"><span class=\"paypal-review__product-name\">Bluzka 'ONLSANSA SINGLET WVN'</span></div>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
"content": "$159.95"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"content": "1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
"content": "$159.95"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Item:\" role=\"gridcell\"",
"content": "<div class=\"row middle-sm\"><img class=\"paypal-review__product-image lazyload margin-right-m\" src=\"data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=\" data-src=\"/images/product/product-160_240.jpg\" alt=\"Image of product Bluzka 'ONLSANSA SINGLET WVN'\"><span class=\"paypal-review__product-name\">Bluzka 'ONLSANSA SINGLET WVN'</span></div>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
"content": "$159.95"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
"content": "1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
"content": "$159.95"
}
]
}
]
},
{
"mainTag": "tfoot",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"content": "Subtotal",
"childTagAttributes": "colspan='3' role=\"rowheader\" scope=\"row\""
},
{
"childTag": "td",
"content": "$480",
"childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\""
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"content": "Shipping & Handling (Expedited Shipping - UPS Worldwide Expedited)",
"childTagAttributes": "colspan='3' role=\"rowheader\" scope=\"row\""
},
{
"childTag": "td",
"content": "$0.00",
"childTagAttributes": "data-th=\"Shipping & Handling (Expedited Shipping - UPS Worldwide Expedited):\" role=\"gridcell\""
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"content": "Tax",
"childTagAttributes": "colspan='3' role=\"rowheader\" scope=\"row\""
},
{
"childTag": "td",
"content": "$0.00",
"childTagAttributes": "data-th=\"Tax:\" role=\"gridcell\""
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"content": "Grand Total",
"childTagAttributes": "colspan='3' role=\"rowheader\" scope=\"row\""
},
{
"childTag": "td",
"content": "$480",
"childTagAttributes": "data-th=\"Grand Total:\" role=\"gridcell\""
}
]
}
]
}
]
},
"submitBtn": {
"tag": "button",
"text": "Place order",
"class": "button--fluid margin-top-m",
"attributes": "type=\"submit\""
}
}
$paypal-review__product-image-width: 80px !default;
.paypal-review {
&__product-image {
width: $paypal-review__product-image-width;
}
}
There are no notes for this item.