<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>
<form class="checkout-form checkout-form--{{#if modifier}}{{modifier}}{{else}}{{_self.name}}{{/if}}{{#if spinning}} js-spinning-form{{/if}} js-checkout-form js-checkout-form-{{#if modifier}}{{modifier}}{{else}}{{_self.name}}{{/if}}">
  {{#if stepNumber}}
  <span class="checkout-form__step-number checkout-form__step-number--{{stepStatus}}">{{stepNumber}}</span>
  {{/if}}
  {{#if title}}
  <div class="checkout-form__title">
    <h4 class="checkout-form__title-embedded-heading">{{title}}</h4>
    {{#if login}}
    <span class="checkout-form__login-message">
      Have an account?
      <a href="#" class="checkout-form__login-link js-modal-open-link" data-modal-id="login">Login</a>
      to speed things up.
    </span>
    {{/if}}
  </div>
  {{/if}}
  {{#if editButton}}
  <button class="checkout-form__edit-button button button--outlined">Edit</button>
  {{/if}}
  {{#if formItemGroups}}
  <div class="checkout-form__form-items">
    {{#each formItemGroups}}
    <div class="checkout-form__form-item-group{{#if modifier}} checkout-form__form-item-group--{{modifier}}{{/if}} js-checkout-form-item-group{{#if hiddenByDefault}} js-hidden{{/if}}"{{#if toggleId}} data-toggle-id="{{toggleId}}"{{/if}}{{#if reverseToggle}} data-reverse-toggle="true"{{/if}}>
      {{#if title}}
      <h5 class="checkout-form__form-item-group-title">{{title}}</h5>
      {{/if}}
      {{#each formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
    {{/each}}
  </div>
  {{/if}}
  {{#if formItemGroupSplits}}
  <div class="checkout-form__form-items">
    {{#each formItemGroupSplits}}
    <div class="checkout-form__form-item-group-split">
      {{#each formItemGroups}}
      <div class="checkout-form__form-item-group{{#if modifier}} checkout-form__form-item-group--{{modifier}}{{/if}} js-checkout-form-item-group{{#if hiddenByDefault}} js-hidden{{/if}}"{{#if toggleId}} data-toggle-id="{{toggleId}}"{{/if}}{{#if reverseToggle}} data-reverse-toggle="true"{{/if}}>
        {{#if title}}
        <h5 class="checkout-form__form-item-group-title">{{title}}</h5>
        {{/if}}
        {{#each formItems}}
        {{render (dynamicComponent component) this}}
        {{/each}}
      </div>
      {{/each}}
    </div>
    {{/each}}
  </div>
  {{/if}}
  {{#if actions}}
  <div class="checkout-form__form-items">
    <div class="checkout-form__actions js-checkout-form-actions">
      {{#each actions}}
      {{render (dynamicVariant 'buttons' type) this merge=true}}
      {{/each}}
    </div>
  </div>
  {{/if}}
  {{#if reviewGroups}}
  <div class="checkout-form__review-items">
    {{#each reviewGroups}}
    <div class="checkout-form__review-item-group">
      {{#if label}}
      <span class="checkout-form__review-label">{{label}}</span>
      {{/if}}
      {{#each items}}
      <p class="checkout-form__review-item">
        {{#if icon}}
        {{render (dynamicVariant 'icons' icon)}}
        {{/if}}
        {{{value}}}
      </p>
      {{/each}}
    </div>
    {{/each}}
  </div>
  {{/if}}
</form>
{
  "stepNumber": "2",
  "modifier": "shipping-and-payment",
  "title": "Shipping & Payment",
  "formItemGroups": [
    {
      "formItems": [
        {
          "component": "paragraph",
          "classes": true,
          "value": "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."
        },
        {
          "component": "paragraph",
          "classes": true,
          "value": "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."
        },
        {
          "component": "paragraph",
          "classes": true,
          "value": "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."
        }
      ]
    }
  ],
  "formItemGroupSplits": [
    {
      "formItemGroups": [
        {
          "formItems": [
            {
              "component": "radio",
              "id": "repairs-payment-information-method-check",
              "name": "payment-information-method",
              "modifier": "default",
              "label": "I will send in a check",
              "checked": true
            }
          ]
        },
        {
          "hiddenByDefault": true,
          "toggleId": "repairs-payment-information-method-check",
          "formItems": [
            {
              "component": "paragraph",
              "classes": [
                "checkout-form__radio-help"
              ],
              "value": "Please include a check made out to Maui Jim Sunglasses in your package."
            }
          ]
        },
        {
          "formItems": [
            {
              "component": "radio",
              "id": "repairs-payment-information-method-card",
              "name": "payment-information-method",
              "modifier": "default",
              "label": "I will pay by credit card"
            }
          ]
        },
        {
          "hiddenByDefault": true,
          "toggleId": "repairs-payment-information-method-card",
          "formItems": [
            {
              "component": "checkbox",
              "id": "repairs-payment-information-card-estimate-approval",
              "name": "card-estimate-approval",
              "modifier": "default",
              "label": "By checking this box I approve the estimated charges to complete my repair for non-warranty repairs.",
              "required": true,
              "checked": null
            },
            {
              "component": "payment-widget"
            }
          ]
        }
      ]
    },
    {
      "formItemGroups": [
        {
          "formItems": [
            {
              "component": "radio",
              "id": "checkout-shipping-method-standard",
              "name": "shipping-method",
              "modifier": "default",
              "labelClasses": [
                "radio__label--outlined"
              ],
              "label": "Standard",
              "description": "Estimated Arrival: Wednesday, January 31st",
              "meta": "Free",
              "checked": true
            },
            {
              "component": "radio",
              "id": "checkout-shipping-method-two-day",
              "name": "shipping-method",
              "modifier": "default",
              "labelClasses": [
                "radio__label--outlined"
              ],
              "label": "2 Day",
              "description": "Estimated Arrival: Tuesday, January 30th",
              "meta": "$16.00"
            },
            {
              "component": "radio",
              "id": "checkout-shipping-method-next-day",
              "name": "shipping-method",
              "modifier": "default",
              "labelClasses": [
                "radio__label--outlined"
              ],
              "label": "Next Day",
              "description": "Estimated Arrival: Monday, January 29th",
              "meta": "$24.00"
            },
            {
              "component": "checkbox",
              "id": "checkout-terms-conditions",
              "name": "terms-conditions",
              "modifier": "default",
              "label": "I agree to the <a href='#'>Terms and Conditions</a> of the website",
              "required": true,
              "checked": null
            },
            {
              "component": "checkbox",
              "id": "checkout-mailing-list",
              "name": "mailing-list",
              "modifier": "default",
              "label": "Join our mailing list for latest offers and new arrivals",
              "checked": true
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Submit Order"
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      // Shows/hides form groups as toggle controls within the form are selected.
      function handleRadioChange(e) {
        const form = e.target.closest('.js-checkout-form');
    
        if (form) {
          hideFormGroups(form);
        }
      }
    
      // Some form item groups should only be exposed if a particular toggle
      // control is selected. These are shown on initial page load for anyone
      // without JS.
      function hideFormGroups(form) {
        const itemGroups = form.querySelectorAll('.js-checkout-form-item-group');
    
        for (let i = 0; i < itemGroups.length; i++) {
          const itemGroupToggleId = itemGroups[i].getAttribute('data-toggle-id');
          const reverseToggle = itemGroups[i].getAttribute('data-reverse-toggle') === 'true';
          const toggle = document.getElementById(itemGroupToggleId);
    
          if (itemGroupToggleId && toggle) {
            if ((toggle.checked && !reverseToggle) || (!toggle.checked && reverseToggle)) {
              itemGroups[i].classList.remove('js-hidden');
            }
            else {
              itemGroups[i].classList.add('js-hidden');
            }
          }
        }
      }
    
      function initForm(form) {
        const toggles = form.querySelectorAll('.radio, .checkbox');
    
        hideFormGroups(form);
    
        for (let i = 0; i < toggles.length; i++) {
          toggles[i].addEventListener('change', handleRadioChange);
        }
      }
    
      function init() {
        const forms = document.querySelectorAll('.js-checkout-form');
    
        for (let i = 0; i < forms.length; i++) {
          if (!forms[i].classList.contains('js-component-init')) {
            initForm(forms[i]);
    
            forms[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/checkout-form/checkout-form.js
  • Filesystem Path: src/components/01-elements/forms/checkout-form/checkout-form.js
  • Size: 1.9 KB
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .checkout-form {
      position: relative;
      margin: 15px 0;
      padding-top: 1px;
    
      .shipping-address {
        margin-bottom: 10px;
      }
    
      .label {
        margin-bottom: 7px;
      }
    
      .radio:checked + label:not(.shipping-address__details) {
        font-weight: $font-weight-bold;
      }
    
      .form-item--checkbox + .form-item--checkbox {
        width: 100%;
        margin-top: 0;
        padding-top: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
    
        .shipping-address,
        .form-item {
          @include span(6);
    
          &:nth-of-type(odd) {
            clear: left;
          }
        }
    
        .shipping-address {
          width: calc(50% - 20px);
          margin-right: $gutter-width-half;
          margin-bottom: 20px;
          margin-left: $gutter-width-half;
        }
    
        .form-item--radio,
        .form-item--payment-widget,
        .form-item--paypal-widget {
          margin-top: 10px;
          float: none;
          clear: both;
        }
    
        .form-item--checkbox {
          width: calc(100% - 20px);
          margin-top: 10px;
          clear: both;
        }
    
        .form-item--payment-widget {
          width: 36rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .shipping-address,
        .form-item {
          @include span(4);
    
          &:nth-of-type(odd) {
            clear: none;
          }
    
          &:nth-of-type(3n+1) {
            clear: left;
          }
        }
    
        .shipping-address {
          width: calc(33.3333% - 20px);
        }
    
        .form-item--checkbox {
          width: calc(100% - 20px);
        }
    
        .form-item--payment-widget,
        .form-item--paypal-widget {
          float: left;
        }
    
        .form-item--payment-widget {
          width: 36rem;
        }
      }
    }
    
    .checkout-form--payment-information,
    .checkout-form--payment-information-repairs {
      @include breakpoint($breakpoint-xl) {
        // Allow the actions to float alongside the payment widget.
        .checkout-form__form-item-group:after {
          content: none;
        }
      }
    }
    
    .checkout-form--shipping-and-payment {
      // Changes widths from above into min-widths for long Shipping Method values.
      @include breakpoint($breakpoint-md) {
        .form-item:not(.form-item--payment-widget) {
          width: 100%;
        }
    
        .form-item--select {
          width: auto;
          min-width: calc(50% - 20px);
          max-width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        .form-item--select {
          min-width: calc(33% - 20px);
        }
    
        .form-item--radio {
          width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .button {
          width: 280px;
        }
      }
    }
    
    .checkout-form--order-submission {
      .form-item {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        text-align: right;
      }
    }
    
    .checkout-form--payment-information-repairs {
      .paragraph {
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        .paragraph {
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    }
    
    // Styles for .checkout-form__step-number, and .checkout-form__step-number--*
    // now belong to the form-step component.
    
    .checkout-form__form-item-group {
      .checkout-form--shipping-information-edit-auth & {
        margin-bottom: 30px;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        margin-left: 40px;
        clear: both;
    
        .checkout-form--shipping-information-edit-auth & {
          margin-bottom: 10px;
        }
      }
    }
    
    // Ensures children have equal height.
    .checkout-form__form-item-group--shipping-addresses {
      @include breakpoint($breakpoint-md) {
        display: flex;
        flex-wrap: wrap;
      }
    }
    
    .checkout-form__form-item-group-split {
      @include breakpoint($breakpoint-xl) {
        margin-top: 10px;
        float: left;
        box-sizing: border-box;
    
        &:nth-child(1) {
          // 40rem is the sum of:
          // - the static width of the Delego payment widget (360px)
          // - the left hand margin of its form item group (40px)
          width: 40rem;
        }
    
        &:nth-child(2) {
          // 42 rem is the sum of:
          // - the left-hand split
          // - the left hand margin of this split
          width: calc(100% - 42rem);
          margin-left: 2rem;
          padding-left: 2rem;
          border-left: 1px solid $color-medium-light;
    
          .checkout-form__form-item-group {
            margin-left: 0;
          }
        }
    
        .form-item--radio:first-child {
          margin-top: 0;
        }
      }
    }
    
    .checkout-form__radio-help {
      margin: 0 0 20px;
      padding-left: 30px;
    
      @include breakpoint($breakpoint-md) {
        padding-left: 40px;
      }
    }
    
    .checkout-form__actions {
      margin-top: 20px;
    
      // Unset max-width for buttons in the context of checkout forms.
      .button {
        width: auto;
        max-width: initial;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        margin-right: $gutter-width-half;
        float: right;
      }
    
      @include breakpoint($breakpoint-xl) {
        .checkout-form--payment-information-repairs & {
          margin-top: 10px;
        }
    
        .checkout-form--order-submission & {
          margin: 0;
        }
      }
    }
    
    .checkout-form__review-items {
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        margin-left: 40px;
        clear: both;
      }
    }
    
    .checkout-form__review-item-group {
      margin-bottom: 20px;
    
      @include breakpoint($breakpoint-md) {
        width: calc(50% - 20px);
        margin-right: $gutter-width-half;
        margin-bottom: 0;
        margin-left: $gutter-width-half;
        float: left;
    
        &:nth-child(odd) {
          clear: left;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: calc(33.3333% - 20px);
    
        &:nth-child(odd) {
          clear: none;
        }
      }
    }
    
    .checkout-form__review-label {
      display: block;
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
      }
    }
    
    .checkout-form__review-item {
      margin: 0;
      word-wrap: break-word;
    
      .icon {
        margin-right: 5px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
      }
    }
    
    .checkout-form__login-message {
      display: inline-block;
      position: relative;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: normal;
      line-height: 2rem;
      z-index: 1;
    }
    
    .checkout-form__login-link {
      color: $color-primary;
      text-transform: uppercase;
    }
    
    .checkout-form__form-items {
      & + & {
        margin-top: 2rem;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/checkout-form/checkout-form.scss
  • Filesystem Path: src/components/01-elements/forms/checkout-form/checkout-form.scss
  • Size: 6.3 KB

There are no notes for this item.