<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/mauijim-brand-logo.png" alt="Maui Jim 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>

<main class="main main--checkout u-page-width-max">
    <div class="l-checkout-forms">
        <div class="l-checkout-form">
            <form class="checkout-form checkout-form--shipping-information-edit-auth js-checkout-form js-checkout-form-shipping-information-edit-auth">
                <span class="checkout-form__step-number checkout-form__step-number--present">1</span>
                <h4 class="checkout-form__title">Shipping Information</h4>
                <div class="checkout-form__form-items">
                    <div class="checkout-form__form-item-group checkout-form__form-item-group--shipping-addresses js-checkout-form-item-group">
                        <div class="shipping-address js-modal-form-item">
                            <input type="radio" id="checkout-shipping-address-1" name="checkout-shipping-address" class="radio radio--default" checked="true">
                            <label class="shipping-address__details" for="checkout-shipping-address-1">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Doe</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-company">Apple, Inc.</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">112 W Monroe St</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Chicago</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">60603</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-1234</span>
    </p>
  </label>
                            <div class="shipping-address__actions">
                                <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                            </div>
                            <span class="shipping-address__accent"></span>
                        </div>

                        <div class="shipping-address js-modal-form-item">
                            <input type="radio" id="checkout-shipping-address-2" name="checkout-shipping-address" class="radio radio--default">
                            <label class="shipping-address__details" for="checkout-shipping-address-2">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Smith</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">One Aloha Lane</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Peoria</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">61615</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-4321</span>
    </p>
  </label>
                            <div class="shipping-address__actions">
                                <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                            </div>
                            <span class="shipping-address__accent"></span>
                        </div>

                        <button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>

                    </div>
                    <div class="checkout-form__actions js-checkout-form-actions">
                        <button class="button button--primary">Continue</button>

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

        </div>
        <div class="l-checkout-form">
            <form class="checkout-form checkout-form--upcoming-step js-checkout-form js-checkout-form-upcoming-step">
                <span class="checkout-form__step-number checkout-form__step-number--future">2</span>
                <h4 class="checkout-form__title">Shipping Method</h4>
                <div class="checkout-form__form-items">
                </div>
            </form>

        </div>
        <div class="l-checkout-form">
            <form class="checkout-form checkout-form--upcoming-step js-checkout-form js-checkout-form-upcoming-step">
                <span class="checkout-form__step-number checkout-form__step-number--future">3</span>
                <h4 class="checkout-form__title">Billing Information</h4>
                <div class="checkout-form__form-items">
                </div>
            </form>

        </div>
        <div class="l-checkout-form">
            <form class="checkout-form checkout-form--upcoming-step js-checkout-form js-checkout-form-upcoming-step">
                <span class="checkout-form__step-number checkout-form__step-number--future">4</span>
                <h4 class="checkout-form__title">Payment Information</h4>
                <div class="checkout-form__form-items">
                </div>
            </form>

        </div>
    </div>
    <div class="l-checkout-cart" id="checkout-cart">
        <div class="checkout-cart checkout-cart--default">
            <h4 class="checkout-cart__title">Your Cart</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 class="checkout-cart__edit">
                    <button class="button button--outlined">Edit Shopping Cart</button>

                    <span class="checkout-cart__edit-footer">Products &amp; Gift/Promo Card</span>
                </div>
            </div>
        </div>

    </div>
</main>
<footer class="checkout-footer">
    <div class="u-page-width-max-gutters">
        <ul class="checkout-footer__links">
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Shipping
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Payment
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Warranty
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Terms &amp; Conditions
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
        </ul>
        <ul class="checkout-footer__payment-methods">
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--visa" src="/assets/images/payment-method-visa.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--mastercard" src="/assets/images/payment-method-mastercard.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--amex" src="/assets/images/payment-method-amex.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--discover" src="/assets/images/payment-method-discover.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--verisign" src="/assets/images/payment-method-verisign.png" alt="">
            </li>
        </ul>
    </div>
</footer>
{{render (dynamicComponent header)}}
<main class="main main--checkout u-page-width-max">
  {{#if message}}
  <div class="l-global-messages">
    {{render (dynamicComponent message.component) message}}
  </div>
  {{/if}}
  <div class="l-checkout-forms">
    {{#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>
</main>
{{render (dynamicComponent footer)}}
{
  "pageCss": [
    "checkout"
  ],
  "header": "checkout-header--maui-jim",
  "footer": "checkout-footer",
  "cart": "checkout-cart",
  "formItems": [
    {
      "component": "checkout-form",
      "variant": "shipping-information-edit-auth"
    },
    {
      "component": "checkout-form",
      "variant": "upcoming-step",
      "context": {
        "stepNumber": "2",
        "stepStatus": "future",
        "title": "Shipping Method"
      }
    },
    {
      "component": "checkout-form",
      "variant": "upcoming-step",
      "context": {
        "stepNumber": "3",
        "stepStatus": "future",
        "title": "Billing Information"
      }
    },
    {
      "component": "checkout-form",
      "variant": "upcoming-step",
      "context": {
        "stepNumber": "4",
        "stepStatus": "future",
        "title": "Payment Information"
      }
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--shipping-address-add"
    },
    {
      "component": "form-modal--shipping-address-edit"
    }
  ]
}
  • Content:
    .main--checkout {
      .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 70px;
    
          & ~ .l-checkout-cart {
            padding-top: 0;
          }
        }
      }
    }
    
    .l-checkout-forms,
    .l-checkout-cart {
      padding: 0 $gutter-width-half;
    
      @include breakpoint($breakpoint-md) {
        padding: 20px 50px 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-top: 45px;
      }
    
      @include breakpoint($page-width-checkout-max) {
        padding-right: 0;
        padding-left: 0;
      }
    }
    
    .l-checkout-forms {
      @include breakpoint($page-width-checkout-max) {
        @include span(8);
        padding-right: 40px;
        padding-left: 70px;
      }
    }
    
    .l-checkout-form {
      margin-bottom: 50px;
    }
    
    .l-checkout-cart {
      margin-bottom: 50px;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 120px;
        margin-left: 40px;
      }
    
      @include breakpoint($page-width-checkout-max) {
        @include span(4);
        margin-top: 18px;
        margin-bottom: 110px;
        margin-left: 0;
        padding-top: 45px;
        padding-right: 70px;
        padding-left: 20px;
      }
    }
    
    .checkout-form--upcoming-step {
      .checkout-form__step-number,
      .checkout-form__title {
        color: $color-light;
      }
    }
    
  • URL: /components/raw/checkout-page/checkout-page.scss
  • Filesystem Path: src/components/03-pages/checkout-page/checkout-page.scss
  • Size: 1.4 KB

There are no notes for this item.