<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.jpg" alt="Zitbal 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">
<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
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 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">
<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 xlink: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">
<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">
<div id="checkout" class="checkout-container">
{{ render '@authentication' }}
{{ render '@progress-bar' }}
{{ render '@estimated-section' }}
<div class="opc-wrapper">
<ol id="checkout-steps" class="opc">
{{ 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"
}
}
There are no notes for this item.