<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.png" alt="Maison 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">
<h1 class="heading--page">
checkout
</h1>
<div id="checkout" class="checkout-container">
<div class="authentication-wrapper authentication">
authentitacion - to migrate from Magento_Checkout module
</div>
<ul class="progress-bar">
<li class="
progress-bar__item
">
<div class="progress-bar__line">
<h1 class="progress-bar__label">
Shipping address
</h1>
</div>
</li>
<li class="
progress-bar__item
progress-bar__item--active
">
<div class="progress-bar__line">
<h1 class="progress-bar__label">
Payment
</h1>
</div>
</li>
</ul>
<div class="opc-estimated-wrapper estimated-section">
<div class="estimated-block estimated-section__price">
<span class="estimated-label">
Estimated Total
</span>
<span class="estimated-price">
$1,000,004.99
</span>
</div>
<div class="minicart-wrapper estimated-section__trigger">
<button type="button" class="estimated-section__trigger-button" aria-label="Shopping cart dropdown trigger">
<svg class="icon estimated-section__icon" role="img">
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
<span class="icon estimated-section__counter"></span>
<svg class="icon estimated-section__icon" role="img">
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
</div>
<div class="opc-wrapper">
<ol id="checkout-steps" class="opc">
<div id="payment" role="presentation" class="checkout-payment-method">
<div class="items payment-methods">
<div class="payment-group">
<div class="payment-methods__heading" data-role="title">
Payment Method
</div>
<div class="payment-method">
<div class="payment-method-title">
<input type="radio" name="payment[method]" class="radio" id="braintree" value="braintree">
<label class="label" for="braintree">
<img class="payment-icon" src="/images/checkout/paypal-logo.png" />
<span>Credit Card (Braintree)</span>
</label>
</div>
<div class="payment-method-content">
content
</div>
</div>
<div class="payment-method">
<div class="payment-method-title">
<input type="radio" name="payment[method]" class="radio" id="checkmo" value="checkmo">
<label class="label" for="checkmo">
<span>Check / Money order</span>
</label>
</div>
<div class="payment-method-content">
content
</div>
</div>
<div class="payment-method">
<div class="payment-method-title">
<input type="radio" name="payment[method]" class="radio" id="cashondelivery" value="cashondelivery">
<label class="label" for="cashondelivery">
<span>Cash On Delivery</span>
</label>
</div>
<div class="payment-method-content">
content
</div>
</div>
<div class="payment-method">
<div class="payment-method-title">
<input type="radio" name="payment[method]" class="radio" id="banktransfer" value="banktransfer">
<label class="label" for="banktransfer">
<span>Bank Transfer Payment</span>
</label>
</div>
<div class="payment-method-content">
content
</div>
</div>
</div>
</div>
</div>
<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>
</ol>
</div>
<aside role="dialog" class="
modal-custom
opc-sidebar
opc-summary-wrapper
custom-slide
sidebar-checkout
" aria-describedby="modal-content-" data-role="modal" data-type="custom" tabindex="0">
<section class="order-summary" aria-labelledby="summary">
<h2 class="order-summary__title" id="summary">
Summary
</h2>
<div class="order-summary__details">
<h3 class="order-summary__subtitle">
Esimate Shipping and Tax
</h3>
<ul class="order-summary__list">
<li class="order-summary__list-item">
<span class="order-summary__label">
Subtotal
</span>
<span class="order-summary__value">
$159.95
</span>
</li>
<li class="order-summary__list-item">
<span class="order-summary__label">
TAX
</span>
<span class="order-summary__value">
$159.95
</span>
</li>
<li>
<hr class="order-summary__divider">
</li>
<li class="order-summary__list-item order-summary__total">
<h3 class="order-summary__title-total">
Order Total
</h3>
<span class="order-summary__amount text-right">
$159.95
</span>
</li>
</ul>
</div>
<div class="order-summary__tab active" data-collapsible="true" role="tablist">
<div class="order-summary__tab-title" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">
<span class="order-summary__tab-text">
1 Item in Cart
</span>
<svg class="icon order-summary__tab-icon" role="img">
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</div>
<div class="content order-summary__products" data-role="content" role="tabpanel" aria-hidden="false" style="display: block;">
<div class="order-summary__product-item">
<div class="lazyload-wrapper order-summary__product-image">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width="78" height="78">
</div>
<div class="order-summary__product-info">
<div class="order-summary__product-details">
<div class="order-summary__product-name">
Simple product oh this is such a loooong name 1
</div>
<div class="order-summary__product-qty">
<span>Quantity</span>:
<span>1</span>
</div>
</div>
<span class="price order-summary__product-price">
$100
</span>
</div>
</div>
<div class="order-summary__product-item">
<div class="lazyload-wrapper order-summary__product-image">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width="78" height="78">
</div>
<div class="order-summary__product-info">
<div class="order-summary__product-details">
<div class="order-summary__product-name">
Simple product oh this is such a loooong name 1
</div>
<div class="order-summary__product-qty">
<span>Quantity</span>:
<span>3</span>
</div>
</div>
<span class="price order-summary__product-price">
$100000
</span>
</div>
</div>
</div>
</div>
</section>
<div class="shipping-information">
<div class="ship-to">
<div class="shipping-information__title">
<span class="shipping-information__title-text">
Ship To:
</span>
<button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
<svg class="icon button__icon" role="img">
<title>Arrow left</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</button>
</div>
<div class="shipping-information__content">
John Doe<br>
ul. Mostowa 11<br>
Poznań, <span>Armed Forces Africa</span> 60-688<br>
United States<br>
<a href="tel:887887887">887887887</a><br>
</div>
</div>
<div>
<div class="shipping-information__title">
<span class="shipping-information__title-text">
Shipping Method:
</span>
<button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
<svg class="icon button__icon" role="img">
<title>Arrow left</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</button>
</div>
<div class="shipping-information__content">
<span class="value">
Free Shipping - Free
</span>
</div>
</div>
</div>
</aside>
</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 snurky 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">
{{ render '@heading' heading }}
<div id="checkout" class="checkout-container">
{{ render '@authentication' }}
{{ render '@progress-bar' progressBar }}
{{ render '@estimated-section' }}
<div class="opc-wrapper">
<ol id="checkout-steps" class="opc">
{{ render '@payment-methods' }}
{{ render '@discount-code' }}
</ol>
</div>
{{ render '@sidebar-checkout' }}
</div>
</main>
</div>
{{ render '@footer--checkout' }}
{
"heading": {
"tag": "h1",
"class": "heading--page",
"text": "checkout"
},
"progressBar": {
"steps": [
{
"label": "Shipping address"
},
{
"label": "Payment",
"active": true
}
]
}
}
There are no notes for this item.