<header class="checkout-header">
    <div class="checkout-header__inner u-page-width-max-gutters">
        <a class="checkout-header__logo-wrapper" href="#">
      <img class="checkout-header__logo" src="/assets/images/zeal-brand-logo.png" alt="Zeal logo">
    </a>
        <h1 class="checkout-header__title">
            <span class="checkout-header__title-label">Checkout</span>
            <svg class="icon icon--lock">
  <use xlink:href="/assets/icons/icons.svg#lock"></use>
</svg>

            <span class="checkout-header__cart-number">C014550633</span>
        </h1>
    </div>
    <a class="checkout-header__cart-link" href="#checkout-cart">
    <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

  </a>
</header>

<div class="checkout-page--wrapper">
    <main id="main-section" class="main main--checkout u-page-width-max">
        <div class="l-checkout-forms">
            <div class="l-checkout-form">
                <form class="checkout-form checkout-form--addresses-review js-checkout-form js-checkout-form-addresses-review">
                    <span class="checkout-form__step-number checkout-form__step-number--past">1</span>
                    <div class="checkout-form__title">
                        <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Billing Addresses</h4>
                    </div>
                    <button class="checkout-form__edit-button button button--outlined">Edit</button>
                    <div class="checkout-form__review-items">
                        <div class="checkout-form__review-item-group">
                            <span class="checkout-form__review-label">Shipping Information</span>
                            <p class="checkout-form__review-item">
                                John Doe<br>Apple, Inc.<br>112W Monroe St<br>Chicago, IL 60603<br>United States
                            </p>
                            <p class="checkout-form__review-item">
                                888-888-1234<br>johndoe@email.com
                            </p>
                        </div>
                        <div class="checkout-form__review-item-group">
                            <span class="checkout-form__review-label">Billing Information</span>
                            <p class="checkout-form__review-item">
                                John Smith<br>Apple, Inc.<br>One Aloha Lane<br>Peoria, IL 61615<br>United States
                            </p>
                            <p class="checkout-form__review-item">
                                888-888-1234
                            </p>
                        </div>
                    </div>
                </form>

            </div>
            <div class="l-checkout-form">
                <form class="checkout-form checkout-form--shipping-and-payment js-checkout-form js-checkout-form-shipping-and-payment">
                    <span class="checkout-form__step-number checkout-form__step-number--">2</span>
                    <div class="checkout-form__title">
                        <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Payment</h4>
                    </div>
                    <div class="checkout-form__form-items">
                        <div class="checkout-form__form-item-group js-checkout-form-item-group">
                            <p class="paragraph">If your sunglasses are covered under our 2-year warranty against manufacturer defects we will replace the part(s) at no charge. The $13 processing fee is still required.</p>

                            <p class="paragraph">If you approve the estimates charges for the replacement part(s), we will complete the repair and charge your card the estimated charges without further contact. Your credit card will not be charged until your repair is completed.</p>

                            <p class="paragraph">If there are additional part(s) required to complete your repair and/or additional charge(s) that exceed your estimated charge, a repair technicial will contact you.</p>

                        </div>
                    </div>
                    <div class="checkout-form__form-items">
                        <div class="checkout-form__form-item-group-split">
                            <div class="checkout-form__form-item-group js-checkout-form-item-group">
                                <div class="form-item form-item--radio">
                                    <input type="radio" id="repairs-payment-information-method-check" value="" name="payment-information-method" class="radio radio--default" checked="true">
                                    <label for="repairs-payment-information-method-check">
    
    <span class="radio__label-text">
      I will send in a check
    </span>
  </label>
                                </div>

                            </div>
                            <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="repairs-payment-information-method-check">
                                <p class="paragraph checkout-form__radio-help">Please include a check made out to Maui Jim Sunglasses in your package.</p>

                            </div>
                            <div class="checkout-form__form-item-group js-checkout-form-item-group">
                                <div class="form-item form-item--radio">
                                    <input type="radio" id="repairs-payment-information-method-card" value="" name="payment-information-method" class="radio radio--default">
                                    <label for="repairs-payment-information-method-card">
    
    <span class="radio__label-text">
      I will pay by credit card
    </span>
  </label>
                                </div>

                            </div>
                            <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="repairs-payment-information-method-card">
                                <div class="form-item form-item--checkbox">
                                    <input type="checkbox" id="repairs-payment-information-card-estimate-approval" name="card-estimate-approval" class="checkbox checkbox--default">
                                    <label for="repairs-payment-information-card-estimate-approval">
    By checking this box I approve the estimated charges to complete my repair for non-warranty repairs.
    
  </label>
                                </div>

                                <div class="form-item form-item--payment-widget">
                                    <!-- Replace everything inside .form-item with the payment widget during implementation. Styles are inline so they aren't included in the build. -->
                                    <div style="position: relative; min-height: 350px; background-color: #e2e2e2; text-align: center;">
                                        <span style="position: absolute; top: calc(50% - 16px); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Delego Widget</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="checkout-form__form-item-group-split">
                            <div class="checkout-form__form-item-group js-checkout-form-item-group">
                                <div class="form-item form-item--radio">
                                    <input type="radio" id="checkout-shipping-method-standard" value="" name="shipping-method" class="radio radio--default" checked="true">
                                    <label for="checkout-shipping-method-standard" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Standard
      <br>
      <span class="radio__description">Estimated Arrival: Wednesday, January 31st</span>
    </span>
    <span class="radio__meta">Free</span>
  </label>
                                </div>

                                <div class="form-item form-item--radio">
                                    <input type="radio" id="checkout-shipping-method-two-day" value="" name="shipping-method" class="radio radio--default">
                                    <label for="checkout-shipping-method-two-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      2 Day
      <br>
      <span class="radio__description">Estimated Arrival: Tuesday, January 30th</span>
    </span>
    <span class="radio__meta">$16.00</span>
  </label>
                                </div>

                                <div class="form-item form-item--radio">
                                    <input type="radio" id="checkout-shipping-method-next-day" value="" name="shipping-method" class="radio radio--default">
                                    <label for="checkout-shipping-method-next-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Next Day
      <br>
      <span class="radio__description">Estimated Arrival: Monday, January 29th</span>
    </span>
    <span class="radio__meta">$24.00</span>
  </label>
                                </div>

                                <div class="form-item form-item--checkbox">
                                    <input type="checkbox" id="checkout-terms-conditions" name="terms-conditions" class="checkbox checkbox--default">
                                    <label for="checkout-terms-conditions">
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
                                </div>

                                <div class="form-item form-item--checkbox">
                                    <input type="checkbox" id="checkout-mailing-list" name="mailing-list" class="checkbox checkbox--default" checked="true">
                                    <label for="checkout-mailing-list">
    Join our mailing list for latest offers and new arrivals
    
  </label>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="checkout-form__form-items">
                        <div class="checkout-form__actions js-checkout-form-actions">
                            <button class="button button--primary">Submit Order</button>

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

            </div>
        </div>
        <div class="l-checkout-cart" id="checkout-cart">
            <div class="checkout-cart checkout-cart--default">
                <h4 class="checkout-cart__title">Order Summary</h4>
                <ul class="checkout-cart__items">
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;120" alt="Gloss Black"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $149.00
                                    <div class="checkout-cart__item-tax-info">
                                        <span class="checkout-cart__item-tax-value">Inkl. MWST</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>PEAHI</strong> - 202-02</span>
                            <span class="checkout-cart__item-info">Gloss Black</span>
                            <span class="checkout-cart__item-info">Neutral Grey | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;120" alt="Olive Stripe"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $219.00
                                    <div class="checkout-cart__item-tax-info">
                                        <span class="checkout-cart__item-tax-value">Inkl. MWST</span>
                                    </div>
                                    <div class="checkout-cart__item-vip-info">
                                        <span class="checkout-cart__item-vip-card-value">VIP Card 30%</span>
                                        <span class="checkout-cart__item-vip-original-price">$319.00</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>WATERWAYS</strong> - HTS267-15C</span>
                            <span class="checkout-cart__item-info">Olive Stripe</span>
                            <span class="checkout-cart__item-info">Maui HT™ | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;120" alt="Tortoise with Antique Gold"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $299.00
                                    <div class="checkout-cart__item-vip-info">
                                        <span class="checkout-cart__item-vip-card-value">VIP Card 30%</span>
                                        <span class="checkout-cart__item-vip-original-price">$319.00</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>KAWIKA</strong> - H257-16C</span>
                            <span class="checkout-cart__item-info">Tortoise with Antique Gold</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | MauiPure</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;120" alt="Tortoise"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $219.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>VOYAGER</strong> - H178-10</span>
                            <span class="checkout-cart__item-info">Tortoise</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;120" alt="Brown Feathered"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $299.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>LEIA</strong> - RS708-26D</span>
                            <span class="checkout-cart__item-info">Brown Feathered</span>
                            <span class="checkout-cart__item-info">Maui Rose® | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;120" alt="Copper"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $279.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>KOHALA</strong> - H711-18</span>
                            <span class="checkout-cart__item-info">Copper</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | MauiPure</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                    <li class="checkout-cart__item">
                        <table class="checkout-cart__item-details">
                            <tr>
                                <td><img class="checkout-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;120" alt="Antique Gold"></td>
                                <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
                                <td class="checkout-cart__item-price">
                                    $329.00
                                </td>
                            </tr>
                        </table>
                        <div class="checkout-cart__item-info-group">
                            <span class="checkout-cart__item-name"><strong>STILLWATER</strong> - H706-16C</span>
                            <span class="checkout-cart__item-info">Antique Gold</span>
                            <span class="checkout-cart__item-info">HCL® Bronze | SuperThin Glass</span>
                            <span class="checkout-cart__item-info">Single Gradient</span>
                        </div>
                    </li>
                </ul>
                <div class="checkout-cart__footer">
                    <ul class="checkout-cart__totals">
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Subtotal (7):</span>
                            <span class="checkout-cart__totals-value">$1,389.97</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Gift Bag (1):</span>
                            <span class="checkout-cart__totals-value">$3.99</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Gift Card:</span>
                            <span class="checkout-cart__totals-value">- $300.00</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Est. Tax:</span>
                            <span class="checkout-cart__totals-value checkout-cart__totals-value--tbd">Based on Shipping Information</span>
                        </li>
                        <li class="checkout-cart__totals-item">
                            <span class="checkout-cart__totals-label">Delivery:</span>
                            <span class="checkout-cart__totals-value checkout-cart__totals-value--tbd">Based on Shipping Method</span>
                        </li>
                        <li class="checkout-cart__totals-item checkout-cart__totals-item--total">
                            <span class="checkout-cart__totals-label">Total:</span>
                            <span class="checkout-cart__totals-value">$1,206.30</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="l-shopping-cart-secondary">
                <div class="l-shopping-cart-payment-faqs">
                    <div class="payment-faqs js-payment-faqs">
                        <h2 class="payment-faqs__title">FAQs</h2>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper js-payment-faqs-content-wrapper--active">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Security Payment
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                                <ul class="payment-faqs__payment-methods">
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--visa" src="/assets/images/payment-method-visa.png" alt="">
                                    </li>
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--mastercard" src="/assets/images/payment-method-mastercard.png" alt="">
                                    </li>
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--amex" src="/assets/images/payment-method-amex.png" alt="">
                                    </li>
                                    <li class="payment-faqs__payment-method"><img class="payment-method payment-method--discover" src="/assets/images/payment-method-discover.png" alt="">
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Can We Help?
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                            </div>
                        </div>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Conditions of Sale
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                            </div>
                        </div>
                        <div class="payment-faqs__content-wrapper js-payment-faqs-content-wrapper">
                            <button class="payment-faqs__control js-payment-faqs-control">
      Free Shipping and Returns
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

    </button>
                            <div class="payment-faqs__content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum enim velit, id sagittis enim consequat sed. Curabitur ante nisi, posuere vitae velit et, posuere laoreet lectus.
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </main>
</div>
{{render (dynamicComponent header)}}
<div class="checkout-page--wrapper">
  <main id="main-section" class="main main--checkout u-page-width-max">
    <div class="l-checkout-forms">
      {{#if message}}
      <div class="l-global-messages">
        {{render (dynamicComponent message.component) message}}
      </div>
      {{/if}}
      {{#if express}}
      {{render (dynamicComponent express)}}
      <hr class="l-checkout-line">
      {{/if}}
      {{#each formItems}}
      <div class="l-checkout-form">
        {{render (dynamicVariant component variant) context merge=true}}
      </div>
      {{/each}}
    </div>
    <div class="l-checkout-cart" id="checkout-cart">
      {{render (dynamicComponent cart)}}
      <div class="l-shopping-cart-secondary">
        <div class="l-shopping-cart-payment-faqs">
          {{render '@payment-faqs'}}
        </div>
      </div>
    </div>
  </main>
</div>
{
  "pageCss": [
    "checkout"
  ],
  "header": "checkout-header--zeal",
  "cart": "checkout-cart",
  "formItems": [
    {
      "component": "checkout-form",
      "variant": "addresses-review"
    },
    {
      "component": "checkout-form",
      "variant": "shipping-and-payment-submit-repairs"
    }
  ]
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .checkout-page--wrapper {
      @include breakpoint($breakpoint-md) {
        padding: 50px;
        background-color: $color-lighter;
      }
    }
    
    .main--checkout {
      @include breakpoint($breakpoint-md) {
        padding: 20px 10px 0;
        background-color: transparent;
      }
    
      @include breakpoint($page-width-checkout-max) {
        padding-right: 0;
      }
    
      .l-global-messages {
        & ~ .l-checkout-forms {
          padding-top: 0;
        }
    
        @include breakpoint($breakpoint-md) {
          margin: 0;
          padding: 0 50px;
          float: none;
          clear: both;
        }
    
        @include breakpoint($page-width-checkout-max) {
          padding: 0;
    
          & ~ .l-checkout-cart {
            padding-top: 0;
          }
        }
      }
    }
    
    .l-checkout-line {
      display: block;
      height: 1px;
      margin: 0 0 1rem;
      padding: 0;
      border: 0;
      border-top: 1px solid $color-light;
    }
    
    .l-checkout-forms,
    .l-checkout-cart {
      padding: 0 $gutter-width-half;
    
      @include breakpoint($breakpoint-md) {
        padding: 20px 50px 0;
      }
    }
    
    .l-checkout-forms {
      @include clearfix;
    
      @include breakpoint($breakpoint-md) {
        background-color: $color-white;
      }
    
      @include breakpoint($page-width-checkout-max) {
        @include span(8);
        padding-right: 40px;
        padding-left: 40px;
      }
    }
    
    .l-checkout-form {
      margin-bottom: 50px;
    }
    
    .l-checkout-cart {
      margin-bottom: 50px;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 120px;
        background-color: $color-white;
      }
    
      @include breakpoint($page-width-checkout-max) {
        @include span(4);
        margin-bottom: 0;
        margin-left: 0;
        padding-top: 0;
        padding-right: 70px;
        padding-left: 20px;
        background: $color-lighter;
    
        .checkout-cart__items {
          padding: 15px;
          background-color: $color-white;
        }
    
        .checkout-cart__footer {
          padding: 0 15px 10px;
          background-color: $color-white;
          font-size: 2rem;
        }
      }
    
      .l-shopping-cart-secondary {
        width: 100%;
      }
    
      .l-shopping-cart-payment-faqs {
        width: 100%;
      }
    
      .payment-faqs__title,
      .payment-faqs__control {
        font-size: 1.6rem;
      }
    
      .payment-faqs__content {
        font-size: 1.4rem;
      }
    }
    
    .checkout-form--upcoming-step {
      .checkout-form__step-number,
      .checkout-form__title {
        color: $color-light;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/checkout-page/checkout-page.scss
  • Filesystem Path: src/components/03-pages/checkout-page/checkout-page.scss
  • Size: 2.3 KB

There are no notes for this item.