Amasty Quote

<div class="page-wrapper">
    <div class="header__top">
        <a href="#maincontent" class="skip-nav ">
            Skip to content </a>

        <header class="header " style="position: absolute">
            <div class="container">
                <div class="header__wrapper">

                    <a class="logo header__logo" href="/" aria-label="Solarwood">
                        <img class="logo__image" alt="Solarwood" src="/images/logo/logo.svg" />
                    </a>

                    <div class="side-menu">
                        <button class="
                button
                button--icon
                button--icon-light
                modal-trigger
                side-menu__trigger
            " type="button" data-modal-trigger="side-menu" aria-label="Open menu">
                            <svg class="
                    icon
                    side-menu__trigger-icon
                " role="presentation" focusable="false">
                                <use href="//images/icons-sprite.svg#mobile-menu"></use>
                            </svg>
                        </button>

                        <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="
                modal
                modal--tertiary
                side-menu__modal
            ">
                            <div role="document" class="
                    modal__container
                    side-menu__container
                " tabindex="0">
                                <div class="
                        modal__content
                        side-menu__content
                    ">
                                    <div class="
                            modal__middle
                            side-menu__content-middle
                        ">
                                        <nav id="dropdown-default" class="
                                dropdown-list
                                dropdown-list--with-nested
                                dropdown-list                            ">
                                            <ul class="
                                    dropdown-list__list
                                    dropdown-list__list
                                ">
                                            </ul>
                                        </nav>
                                    </div>

                                </div>
                                <button class="
                        button
                        button--icon
                        button--rotate-icon
                        modal__close-button
                        side-menu__close-button
                    " type="button" aria-label="Click to close the modal">
                                    <svg class="
                            icon
                            button__icon
                            modal__close-button-icon
                        " role="presentation" focusable="false">
                                        <use href="//images/icons-sprite.svg#close"></use>
                                    </svg>
                                    <span class="side-menu__close-button-text">
                                        Menu </span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </header>

        <div class="container">
            <h1 class="
            heading
            heading--page
                    " data-ui-id="page-title-wrapper">
                Quote Cart </h1>
        </div>
    </div>
    <main id="maincontent" class="page-main container">
        <div class="page messages">
            <div data-placeholder="messages"></div>
            <div data-bind="scope: 'messages'" class="messages__wrap aos-init" aria-live="assertive" data-aos="fade-down" data-aos-anchor=".header" data-aos-anchor-placement="bottom-top">
                <div>
                    <div data-bind="foreach: { data: cookieMessages, as: 'message' }, visible: isVisible()" class="messages"></div>
                </div>
                <div>
                    <div data-bind="foreach: { data: messages().messages, as: 'message' }, visible: isVisible()" class="messages"></div>
                </div>
            </div>

        </div>
        <div class="columns">
            <div class="column main"><input name="form_key" type="hidden" value="w6PqW0hG6Uuq4Cuw">

                <div class="cart-container">
                    <div class="cart-summary amquote-cart-summary"><strong class="summary title">Quote Summary</strong>
                        <div id="cart-totals" data-bind="scope:'block-totals'">
                            <!-- ko template: getTemplate() -->
                            <ul class="order-summary__list" data-bind="blockLoader: isLoading">
                                <!-- ko foreach: elems() -->
                                <!-- ko template: getTemplate() -->
                                <tr class="totals sub">
                                    <th class="mark" colspan="1" scope="row" data-bind="i18n: title">Subtotaal</th>
                                    <td class="amount" data-th="Subtotal">
                                        <span class="price" data-bind="text: getValue()">€&nbsp;1.398,00</span>
                                    </td>
                                </tr>
                                <!-- /ko -->

                                <!-- ko template: getTemplate() -->
                                <!-- ko if: isDisplayed() -->
                                <!-- /ko -->
                                <!-- /ko -->

                                <!-- ko template: getTemplate() -->
                                <!-- ko if: ifShowValue() && !ifShowDetails() -->
                                <li class="order-summary__list-item">
                                    <span data-bind="text: title" class="order-summary__label">BTW</span>

                                    <span class="order-summary__value" data-bind="text: getValue()">€&nbsp;0,00</span>
                                </li>
                                <!-- /ko -->

                                <!-- ko if: ifShowValue() && ifShowDetails() -->
                                <!-- /ko -->
                                <!-- /ko -->

                                <!-- ko template: getTemplate() -->
                                <hr class="order-summary__divider">
                                <!-- ko if: isTaxDisplayedInGrandTotal && isDisplayed() -->
                                <!-- /ko -->

                                <!-- ko if: !isTaxDisplayedInGrandTotal && isDisplayed() -->
                                <li class="order-summary__list-item order-summary__total">
                                    <h3 class="order-summary__title-total" data-bind="i18n: inclTaxLabel">Quote Total Incl. Tax</h3>

                                    <span class="order-summary__amount text-right" data-bind="text: getValue()">€&nbsp;1.398,00</span>
                                </li>
                                <!-- /ko -->
                                <!-- /ko -->
                                <!-- /ko -->
                            </ul>
                            <!-- /ko -->

                        </div>
                        <div id="quote-details" class="quote-details" data-bind="scope:'details'">
                            <!-- ko template: getTemplate() --><strong class="title" data-bind="i18n: title">Enter your details</strong>

                            <form data-form-js="am-details-form" data-mage-init="{&quot;validation&quot;:{}}" enctype="multipart/form-data">
                                <!-- ko foreach: getRegion('customer-email') -->
                                <!-- ko template: getTemplate() -->
                                <!-- ko ifnot: isCustomerLoggedIn() -->

                                <!-- ko foreach: getRegion('before-login-form') -->
                                <!-- /ko -->
                                <form class="form form-login" data-role="email-with-possible-login" data-mage-init="{&quot;validation&quot;:{}}" data-bind="submit:login, afterRender: validateEmail" method="post" novalidate="novalidate">
                                    <fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
                                        <div class="field required">
                                            <label class="label" for="customer-email">
                                                <span data-bind="i18n: 'Email Address'">E-mailadres</span>
                                            </label>
                                            <div class="control _with-tooltip">
                                                <input class="input-text" type="email" data-bind="
                            textInput: email,
                            hasFocus: emailFocused,
                            mageInit: {'Amasty_RequestQuote/js/trim-input':{}}" name="username" data-validate="{required:true, 'validate-email':true}" id="customer-email" aria-required="true">
                                                <!-- ko template: 'ui/form/element/helper/tooltip' -->
                                                <div class="field-tooltip toggle">
                                                    <!-- ko if: (tooltip.link)-->
                                                    <!-- /ko -->

                                                    <!-- ko if: (!tooltip.link)-->
                                                    <span class="action-help" tabindex="0" data-toggle="dropdown" role="button" data-bind="
                {
                    attr: {
                        'data-trigger-keypress-button': true,
                        'aria-label': $t('See more information')
                    },
                    mageInit: {
                        'dropdown': {
                            'activeClass': '_active'
                        }
                    }
                }
            " data-trigger-keypress-button="true" aria-label="See more information" aria-haspopup="true" aria-expanded="false">
                                                        <svg>
                                                            <use data-bind="attr: { 'href': require.toUrl('images/icons-sprite.svg#question-mark') }" href="/images/icons-sprite.svg#question-mark"></use>
                                                        </svg>
                                                    </span>
                                                    <!-- /ko -->

                                                    <div class="field-tooltip-content" data-target="dropdown" data-bind="i18n: tooltip.description" aria-hidden="true">We'll send notifications about the quote to the inserted email address.
                                                        Please kindly note that new account will be created automatically after quote submission.</div>
                                                </div>
                                                <!-- /ko -->
                                            </div>
                                        </div>

                                        <!--Hidden fields -->
                                        <fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible" style="display: none;">
                                            <div class="field">
                                                <label class="label" for="customer-password">
                                                    <span data-bind="i18n: 'Password'">Wachtwoord</span>
                                                </label>
                                                <div class="control">
                                                    <input class="input-text" data-bind="
                                attr: {
                                    placeholder: $t('Password'),
                                }" type="password" name="password" id="customer-password" data-validate="{required:true}" autocomplete="off" placeholder="Wachtwoord">
                                                    <span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'">U heeft al een account bij ons. Log in of ga door zonder account.</span>
                                                </div>

                                            </div>

                                            <!-- ko foreach: getRegion('messages') -->
                                            <!-- ko template: getTemplate() -->
                                            <div data-role="checkout-messages" class="messages" data-bind="visible: isVisible(), click: removeAll">
                                                <!-- ko foreach: messageContainer.getErrorMessages() -->
                                                <!--/ko-->
                                                <!-- ko foreach: messageContainer.getSuccessMessages() -->
                                                <!--/ko-->
                                            </div>
                                            <!-- /ko -->
                                            <!--/ko-->

                                            <!-- ko foreach: getRegion('additional-login-form-fields') -->
                                            <!-- /ko -->
                                            <div class="actions-toolbar">
                                                <input name="context" type="hidden" value="checkout">
                                                <div class="primary">
                                                    <button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'">Log in</span></button>
                                                </div>
                                                <div class="secondary">
                                                    <a class="action remind" data-bind="attr: { href: forgotPasswordUrl }" href="/customer/account/forgotpassword/">
                                                        <span data-bind="i18n: 'Forgot Your Password?'">Wachtwoord vergeten?</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <!--Hidden fields -->
                                    </fieldset>
                                </form>
                                <!-- /ko -->
                                <!-- /ko -->
                                <!-- /ko -->
                                <fieldset class="fieldset amquote-summary-details">
                                    <!-- ko foreach: getRegion('quote-attributes') -->
                                    <!-- /ko -->

                                    <div class="field textarea">
                                        <label class="label">
                                            <span data-bind="i18n: remark_title">Remarks</span>
                                            <div style="display:inline-block; width: 25px; height: 25px" data-bind="blockLoader: isLoading"></div>
                                        </label>
                                        <div class="control">
                                            <textarea name="quote_remark" rows="3" cols="25" data-bind="value: remark, valueUpdate: &quot;input&quot;">                </textarea>
                                        </div>
                                    </div>

                                    <!-- ko if: notLoggedIn() -->

                                    <!-- ko foreach: getAttributes() -->
                                    <!-- ko foreach: $parent.getRegion($parent.getAttributeRenderer($data.type)) -->
                                    <!-- ko template: getTemplate() -->
                                    <div class="field required" data-bind="css: {'required': $parent.required}">
                                        <label class="label">
                                            <span data-bind="i18n: $parent.label">Voornaam</span>
                                        </label>
                                        <div class="control">
                                            <input type="text" data-bind="
                    value: $parent.value,
                    attr: {
                        name: $parent.code,
                        &quot;data-validate&quot;: $parent.required ? &quot;{required:true}&quot; : &quot;{}&quot;
                    }
               " name="firstname" data-validate="{required:true}">
                                        </div>
                                    </div>
                                    <!-- /ko -->
                                    <!-- /ko -->

                                    <!-- ko foreach: $parent.getRegion($parent.getAttributeRenderer($data.type)) -->
                                    <!-- ko template: getTemplate() -->
                                    <div class="field required" data-bind="css: {'required': $parent.required}">
                                        <label class="label">
                                            <span data-bind="i18n: $parent.label">Achternaam</span>
                                        </label>
                                        <div class="control">
                                            <input type="text" data-bind="
                    value: $parent.value,
                    attr: {
                        name: $parent.code,
                        &quot;data-validate&quot;: $parent.required ? &quot;{required:true}&quot; : &quot;{}&quot;
                    }
               " name="lastname" data-validate="{required:true}">
                                        </div>
                                    </div>
                                    <!-- /ko -->
                                    <!-- /ko -->
                                    <!-- /ko -->

                                    <!-- /ko -->
                                </fieldset>
                            </form>
                            <!-- /ko -->

                        </div>

                        <button type="button" data-role="proceed-to-checkout" title="Submit Quote" class="action primary checkout" <span="">Submit Quote
                        </button>
                    </div>
                    <form action="/quotation/cart/updatePost/" method="post" id="form-validate" class="form form-cart amasty-quote-update" enctype="multipart/form-data" novalidate="novalidate">
                        <input name="form_key" type="hidden" value="w6PqW0hG6Uuq4Cuw">
                        <div class="cart table-wrapper">
                            <table id="shopping-cart-table" class="cart items data table">
                                <caption role="heading" aria-level="2" class="table-caption">Producten in winkelwagen</caption>
                                <thead>
                                    <tr>
                                        <th class="col item" scope="col"><span>Product</span></th>
                                        <th class="col price" scope="col"><span>Prijs</span></th>
                                        <th class="col qty" scope="col"><span>Aantal</span></th>
                                        <th class="col subtotal" scope="col"><span>Subtotaal</span></th>
                                    </tr>
                                </thead>
                                <tbody class="cart item">
                                    <tr class="item-info">
                                        <td data-th="Product" class="col item">
                                            <a href="/carport" title="Carport " tabindex="-1" class="product-item-photo">

                                                <div class="lazyload-wrapper">

                                                    <picture class="image product-image-photo catalog-grid-item__image lazyloaded">
                                                        <source type="image/webp" data-srcset="https://solarwood.hypernode.io/media/catalog/product/cache/72b1ec17d0c1c440c853d480d4e682eb/f/o/foto_grijs_origineel-2.webp" srcset="https://solarwood.hypernode.io/media/catalog/product/cache/72b1ec17d0c1c440c853d480d4e682eb/f/o/foto_grijs_origineel-2.webp">
                                                        <source type="image/png" data-srcset="https://solarwood.hypernode.io/media/catalog/product/cache/72b1ec17d0c1c440c853d480d4e682eb/f/o/foto_grijs_origineel-2.png" srcset="https://solarwood.hypernode.io/media/catalog/product/cache/72b1ec17d0c1c440c853d480d4e682eb/f/o/foto_grijs_origineel-2.png">
                                                        <img class="image product-image-photo catalog-grid-item__image lazyloaded" src="https://solarwood.hypernode.io/media/catalog/product/cache/72b1ec17d0c1c440c853d480d4e682eb/f/o/foto_grijs_origineel-2.png" data-src="https://solarwood.hypernode.io/media/catalog/product/cache/72b1ec17d0c1c440c853d480d4e682eb/f/o/foto_grijs_origineel-2.png" alt="Carport " loading="lazy"></picture>
                                                </div>
                                            </a>
                                            <div class="product-item-details">
                                                <strong class="product-item-name">
                                                    <a href="/carport">Carport </a>
                                                </strong>
                                                <dl class="item-options">
                                                    <dt>Wood Type</dt>
                                                    <dd>
                                                        Scandinavian spruce wood </dd>
                                                    <dt>Upgrades</dt>
                                                    <dd>
                                                        Specialized car charging station, Monitoring solar application </dd>
                                                </dl>
                                                <div>
                                                    <a class="add-note-quote">Add Note</a>
                                                    <div class="field textarea add-note">
                                                        <div class="control">
                                                            <textarea id="cart-1-note" name="cart[1][note]" data-cart-item-id="SW-0714748-SSW-SW-SCCS-SW-MSA" rows="3" cols="25"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>

                                        <td class="col price qty" data-th="Prijs">
                                            <div class="field price">
                                                <div class="control price">
                                                    € <input id="cart-1-price" name="cart[1][price]" data-cart-item-id="SW-0714748-SSW-SW-SCCS-SW-MSA" value="1398.00" type="number" size="4" title="Prijs" class="input-text price amquotereq-input" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-price">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="col qty" data-th="Aantal">
                                            <div class="field qty">
                                                <label class="label" for="cart-1-qty">
                                                    <span>Aantal</span>
                                                </label>
                                                <div class="control qty">
                                                    <input id="cart-1-qty" name="cart[1][qty]" data-cart-item-id="SW-0714748-SSW-SW-SCCS-SW-MSA" value="1" type="number" size="4" title="Aantal" class="input-text qty" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-qty">
                                                </div>
                                            </div>
                                        </td>

                                        <td class="col subtotal" data-th="Subtotaal">

                                            <span class="price-excluding-tax" data-label="Excl. BTW">
                                                <span class="cart-price">
                                                    <span class="price">€&nbsp;1.398,00</span> </span>

                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="item-actions">
                                        <td colspan="100">
                                            <div class="actions-toolbar">
                                                <a class="
            button
            button--icon
            cart-list-item__action
        " href="/quotation/cart/configure/id/1/product_id/1/" title="Wijzig product-parameters">
                                                    <svg role="presentation" focusable="false" class="
                icon
                button__icon
                cart-list-item__action-icon
            ">
                                                        <use href="/images/icons-sprite.svg#edit"></use>
                                                    </svg>
                                                </a>
                                                <button type="button" title="Verwijder dit artikel" class="
        button
        button--icon
        cart-list-item__action
    " data-post="{&quot;action&quot;:&quot;\/quotation\/cart\/delete\/&quot;,&quot;data&quot;:{&quot;id&quot;:&quot;1&quot;,&quot;uenc&quot;:&quot;aHR0cHM6Ly9zb2xhcndvb2QuZmFsY29uLmh5cGVybm9kZS5pby9xdW90YXRpb24vY2FydA,,&quot;}}">
                                                    <svg class="
            icon
            button__icon
            cart-list-item__action-icon
        " role="presentation" focusable="false">
                                                        <use href="/images/icons-sprite.svg#remove"></use>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="cart main actions">
                            <a class="action continue" href="#" title="Ga verder met winkelen">
                                <span>Ga verder met winkelen</span>
                            </a>
                            <button id="update-quote-cart" type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" class="action update">
                            </button>
                            <button type="submit" name="update_cart_action" data-cart-empty="" value="empty_cart" title="Clear Quote" class="action clear-quote" id="empty_cart_button">
                                <span>Clear Quote</span>
                            </button>
                            <button type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" title="Update Quote" class="action update">
                                <span>Update Quote</span>
                            </button>
                            <input type="hidden" value="" id="update_cart_action_container" data-cart-item-update="">
                        </div>
                    </form>

                </div>
                <div id="footer-container" class="footer">

                    <div class="container">
                        <div class="flex flex-col">

                            <div class="items-center justify-center flex mt-xl col-md-12">
                                <a class="footer_logo--link" href="/" aria-label="Home page link">
                                    <img class="image footer_logo--image lazyloaded" src="https://images.prismic.io/solarwood/99d591a1-c317-4360-a351-a25fed1c69a9_Group+936.png?auto=compress,format" data-src="https://images.prismic.io/solarwood/99d591a1-c317-4360-a351-a25fed1c69a9_Group+936.png?auto=compress,format" loading="lazy">
                                </a>
                            </div>

                            <section class="col-xs-12 col-md-12 items-center justify-center flex mt-xl">
                                <div class="dropdown-list dropdown-list--with-breakpoint">
                                    <ul class="dropdown-list__list flex xs-flex-col md-flex-row justify-center">

                                        <li class="col-xs-12 col-md-12 justify-center items-center flex-col flex">
                                            <div class="dropdown-list__content" id="dropdown-636c07ffc7157" data-level="1" aria-hidden="false">
                                                <ul class="list column-gap-xl flex">

                                                    <li class="list__item">
                                                        <a href="#" class="list__item--link footer__link font-weight--400">
                                                            Privacy &amp; Wettelijk </a>
                                                    </li>

                                                    <li class="list__item">
                                                        <a href="#" class="list__item--link footer__link font-weight--400">
                                                            Contact </a>
                                                    </li>

                                                    <li class="list__item">
                                                        <a href="#" class="list__item--link footer__link font-weight--400">
                                                            Vacatures </a>
                                                    </li>

                                                    <li class="list__item">
                                                        <a href="#" class="list__item--link footer__link font-weight--400">
                                                            Nieuws </a>
                                                    </li>

                                                    <li class="list__item">
                                                        <a href="#" class="list__item--link footer__link font-weight--400">
                                                            Locaties </a>
                                                    </li>

                                                    <li class="list__item">
                                                        <a href="#" class="list__item--link footer__link font-weight--400">
                                                            Dealers </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </section>

                            <div class="mt-l">
                                <div class="container">
                                    <div class="flex justify-center">

                                        <div class="flex flex-center column-gap-m">
                                            <span class="social-item">
                                                <a href="" title="Follow us on instagram">
                                                    <svg class="icon social__icon fill--gray-dark" role="img">
                                                        <use xlink:href="/images/icons-sprite.svg#socials-instagram"></use>
                                                    </svg>
                                                </a>
                                            </span>
                                            <span class="social-item">
                                                <a href="" title="Follow us on facebook">
                                                    <svg class="icon social__icon fill--gray-dark" role="img">
                                                        <use xlink:href="/images/icons-sprite.svg#socials-facebook"></use>
                                                    </svg>
                                                </a>
                                            </span>
                                            <span class="social-item">
                                                <a href="" title="Follow us on linkedin">
                                                    <svg class="icon social__icon fill--gray-dark" role="img">
                                                        <use xlink:href="/images/icons-sprite.svg#socials-linkedin"></use>
                                                    </svg>
                                                </a>
                                            </span>
                                            <span class="social-item">
                                                <a href="" title="Follow us on facebook">
                                                    <svg class="icon social__icon fill--gray-dark" role="img">
                                                        <use xlink:href="/images/icons-sprite.svg#socials-facebook"></use>
                                                    </svg>
                                                </a>
                                            </span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container flex justify-between padding-vc-l mt-l background-color--white col-xs-12 col-md-12 border-top border-top-px2-gold">
                        <span class="color--black footer__absolute-footer__item">

                            Blending high-end design with the best solar panels
                        </span>
                        <span class="color--gray-dark footer__absolute-footer__item">

                            © Copyright Solarwood 2022
                        </span>
                    </div>

                </div>
            </div>
        </div>
    </main>
</div>