<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-split">
            <div class="checkout-form__form-item-group js-checkout-form-item-group">
                <p class="paragraph">All repairs will be evaluated for warranty coverage. If the repair is determined to be a manufacturer defect within 2 years of purchase, there will be no charge for the repair (the processing fee of $10 is still required). Your repair
                    technician will contact you with any possible additional charges if needed.</p>

                <p class="paragraph">Please select your payment method. If you choose credit card, you will not be pre-authorized until your repair has been evaluated. Your card will be charged when your repair is completed and shipped back to you.</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-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>
        </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}}
  <div class="checkout-form__form-items">
    {{! If the formItemGroups are grouped into splits, render each split. }}
    {{#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>
    {{! If there are no splits, just render the formItemGroups. }}
    {{else}}
      {{#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}}
    {{/each}}
    {{#if actions}}
    <div class="checkout-form__actions js-checkout-form-actions">
      {{#each actions}}
      {{render (dynamicVariant 'buttons' type) this merge=true}}
      {{/each}}
    </div>
    {{/if}}
  </div>
  {{#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",
  "formItemGroupSplits": [
    {
      "formItemGroups": [
        {
          "formItems": [
            {
              "component": "paragraph",
              "classes": true,
              "value": "All repairs will be evaluated for warranty coverage. If the repair is determined to be a manufacturer defect within 2 years of purchase, there will be no charge for the repair (the processing fee of $10 is still required). Your repair technician will contact you with any possible additional charges if needed."
            },
            {
              "component": "paragraph",
              "classes": true,
              "value": "Please select your payment method. If you choose credit card, you will not be pre-authorized until your repair has been evaluated. Your card will be charged when your repair is completed and shipped back to you."
            }
          ]
        },
        {
          "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"
            }
          ]
        }
      ]
    }
  ]
}
  • 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 {
          width: calc(100% - 20px);
          margin-top: 10px;
          float: none;
          clear: both;
        }
    
        .form-item--checkbox {
          width: calc(100% - 20px);
          margin-top: 10px;
          clear: both;
        }
      }
    
      @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 {
          width: calc(100% - 20px);
          float: left;
        }
      }
    }
    
    .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--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-lg) {
        width: 40%;
        margin-top: 10px;
        float: left;
        box-sizing: border-box;
    
        &:nth-child(2) {
          width: calc(60% - 20px);
          margin-left: 20px;
          padding-left: 20px;
          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;
    }
    /* critical:end */
    
  • URL: /components/raw/checkout-form/checkout-form.scss
  • Filesystem Path: src/components/01-elements/forms/checkout-form/checkout-form.scss
  • Size: 5.8 KB

There are no notes for this item.