<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">

        <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&#x3D;" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width&#x3D;&quot;78&quot; height&#x3D;&quot;78&quot;>
                                </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&#x3D;" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width&#x3D;&quot;78&quot; height&#x3D;&quot;78&quot;>
                                </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 Online Slaapcomfort 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.