<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">
<h1 class="heading--page">
checkout
</h1>
<div class="checkout-container" id="checkout">
<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 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 href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
</div>
<div class="opc-wrapper">
<ol class="opc" id="checkout-steps">
<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 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">
<h2 class="order-summary__title-total">
Order Total
</h2>
<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 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 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 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 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 }}
<div
class="checkout-container"
id="checkout"
>
{{ render '@authentication' }}
{{ render '@progress-bar' progressBar }}
{{ render '@estimated-section' }}
<div class="opc-wrapper">
<ol
class="opc"
id="checkout-steps"
>
{{ 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
}
]
}
}
No notes defined.