Maui Jim Style Guide

Modal Forms: Repair Options 

<form class="modal-form modal-form--repair-options js-modal-form">
    <div class="modal-form__items modal-form__items--1-cols">
        <div class="modal-form__item-group">
            <p class="paragraph">What type of sunglasses do you want to repair today?</p>

        </div>
    </div>
    <div class="modal-form__actions js-modal-form-actions">
        <div class="modal-form__action">
            <button class="button button--outlined">Prescription</button>

        </div>
        <div class="modal-form__action">
            <button class="button button--primary">Non-prescription</button>

        </div>
    </div>
</form>
 
<form class="modal-form modal-form--{{#if modifier}}{{modifier}}{{else}}{{_self.name}}{{/if}} js-modal-form{{#if noReset}} js-modal-form-no-reset{{/if}}" {{#if action}}action="{{action}}"{{/if}}>
  {{#if formItemGroups}}
  <div class="modal-form__items{{#if columns}} modal-form__items--{{columns}}-cols{{/if}}">
    {{#each formItemGroups}}
    <div class="modal-form__item-group{{#if groupVariant}} modal-form__item-group--{{groupVariant}}{{/if}}">
      {{#each formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
    {{/each}}
  </div>
  {{/if}}
  {{#if actions}}
  <div class="modal-form__actions js-modal-form-actions">
    {{#each actions}}
    <div class="modal-form__action">
      {{render (dynamicVariant 'buttons' type) this merge=true}}
    </div>
    {{/each}}
  </div>
  {{/if}}
</form>
 
{
  "columns": "1",
  "formItemGroups": [
    {
      "formItems": [
        {
          "component": "paragraph",
          "classes": true,
          "value": "What type of sunglasses do you want to repair today?"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "outlined",
      "buttonValue": "Prescription"
    },
    {
      "type": "primary",
      "buttonValue": "Non-prescription"
    }
  ]
}
  • Content: 
    .modal-form {
  .label {
    margin-bottom: 4px;
  }
}

.modal-form__item-group {
  clear: both;

  .form-item--zip-geolocate {
    margin: 0 $gutter-width-half;
    padding-bottom: 5px;
    border-bottom-style: none;

    @include breakpoint($breakpoint-xl) {
      margin: 0 0 0 $gutter-width-half;
      padding-bottom: 11px;
    }
  }

  .modal-form--search-views {
    overflow-x: hidden;

    @include breakpoint($breakpoint-xl) {
      margin: 4px 0 0 10px;
    }
  }



  .search-views--start {
    padding-top: 55px;

    @include breakpoint($breakpoint-xl) {
      padding-top: 60px;
    }
  }

  .search-views--no-results,
  .search-views--error {
    padding-top: 32px;

    @include breakpoint($breakpoint-xl) {
      padding-top: 37px;
    }
  }

  .search-views--store-results {
    @include breakpoint($breakpoint-md) {
      height: calc(100vh - 125px);
    }

    @include breakpoint($breakpoint-xl) {
      height: 595px;
      margin: 0 0 0 -10px;
    }

    .zip-geolocate__results {
      padding-bottom: 20px;

      @include breakpoint($breakpoint-md) {
        padding-bottom: 100px;
      }

      @include breakpoint($breakpoint-xl) {
        height: 570px;
        padding-bottom: 0;
        overflow-y: auto;
      }
    }
  }

  .modal-form--search-view {
    @include breakpoint($breakpoint-xl) {
      border-top: 1px solid $color-light;
    }
  }
}

.modal-form__items--3-cols {
  @include clearfix;

  .form-item {
    margin-right: 0;
    margin-left: 0;
  }

  @include breakpoint($breakpoint-md) {
    .form-item {
      @include span(6);

      &:nth-of-type(odd) {
        clear: left;
      }
    }
  }

  @include breakpoint($breakpoint-xl) {
    .form-item {
      @include span(4);

      &:nth-of-type(odd) {
        clear: none;
      }

      &:nth-of-type(3n+1) {
        clear: left;
      }
    }

    .form-item--checkout-phone-number {
      margin-right: auto;
      margin-left: auto;
      float: none;
      clear: both;
    }
  }
}

.modal-form__actions {
  @include clearfix;
  margin-top: 10px;
}

.modal-form__action {
  .button {
    max-width: 100%;
  }

  @include breakpoint($breakpoint-sm-only) {
    .button {
      margin-bottom: 10px;
    }
  }

  @include breakpoint($breakpoint-md) {
    @include span(6);

    &:nth-of-type(odd) {
      text-align: right;
    }
  }

}

.modal-form--repair-options {
  font-size: 1.4rem;
  line-height: 1.7rem;

  .paragraph {
    letter-spacing: 0;
    line-height: 2.3rem;
  }

  @include breakpoint($breakpoint-md) {
    .modal-form__action {
      width: 100%;
      margin-bottom: 20px;
      float: none;
      text-align: left;
    }
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 1.9rem;
    line-height: 2.3rem;

    .modal-form__action {
      font-size: 1.4rem;

      .button {
        width: 300px;
      }
    }
  }
}

.modal-form--style-number-help {
  font-size: 1.4rem;
  line-height: 1.7rem;

  .paragraph {
    margin: 20px 0;
  }

  .image {
    display: block;
    margin: 0 auto;
  }

  .modal-form__actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .modal-form__action {
    width: 100%;
  }

  @include breakpoint($breakpoint-md) {
    min-height: 510px;

    .paragraph {
      margin-top: 15px;
    }

    .modal-form__actions {
      bottom: 70px;
    }

    .modal-form__action {
      text-align: center;
    }
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 2.4rem;
    line-height: 1;

    .paragraph {
      margin-top: 10px;
      text-align: center;
    }
  }
}

// Reserve in Store modal form.

// Modal forms.
.modal-form--reserve-in-store,
.modal-form--reserve-in-store-confirmation {
  position: relative;
  max-height: calc(100vh - 50px);
  overflow-x: hidden;
  overflow-y: auto;

  @include breakpoint($breakpoint-md) {
    height: 100%;
    overflow-y: hidden;
  }

  @include breakpoint($breakpoint-xl) {
    max-width: 860px;
    max-height: none;
    margin: 0 auto;
  }

  .modal-form__items {
    @include breakpoint($breakpoint-md) {
      @include clearfix;
      position: fixed;
      top: 60px;
      width: 100%;
      padding: 0 10px 0 0;
    }

    @include breakpoint($breakpoint-xl) {
      position: relative;
      top: auto;
      height: 680px;
      padding: 0 60px;
    }
  }

  .modal-form__item-group {
    float: none;

    &:nth-child(2) {
      padding: 10px 0 0;
      box-sizing: border-box;
    }

    @include breakpoint($breakpoint-md) {
      width: calc(100% - 226px);
      height: calc(100vh - 70px);
      margin: 0;
      float: right;
      clear: none;

      &:first-child {
        position: absolute;
        width: 226px;
        margin: 0;
        padding: 0;
        float: left;
        border-right: 1px solid $color-light;
        overflow: hidden;
      }

      &:nth-child(2) {
        padding: 0;
      }
    }

    @include breakpoint($breakpoint-xl) {
      width: calc(100% - 330px);
      height: 640px;
      overflow: hidden;

      &:first-child {
        width: 320px;
        padding-right: 10px;
      }
    }
  }

  .modal-form__actions {
    position: relative;
    margin: 0 $gutter-width-half;

    @include breakpoint($breakpoint-xl) {
      margin: 0;
    }
  }

  .modal-form__action {
    width: 100%;
    margin-bottom: $gutter-width-half;
    padding: 0;
    text-align: center;

    @include breakpoint($breakpoint-md) {
      text-align: left;
    }

    .button--primary {
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
      }
    }
  }

  .paragraph {
    a {
      transition: color $transition-standard;
      color: $color-primary;
      text-decoration: none;

      &:hover {
        color: $color-primary-hover;
      }
    }
  }

  .modal-form--form {
    overflow-y: auto;
    overflow-x: hidden;

    .modal-form__actions {
      margin: 0;
    }

    .modal-form__action {
      .button--primary {
        @include breakpoint($breakpoint-xl) {
          right: 10px;
        }
      }
    }

    @include breakpoint($breakpoint-md) {
      height: calc(100vh - 80px);
      margin: 0 $gutter-width-half;
    }

    @include breakpoint($breakpoint-xl) {
      height: 640px;
    }
  }

  .modal-form--error {
    padding-top: 60px;

    @include breakpoint($breakpoint-md) {
      padding-top: 103px;
    }
  }

  .modal-form--confirmation {
    padding: 0 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;

    .button--primary {
      margin: 0 auto 10px;
      padding: 0 $gutter-width;

      @include breakpoint($breakpoint-md) {
        margin-bottom: 55px;
      }

      @include breakpoint($breakpoint-xl) {
        margin-bottom: 30px;
      }
    }
  }
}

.modal-form--reserve-in-store-confirmation {
  .modal-form__actions {
    margin-top: 30px;

    @include breakpoint($breakpoint-md) {
      position: relative;
      width: calc(100% - 280px);
      margin-top: 0;
      float: right;
    }

    @include breakpoint($breakpoint-xl) {
      width: calc(100% - 460px);
      margin-right: 60px;
      margin-left: 20px;
    }
  }

  .modal-form__action {
    @include breakpoint($breakpoint-md) {
      float: none;
    }
  }
}

#reservation-info {
  @include breakpoint($breakpoint-sm-only) {
    padding: 0 $gutter-width-half;
  }
}

// Modal form item groups.
.modal-form__item-group--product,
.modal-form__item-group--reserved-product {
  .card__inner {
    @include breakpoint($breakpoint-md) {
      padding: 0;
    }
  }

  .card__image {
    margin-top: 0;
  }
}

.modal-form__item-group--views {
  .zip-geolocate__results {
    overflow: hidden;

    @include breakpoint($breakpoint-md) {
      overflow-y: auto;
    }
  }
}

.modal-form--views {
  @include breakpoint($breakpoint-sm-only) {
    padding-bottom: 100px;
  }

  @include breakpoint($breakpoint-md) {
    overflow-y: auto;
  }
}

.modal-form__item-group--search {
  padding: 0 $gutter-width-half;

  @include breakpoint($breakpoint-md) {
    padding: 0;
  }
}

.modal-form__item-group--store-results {
  padding: 0 $gutter-width-half;

  @include breakpoint($breakpoint-md) {
    padding: 0;
  }

  .zip-geolocate__results {
    margin-top: 10px;

    @include breakpoint($breakpoint-md) {
      max-height: 545px;
      overflow-y: scroll;
    }
  }

  .zip-geolocate__result {
    margin-right: -10px;
    margin-left: -10px;

    @include breakpoint($breakpoint-md) {
      margin-right: 0;
      margin-left: 0;
    }
  }

  .form-item--zip-geolocate {
    margin-bottom: 0;
    border-bottom-style: none;
  }

  .block__heading {
    margin: 0;
    float: left;

    &:after {
      padding-right: .333em;
      content: ': ';
    }
  }
}

.modal-form__item-group--store-info {
  padding: 0 $gutter-width-half;

  @include breakpoint($breakpoint-md) {
    position: relative;
    padding: 0 0 50px;
    border-bottom: 1px solid $color-light;
  }

  @include breakpoint($breakpoint-xl) {
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
  }

  .zip-geolocate__results {
    margin-bottom: 15px;
  }

  .zip-geolocate__result {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid $color-light;
    border-top-style: none;

    @include breakpoint($breakpoint-sm-only) {
      padding-right: $gutter-width * 2;
    }

    @include breakpoint($breakpoint-md) {
      margin: 0;
      padding: 0;
      border-bottom-style: none;
    }
  }

  .zip-geolocate-result__name {
    color: $color-dark;

    @include breakpoint($breakpoint-xl) {
      margin-bottom: $gutter-width-half;
      font-size: 1.9rem;
      line-height: 2.3rem;
    }
  }

  .zip-geolocate-result__address {
    @include breakpoint($breakpoint-xl) {
      font-size: 1.2rem;
      line-height: 1.8rem;
    }
  }

  .zip-geolocate-result__distance {
    display: none;
  }

  .button--outlined {
    display: none;
    font-weight: $font-weight-bold;
    letter-spacing: 2px;
    text-transform: uppercase;

    @include breakpoint($breakpoint-sm-only) {
      padding: 0;
      border-style: none;
      color: $color-primary;
    }

    @include breakpoint($breakpoint-md) {
      display: block;
      position: absolute;
      bottom: $gutter-width;
      left: 0;
      height: 30px;
      padding: 0 $gutter-width-half;
      line-height: 30px;
    }
  }

  .table {
    display: none;

    @include breakpoint($breakpoint-sm-only) {
      .table__toggle-control {
        pointer-events: none;

        .icon {
          display: none;
        }
      }

      &.table[data-collapsible='1'] tr {
        display: table-row;
      }
    }

    @include breakpoint($breakpoint-md) {
      display: block;
      min-width: unset;
      max-width: 15em;
      margin: 0 0 25px;
    }

    @include breakpoint($breakpoint-xl) {
      min-width: 200px;
      margin: 0;
    }

    caption {
      @include breakpoint($breakpoint-xl) {
        margin-top: 3px;
      }
    }

    .icon {
      position: relative;
      left: -5px;
    }

    td,
    th {
      @include breakpoint($breakpoint-md) {
        font-size: 1.2rem;
        line-height: 1.8rem;
      }
    }

    th {
      padding-right: 5px;
    }
  }
}

.modal-form__item-group--contact-info {
  @include breakpoint($breakpoint-sm-only) {
    padding-right: $gutter-width-half;
    padding-left: $gutter-width-half;
  }
}

.modal-form__item-group--contact-info-form {
  margin-bottom: $gutter-width-half;
  padding: 0 $gutter-width-half;

  @include breakpoint($breakpoint-md) {
    margin-bottom: 0;
    padding: 0;
  }

  @include breakpoint($breakpoint-xl) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
  }

  .form-item {
    margin: 0 0 10px;

    @include breakpoint($breakpoint-xl) {
      flex-grow: 1;
      width: calc(50% - 20px);
      margin: 0 0 13px;

      &:nth-child(even) {
        margin-left: 20px;
      }
    }
  }
}

.modal-form__item-group--reserved-product {
  @include breakpoint($breakpoint-sm-only) {
    position: relative;
  }

  .card__inner {
    box-shadow: none;

    @include breakpoint($breakpoint-sm-only) {
      margin-top: 110px;
      padding-top: 0;
      padding-bottom: 15px;
    }
  }

  .card--confirmed-style {
    @include breakpoint($breakpoint-sm-only) {
      border-bottom: 1px solid $color-light;
    }
  }
}

.modal-form__item-group--request-received {
  display: flex;
  flex-direction: column;

  @include breakpoint($breakpoint-md) {
    .block--request-received {
      order: 1;
    }

    .block--request-store-confirmation {
      order: 3;
    }

    .block--request-store-details {
      order: 2;
    }

    .reserved-product__image {
      order: 4;
    }

    .reserved-product__continue-shopping {
      order: 5;
    }

    .paragraph--store-info-reservation {
      order: 6;
    }
  }

  .paragraph--store-info-reservation {
    @include breakpoint($breakpoint-sm-only) {
      display: none;
    }
  }

  .modal-form__actions {
    margin-top: 30px;
  }
}

.modal-form__item-group--error {
  text-align: center;

  .reserve-in-store__kaumaha,
  .reserve-in-store__error,
  .reserve-in-store__no-results-message {
    width: 100%;
    max-width: 300px;
    color: $color-dark;
    font-size: 1.4rem;
    line-height: 1.7rem;

    @include breakpoint($breakpoint-md) {
      max-width: 355px;
    }

    @include breakpoint($breakpoint-xl) {
      max-width: 440px;
      font-size: 1.9rem;
      line-height: 2.3rem;
    }
  }

  .reserve-in-store__kaumaha {
    margin: 20px auto;
    font-weight: bold;
  }

  .reserve-in-store__error {
    margin: 0 auto 60px;
  }

  &.modal-form--error {
    .reserve-in-store__error {
      margin: 0 auto 20px;
    }
  }

  .reserve-in-store__no-results-message {
    margin: 0 auto;
  }

  .reserve-in-store__error-image {
    height: 60px;
    margin: 0 auto;
  }

  .reserve-in-store__add-to-cart {
    margin-bottom: 60px;
  }
}

// Blocks.
.block--store-info-contact {
  padding-top: 20px;

  .block__heading {
    margin: 0 0 12px;
    color: $color-dark;
    font-size: 1.6rem;
    font-weight: $font-weight-bold;
    letter-spacing: 1px;
    line-height: 1.9rem;
    text-align: left;

    @include breakpoint($breakpoint-md) {
      font-size: 1.4rem;
      line-height: 2.0rem;
    }

    @include breakpoint($breakpoint-xl) {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }
  }

  .paragraph {
    margin-bottom: 20px;
    font-size: 1.4rem;
    line-height: 2.0rem;
    text-align: left;

    &:first-child {
      margin-top: 0;
    }
  }
}

.block--request-received {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: 20px;
  margin-bottom: 0;
  padding: 0;

  @include breakpoint($breakpoint-md) {
    position: relative;
    margin-top: 0;
    margin-bottom: 30px;
  }

  .block__heading {
    margin: 0 0 10px;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.9rem;
    text-align: center;

    @include breakpoint($breakpoint-md) {
      text-align: left;
    }

    @include breakpoint($breakpoint-xl) {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }
  }
}

.block--request-store-details {
  margin-bottom: 25px;

  @include breakpoint($breakpoint-md) {
    margin-bottom: 0;
  }

  .block__heading {
    margin: 0 auto $gutter-width-half;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 2.0rem;
  }

  .zip-geolocate-result__type,
  .zip-geolocate-result__distance {
    display: none;
  }

  .zip-geolocate__result {
    padding: 0;
    border-top-style: none;
  }

  .zip-geolocate-result__name {
    margin-bottom: 0;
    font-weight: $font-weight-normal;
    text-transform: uppercase;

    @include breakpoint($breakpoint-md) {
      font-size: 1.9rem;
      line-height: 2.3rem;
    }
  }

  .zip-geolocate-result__type {
    display: block;
    margin-top: 10px;
  }
}

.block--request-store-confirmation {
  margin-top: 0;
  margin-bottom: 50px;

  @include breakpoint($breakpoint-md) {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .block__heading {
    margin-top: 10px;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 2.4rem;
    text-align: center;
    text-transform: uppercase;

    @include breakpoint($breakpoint-md) {
      margin-bottom: 10px;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-align: left;
      text-transform: none;
    }
  }

  .icon-step {
    @include breakpoint($breakpoint-md) {
      margin-bottom: 15px;
    }
  }
}

// Paragraphs.
.paragraph--request-received {
  margin: 0 auto;
  font-size: 1.4rem;
  letter-spacing: 1px;
  line-height: 2.0rem;
  text-align: center;

  @include breakpoint($breakpoint-md) {
    text-align: left;
  }
}

.paragraph--store-info-reservation {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.8rem;
  text-align: left;
}

.reserve-in-store__search-message {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 60px;
  color: $color-dark;
  font-size: 1.4rem;
  line-height: 1.7rem;
  text-align: center;

  & + .reserve-in-store__search-message {
    color: $color-medium-dark;
  }

  @include breakpoint($breakpoint-md) {
    max-width: 355px;
  }

  @include breakpoint($breakpoint-xl) {
    max-width: 440px;
    font-size: 1.9rem;
    line-height: 2.3rem;
  }
}

.reserve-in-store__not-available-message {
  margin: 50px 0 45px;
  font-size: 1.4rem;
  line-height: 2.0rem;
  text-align: center;

  @include breakpoint($breakpoint-md) {
    margin: 35px 0 50px;
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 1.4rem;
    line-height: 2.0rem;
  }
}

.reserve-in-store__available-locations {
  margin-bottom: 25px;
  color: $color-medium-dark;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center;

  @include breakpoint($breakpoint-xl) {
    font-size: 1.4rem;
    line-height: 2.0rem;
  }
}

.reserve-in-store__availability-update {
  display: none;
  position: absolute;
  margin: 17px $gutter-width-half 12px;
  background: $color-white;
  color: $color-darkest;
  font-size: 12px;
  line-height: 18px;
  text-align: left;

  @include breakpoint($breakpoint-xl) {
    display: block;
  }
}

.reserve-in-store__results-found {
  position: relative;
  margin: 7px 10px 16px;
  background: $color-white;
  color: $color-medium-dark;
  font-size: 1.4rem;
  letter-spacing: 1px;
  line-height: 2rem;
  text-align: center;
}

// Etc.
.reserve-in-store__search-image {
  display: block;
  width: 91px;
  margin: 0 auto;

  @include breakpoint($breakpoint-md) {
    width: 163px;
  }
}

.reserve-in-store__no-results-image,
.reserve-in-store__not-available-image {
  display: block;
  height: 60px;
  margin: 0 auto;
}

.reserved-product__image {
  display: block;
  width: 91px;
  margin: 0 auto 25px;

  @include breakpoint($breakpoint-md) {
    margin-bottom: 55px;
  }

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 30px;
  }
}

.modal-form--product-variant-selector {
  .radio--image ~ label {
    border: 2px solid transparent;
  }

  .radio--image:checked ~ label {
    border-color: $color-primary;

    // Resets the default in radio.scss.
    .radio__image {
      border-color: transparent;
    }
  }
}

#contact-info-form {
  .form-item--error {
    .input {
      margin-bottom: 0;
    }
  }

  .input-error {
    margin-top: 5px;
  }
}
  • URL: /components/raw/modal-form/modal-form.scss
  • Filesystem Path: src/components/01-elements/forms/modal-form/modal-form.scss
  • Size: 19.3 KB
  • Content: 
    (function (window) {
  'use strict';

  function handleSelectClick(e) {
    componentEvents.emitEvent('open-modal', [{
      id: 'product-variant-selector'
    }]);

    e.preventDefault();
  }

  function handleModalFormSubmit(e) {
    e.preventDefault();

    const select = document.querySelector('.js-select-pdp-variant-modal');
    const elements = e.target.elements;
    let newVariantId = null;

    componentEvents.emitEvent('close-modal', [{
      id: 'product-variant-selector',
      formReset: false
    }]);

    for (let i = 0; i < elements.length; i++) {
      if (elements[i].checked == true) {
        newVariantId = elements[i].value;
      }
    }

    // Update the select list that triggers the modal open.
    if (select) {
      select.value = newVariantId;
      triggerNativeEvent(select, 'change');
    }

    // Simulate the necessary pieces normally handled within product-detail.js
    // when switching variants.
    if (newVariantId) {
      const detailVariant = document.querySelector('.js-product-detail-variant--active');
      const carouselImages = document.querySelectorAll('.js-product-detail-carousel-image');
      const productInformation = document.querySelectorAll(`[data-product-id]`);
      const variantInformation = document.querySelectorAll(`[data-product-id="${newVariantId}"]`);

      // Assumes there is only 1 variant in the actual product-detail component.
      if (detailVariant) {
        detailVariant.setAttribute('data-id', newVariantId);
        window.componentEvents.emitEvent('active-product-variant');
      }

      // Update the carousel images to show the new variant.
      for (let i = 0; i < carouselImages.length; i++) {
        carouselImages[i].setAttribute('src', carouselImages[i].getAttribute('data-' + newVariantId));
      }

      for (let i = 0; i < productInformation.length; i++) {
        productInformation[i].classList.add('js-hidden');
      }
      for (let i = 0; i < variantInformation.length; i++) {
        variantInformation[i].classList.remove('js-hidden');
      }
    }
  }

  function init() {
    const select = document.querySelector('.js-select-pdp-variant-modal');
    const modalForm = document.querySelector('.js-modal-form.modal-form--product-variant-selector');

    if (select && !select.classList.contains('js-component-init-pdp')) {
      select.addEventListener('mousedown', handleSelectClick);
      select.classList.add('js-component-init-pdp');
    }

    if (modalForm && !modalForm.classList.contains('js-component-init')) {
      modalForm.addEventListener('submit', handleModalFormSubmit);
      modalForm.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/modal-form/product-variant-selector-form.js
  • Filesystem Path: src/components/01-elements/forms/modal-form/product-variant-selector-form.js
  • Size: 2.9 KB
  • Content: 
    (function (window) {
  'use strict';

  const confirmationNames = document.querySelector('.reserve-in-store--request-received--customer-name');
  const confirmationEmail = document.querySelector('.icon-step--check-your-email .icon-step__details');
  const modalForm = document.querySelector('.js-modal-form.modal-form--reserve-in-store');

  function init() {
    if (modalForm && !modalForm.classList.contains('js-component-init')) {
      if(confirmationNames) {
        confirmationNames.setAttribute('data-content', btoa(confirmationNames.innerHTML));
      }

      if(confirmationEmail) {
        confirmationEmail.setAttribute('data-content', btoa(confirmationEmail.innerHTML));
      }

      modalForm.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/modal-form/reserve-in-store-form.js
  • Filesystem Path: src/components/01-elements/forms/modal-form/reserve-in-store-form.js
  • Size: 958 Bytes

There are no notes for this item.