<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="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
progress-bar__item--active
">
<div class="progress-bar__line">
<h1 class="progress-bar__label">
Shipping address
</h1>
</div>
</li>
<li class="
progress-bar__item
">
<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">
<li id="shipping" class="checkout-shipping-address shipping-address">
<h2 class="step-title heading shipping-address__label" id="step-title-shipping" translate="'Shipping Address'" data-role="title">
Shipping Address
</h2>
<form class="
form
form-login
shipping-address__form-login
" aria-labelledby="step-title-shipping">
<fieldset id="customer-email-fieldset" class="fieldset">
<div class="field input required">
<label class="label input__label" for="customer-email">
<span>
Email Address
</span>
</label>
<div class="control _with-tooltip">
<input class="
input-text
input__field
valid
" type="email" name="username" id="customer-email">
<span class="note" style="display: none;">
<span>
</span>
</span>
<div class="field-tooltip toggle">
<span class="action-help" tabindex="0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#question-mark"></use>
</svg>
</span>
</div>
</div>
</div>
<!--Hidden fields -->
<fieldset class="fieldset hidden-fields" style="display: block;">
<div class="field input">
<label class="label input__label" for="customer-password">
<span>
Password
</span>
</label>
<div class="control">
<input class="input-text input__field" type="password" name="password" id="customer-password" autocomplete="off">
<span class="note customer-note">
You already have an account with us. Sign in or continue as guest.
</span>
</div>
</div>
<div class="login-buttons shipping-address__login-buttons">
<button class="button action login primary shipping-address__btn-login" type="button" aria-label="button">
Login
</button>
<a class="button action remind shipping-address__btn-remind">
Forgot Your Password?
</a>
</div>
</fieldset>
</fieldset>
</form>
</li>
<div class="checkout-shipping-method shipping-methods">
<div class="step-title shipping-methods__label">
Shipping Methods
</div>
shipping-methods - to migrate from Magento_Checkout module
</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"
>
<div
class="checkout-container"
id="checkout"
>
{{ render '@authentication' }}
{{ render '@progress-bar' }}
{{ render '@estimated-section' }}
<div class="opc-wrapper">
<ol
class="opc"
id="checkout-steps"
>
{{ render '@shipping-address' }}
{{ render '@shipping-methods' }}
</ol>
</div>
{{ render '@sidebar-checkout' }}
</div>
</main>
</div>
{{ render '@footer--checkout' }}
{
"heading": {
"tag": "h1",
"class": "heading--page",
"text": "checkout"
}
}
No notes defined.