<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>
<form class="checkout-form checkout-form--{{_self.name}}{{#if spinning}} js-spinning-form{{/if}} js-checkout-form js-checkout-form-{{_self.name}}">
  {{#if stepNumber}}
  <span class="checkout-form__step-number checkout-form__step-number--{{stepStatus}}">{{stepNumber}}</span>
  {{/if}}
  {{#if title}}
  <h4 class="checkout-form__title">{{title}}</h4>
  {{/if}}
  {{#if editButton}}
  <button class="checkout-form__edit-button button button--outlined">Edit</button>
  {{/if}}
  <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 radioId}} data-radio-id="{{radioId}}"{{/if}}>
      {{#each formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
    {{/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": "1",
  "stepStatus": "present",
  "title": "Shipping Information",
  "formItemGroups": [
    {
      "modifier": "shipping-addresses",
      "formItems": [
        {
          "component": "shipping-address",
          "id": "checkout-shipping-address-1",
          "name": "checkout-shipping-address",
          "checked": true,
          "label": {
            "firstName": "John",
            "lastName": "Doe",
            "company": "Apple, Inc.",
            "address1": "112 W Monroe St",
            "city": "Chicago",
            "state": "IL",
            "zip": "60603",
            "country": "United States",
            "phone": "888-888-1234"
          },
          "actions": [
            {
              "action": "edit",
              "buttonValue": "Edit",
              "modifier": "plain-text",
              "buttonModal": "shipping-address-edit",
              "noValidate": true,
              "classes": [
                "shipping-address__edit",
                "js-modal-form-item-edit-button"
              ]
            }
          ]
        },
        {
          "component": "shipping-address",
          "id": "checkout-shipping-address-2",
          "name": "checkout-shipping-address",
          "label": {
            "firstName": "John",
            "lastName": "Smith",
            "address1": "One Aloha Lane",
            "city": "Peoria",
            "state": "IL",
            "zip": "61615",
            "country": "United States",
            "phone": "888-888-4321"
          },
          "actions": [
            {
              "action": "edit",
              "buttonValue": "Edit",
              "modifier": "plain-text",
              "buttonModal": "shipping-address-edit",
              "noValidate": true,
              "classes": [
                "shipping-address__edit",
                "js-modal-form-item-edit-button"
              ]
            }
          ]
        },
        {
          "component": "shipping-address--button",
          "icon": "new-address",
          "label": "Add New Shipping Address",
          "buttonModal": "shipping-address-add"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Continue"
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--shipping-address-add"
    },
    {
      "component": "form-modal--shipping-address-edit"
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      // Shows/hides form groups as radios 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 radio value
      // 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 itemGroupRadioId = itemGroups[i].getAttribute('data-radio-id');
          const radio = document.getElementById(itemGroupRadioId);
    
          if (itemGroupRadioId && radio) {
            if (radio.checked) {
              itemGroups[i].classList.remove('js-hidden');
            }
            else {
              itemGroups[i].classList.add('js-hidden');
            }
          }
        }
      }
    
      function initForm(form) {
        const radios = form.querySelectorAll('.radio');
    
        hideFormGroups(form);
    
        for (let i = 0; i < radios.length; i++) {
          radios[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.7 KB
  • Content:
    .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;
      }
    
      @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-method {
      // 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-xl) {
        .form-item--select {
          min-width: calc(33% - 20px);
        }
      }
    }
    
    .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__radio-help {
      margin: 0 0 20px;
      padding-left: 30px;
    
      @include breakpoint($breakpoint-md) {
        padding-left: 40px;
      }
    }
    
    .checkout-form__actions {
      margin-top: 20px;
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        margin-right: $gutter-width-half;
        float: right;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-right: $gutter-width;
    
        .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;
      }
    }
    
  • URL: /components/raw/checkout-form/checkout-form.scss
  • Filesystem Path: src/components/01-elements/forms/checkout-form/checkout-form.scss
  • Size: 4.6 KB

There are no notes for this item.