<div class="mymaui-customize js-mymaui-customize">
    <div class="mymaui-customize__options">
        <div class="mymaui-customize__option mymaui-customize__option--square js-mymaui-customize-option">
            <div class="mymaui-customize__option-label">
                Frame Color: <span class="mymaui-customize__option-value js-mymaui-customize-option-value">Black</span>
                <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Morbi semper sed elit eu tempus.</div>
            </div>
            <ul class="mymaui-customize__items">
                <li class="mymaui-customize__item">
                    <input type="radio" id="fc-black" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-black" data-value="Black" checked="true">
                    <label class="mymaui-customize__item-label" for="fc-black">
            <span class="mymaui-customize__item-alternate-fill" style="background: #303032;"></span>
            <span class="u-visually-hidden">Black</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="fc-brown" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-brown" data-value="Brown">
                    <label class="mymaui-customize__item-label" for="fc-brown">
            <span class="mymaui-customize__item-alternate-fill" style="background: #543a10;"></span>
            <span class="u-visually-hidden">Brown</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="fc-green" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-green" data-value="Green">
                    <label class="mymaui-customize__item-label" for="fc-green">
            <span class="mymaui-customize__item-alternate-fill" style="background: #66da4a;"></span>
            <span class="u-visually-hidden">Green</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="fc-purple" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-purple" data-value="Purple">
                    <label class="mymaui-customize__item-label" for="fc-purple">
            <span class="mymaui-customize__item-alternate-fill" style="background: #8c46d2;"></span>
            <span class="u-visually-hidden">Purple</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="fc-blue" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-blue" data-value="Blue">
                    <label class="mymaui-customize__item-label" for="fc-blue">
            <span class="mymaui-customize__item-alternate-fill" style="background: #5353df;"></span>
            <span class="u-visually-hidden">Blue</span>
          </label>
                </li>
            </ul>
        </div>
        <div class="mymaui-customize__option mymaui-customize__option--round js-mymaui-customize-option">
            <div class="mymaui-customize__option-label">
                Lens Color: <span class="mymaui-customize__option-value js-mymaui-customize-option-value">Neutral Grey</span>
                <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            </div>
            <ul class="mymaui-customize__items">
                <li class="mymaui-customize__item js-customize-disabled">
                    <input type="radio" id="lc-bluehawaii" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-bluehawaii" data-value="Blue Hawaii">
                    <label class="mymaui-customize__item-label" for="lc-bluehawaii">
            <span class="mymaui-customize__item-alternate-fill" style="background: #297fbc;"></span>
            <span class="u-visually-hidden">Blue Hawaii</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="lc-neutralgrey" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-neutralgrey" data-value="Neutral Grey" checked="true">
                    <label class="mymaui-customize__item-label" for="lc-neutralgrey">
            <span class="mymaui-customize__item-alternate-fill" style="background: #535B54;"></span>
            <span class="u-visually-hidden">Neutral Grey</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="lc-hclbronze" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-hclbronze" data-value="HCL® Bronze">
                    <label class="mymaui-customize__item-label" for="lc-hclbronze">
            <span class="mymaui-customize__item-alternate-fill" style="background: #987858;"></span>
            <span class="u-visually-hidden">HCL® Bronze</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="lc-mauiht" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-mauiht" data-value="Maui HT™">
                    <label class="mymaui-customize__item-label" for="lc-mauiht">
            <span class="mymaui-customize__item-alternate-fill" style="background: #798b57;"></span>
            <span class="u-visually-hidden">Maui HT™</span>
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="lc-mauirose" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-mauirose" data-value="Maui Rose®">
                    <label class="mymaui-customize__item-label" for="lc-mauirose">
            <span class="mymaui-customize__item-alternate-fill" style="background: #9c5950;"></span>
            <span class="u-visually-hidden">Maui Rose®</span>
          </label>
                </li>
            </ul>
        </div>
        <div class="mymaui-customize__option mymaui-customize__option--square mymaui-customize__option--label js-mymaui-customize-option">
            <div class="mymaui-customize__option-label">
                Gradient
                <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">In vitae congue leo. Morbi orci arcu, condimentum sit amet semper sed.</div>
            </div>
            <ul class="mymaui-customize__items">
                <li class="mymaui-customize__item">
                    <input type="radio" id="gr-single" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="gradient" data-id="gr-single" data-value="Single">
                    <label class="mymaui-customize__item-label" for="gr-single">
            <span class="mymaui-customize__item-alternate-fill" style="background: linear-gradient(-180deg, #FFFFFF 0%, #999999 100%);"></span>
            Single
          </label>
                </li>
                <li class="mymaui-customize__item">
                    <input type="radio" id="gr-bi" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="gradient" data-id="gr-bi" data-value="Bi-Gradient" checked="true">
                    <label class="mymaui-customize__item-label" for="gr-bi">
            <span class="mymaui-customize__item-alternate-fill" style="background: linear-gradient(-180deg, #FFFFFF 0%, #999999 50%, #FFFFFF 100%);"></span>
            Bi-Gradient
          </label>
                </li>
            </ul>
        </div>
        <div class="mymaui-customize__option mymaui-customize__option--select js-mymaui-customize-option">
            <div class="mymaui-customize__option-label">
                Readers
                <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Integer congue sit amet turpis sagittis dictum. Sed et congue nisi. Quisque vehicula finibus sapien a faucibus. Nunc rhoncus urna nisi, at molestie dolor vehicula ac.</div>
            </div>
            <ul class="mymaui-customize__items">
                <li class="mymaui-customize__item">
                    <div class="select-wrapper">
                        <select id="readers" name="readers" class="select js-select">
              <option value="none">No readers</option>
            </select>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="mymaui-customize js-mymaui-customize">
  <div class="mymaui-customize__options">
    {{#each options}}
    <div class="mymaui-customize__option{{#each modifiers}} mymaui-customize__option--{{this}}{{/each}} js-mymaui-customize-option">
      <div class="mymaui-customize__option-label">
        {{label}}{{#if valueInLabel}}: <span class="mymaui-customize__option-value js-mymaui-customize-option-value">{{#each items}}{{#if checked}}{{label}}{{/if}}{{/each}}</span>{{/if}}
        {{#if tooltip}}
        <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          {{render '@icons--question-mark-circle'}}
        </button>
        {{> @tooltip tooltip}}
        {{/if}}
      </div>
      <ul class="mymaui-customize__items{{#if disabled}} js-customize-disabled{{/if}}">
        {{#each items}}
        <li class="mymaui-customize__item{{#if disabled}} js-customize-disabled{{/if}}">
          {{#if input}}
          <input type="{{input}}" id="{{id}}" class="{{input}} {{input}}--{{variant}} mymaui-customize__item-input js-mymaui-customize-item-input" name="{{../name}}" data-id="{{id}}" data-value="{{label}}"{{#if checked}} checked="true"{{/if}}>
          <label class="mymaui-customize__item-label" for="{{id}}">
            {{#if background}}
            <span class="mymaui-customize__item-alternate-fill" style="background: {{background}};"></span>
            {{/if}}
            {{#if ../hideItemLabels}}
            <span class="u-visually-hidden">{{label}}</span>
            {{else}}
            {{label}}
            {{/if}}
          </label>
          {{/if}}
          {{#if options}}
          <div class="select-wrapper">
            <select id="{{id}}" name="{{name}}" class="select js-select">
              {{#each options}}
              <option value="{{@key}}">{{this}}</option>
              {{/each}}
            </select>
          </div>
          {{/if}}
        </li>
        {{/each}}
      </ul>
    </div>
    {{/each}}
  </div>
</div>
{
  "pageCss": [
    "products"
  ],
  "options": [
    {
      "name": "frame-color",
      "label": "Frame Color",
      "hideItemLabels": true,
      "modifiers": [
        "square"
      ],
      "valueInLabel": true,
      "tooltip": {
        "value": "Morbi semper sed elit eu tempus."
      },
      "items": [
        {
          "id": "fc-black",
          "input": "radio",
          "variant": "alternate",
          "background": "#303032",
          "label": "Black",
          "checked": true
        },
        {
          "id": "fc-brown",
          "input": "radio",
          "variant": "alternate",
          "background": "#543a10",
          "label": "Brown"
        },
        {
          "id": "fc-green",
          "input": "radio",
          "variant": "alternate",
          "background": "#66da4a",
          "label": "Green"
        },
        {
          "id": "fc-purple",
          "input": "radio",
          "variant": "alternate",
          "background": "#8c46d2",
          "label": "Purple"
        },
        {
          "id": "fc-blue",
          "input": "radio",
          "variant": "alternate",
          "background": "#5353df",
          "label": "Blue"
        }
      ]
    },
    {
      "name": "lens-color",
      "label": "Lens Color",
      "hideItemLabels": true,
      "modifiers": [
        "round"
      ],
      "tooltip": {
        "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      },
      "valueInLabel": true,
      "items": [
        {
          "id": "lc-bluehawaii",
          "input": "radio",
          "variant": "alternate",
          "background": "#297fbc",
          "label": "Blue Hawaii",
          "disabled": true
        },
        {
          "id": "lc-neutralgrey",
          "input": "radio",
          "variant": "alternate",
          "background": "#535B54",
          "label": "Neutral Grey",
          "checked": true
        },
        {
          "id": "lc-hclbronze",
          "input": "radio",
          "variant": "alternate",
          "background": "#987858",
          "label": "HCL® Bronze"
        },
        {
          "id": "lc-mauiht",
          "input": "radio",
          "variant": "alternate",
          "background": "#798b57",
          "label": "Maui HT™"
        },
        {
          "id": "lc-mauirose",
          "input": "radio",
          "variant": "alternate",
          "background": "#9c5950",
          "label": "Maui Rose®"
        }
      ]
    },
    {
      "name": "gradient",
      "label": "Gradient",
      "modifiers": [
        "square",
        "label"
      ],
      "tooltip": {
        "value": "In vitae congue leo. Morbi orci arcu, condimentum sit amet semper sed."
      },
      "items": [
        {
          "id": "gr-single",
          "input": "radio",
          "variant": "alternate",
          "background": "linear-gradient(-180deg, #FFFFFF 0%, #999999 100%)",
          "label": "Single"
        },
        {
          "id": "gr-bi",
          "input": "radio",
          "variant": "alternate",
          "background": "linear-gradient(-180deg, #FFFFFF 0%, #999999 50%, #FFFFFF 100%)",
          "label": "Bi-Gradient",
          "checked": true
        }
      ]
    },
    {
      "name": "readers",
      "label": "Readers",
      "modifiers": [
        "select"
      ],
      "tooltip": {
        "value": "Integer congue sit amet turpis sagittis dictum. Sed et congue nisi. Quisque vehicula finibus sapien a faucibus. Nunc rhoncus urna nisi, at molestie dolor vehicula ac."
      },
      "items": [
        {
          "id": "readers",
          "name": "readers",
          "options": {
            "none": "No readers"
          }
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      function camelCase(string) {
        return string.replace(/-([a-z])/g, (original, match) => (match[0].toUpperCase()));
      }
    
      function getElementData(el) {
        const attributes = [...el.attributes];
        const data = {};
    
        for (let i = 0; i < attributes.length; i++) {
          if (/^data-/.test(attributes[i].name)) {
            data[camelCase(attributes[i].name)] = attributes[i].value;
          }
        }
    
        return data;
      }
    
      function handleInputChange(e) {
        const input = e.target;
        const option = input.closest('.js-mymaui-customize-option, .js-customize-option');
    
        if (option) {
          const optionValue = option.querySelector('.js-mymaui-customize-option-value, .js-customize-option-value');
          const inputValue = input.getAttribute('data-value');
    
          if (optionValue && inputValue) {
            optionValue.innerText = inputValue;
          }
        }
      }
    
      // Note that this function is not sophisticated enough to cope with e.g. TWO
      // completely separate customization components on one page.
      //
      // Currently, there is only one multi-customization configuration, namely
      // the Rimless Optical products where the user must select both Shape and
      // Color.
      //
      // The function is meant to satisfy the requirements of that specific config
      // AND single-configuration situations only.
      function customizationsNotify(e) {
        const selections = document.querySelectorAll('.js-customize input[type=radio]:checked');
        const customizations = {};
        const rimless = document.querySelector('.js-customize.customize--rimless');
        const clipon = document.querySelector('.js-customize.customize--core-clip-on');
    
    
        for (let i = 0; i < selections.length; i++) {
          const data = getElementData(selections[i]);
    
          if (data.hasOwnProperty('dataFrameColor') && selections.length > 1) {
            delete data.dataValue;
          }
    
          Object.assign(customizations, data);
        }
    
        if (rimless) {
          customizations.dataFrameStyle = customizations.dataFrameStyle.replace(/-[a-z0-9]+$/i, '')
          customizations.rimless = true;
        }
    
        if (clipon) {
          customizations.clipon = true;
        }
    
        componentEvents.emitEvent('customization-options-notify', [customizations]);
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-mymaui-customize, .js-customize');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const instance = instances[i];
            const inputs = instance.querySelectorAll('.js-mymaui-customize-item-input, .js-customize-item-input');
    
            for (let i = 0; i < inputs.length; i++) {
              inputs[i].addEventListener('change', handleInputChange);
    
              if (inputs[i].type === 'radio') {
                inputs[i].addEventListener('click', customizationsNotify);
              }
            }
    
            // Prevent an instance from being initialized more than once.
            instance.classList.add('js-component-init');
          }
        }
    
        // Establish the current state of customizations on page load.
        window.addEventListener('load', customizationsNotify);
      }
    
      // 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/customize/customize.js
  • Filesystem Path: src/components/02-components/customize/customize.js
  • Size: 3.3 KB
  • Content:
    .customize,
    .mymaui-customize {
      position: relative;
    
      &:before {
        position: absolute;
        right: $gutter-width-half;
        bottom: 0;
        left: $gutter-width-half;
        width: calc(100% - 20px);
        border-bottom: 1px solid $color-light;
        content: '';
        z-index: 1;
      }
    
      @include breakpoint($breakpoint-xl) {
        &:before {
          content: none;
        }
      }
    }
    
    .customize__options,
    .mymaui-customize__options {
      padding: 0 20px;
      border-top: 1px solid $color-lighter;
    
      @include breakpoint($breakpoint-xl) {
        padding: 0;
        border: 0;
      }
    }
    
    .mymaui-customize__options {
      padding-bottom: 30px;
    }
    
    .customize__option,
    .mymaui-customize__option {
      @include clearfix;
    
      &:last-child {
        .tooltip {
          top: auto;
          right: 25px;
          bottom: -5px;
        }
    
        .tooltip::before {
          top: auto;
          bottom: 5px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        &:last-child {
          .tooltip {
            bottom: 0;
          }
        }
      }
    }
    
    .customize__option-label,
    .mymaui-customize__option-label {
      position: relative;
      margin: 20px 0 5px;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: normal;
      line-height: 1.7rem;
    
      .tooltip {
        display: none;
        position: absolute;
        top: -10px;
        right: 25px;
    
        &:before {
          top: 5px;
          right: -5px;
          left: auto;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 5px solid #0db287;
          border-right-style: none;
        }
      }
    
      .js-tooltip--open {
        display: block;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .customize__tooltip-trigger,
    .mymaui-customize__tooltip-trigger {
      position: absolute;
      right: 0;
      margin: 0;
      padding: 0;
      border-style: none;
      background: transparent;
      cursor: pointer;
      fill: $color-medium-dark;
    
      @include breakpoint($breakpoint-xl) {
        top: 5px;
      }
    }
    
    .customize__option-value,
    .mymaui-customize__option-value {
      font-weight: $font-weight-normal;
    }
    
    .customize__items,
    .mymaui-customize__items {
      @include reset-list;
    }
    
    .customize__item,
    .mymaui-customize__item {
      margin-right: 10px;
      float: left;
    
      .customize__option--select &,
      .mymaui-customize__option--select & {
        width: 100%;
      }
    
      .customize__option--label &,
      .mymaui-customize__option--label & {
        width: 50%;
        margin: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-right: 40px;
    
        .customize__option--select &,
        .mymaui-customize__option--select & {
          width: 50%;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 30px;
    
        .customize__option--select &,
        .mymaui-customize__option--select & {
          width: 100%;
        }
      }
    }
    
    .radio + .mymaui-customize__item-label {
      height: 40px;
      line-height: 40px;
    
      &:before {
        top: 7px;
        left: 7px;
        width: 26px;
        height: 26px;
      }
    
      &:after {
        width: 40px;
        height: 40px;
        border-width: 3px;
      }
    
      .customize__option--square &,
      .mymaui-customize__option--square & {
        &:before,
        &:after {
          border-radius: 0;
        }
      }
    
      .customize__option--label &,
      .mymaui-customize__option--label & {
        padding-left: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        height: 60px;
        line-height: 60px;
    
        &:before {
          top: 10px;
          left: 10px;
          width: 40px;
          height: 40px;
        }
    
        &:after {
          width: 60px;
          height: 60px;
        }
    
        .customize__option--label &,
        .mymaui-customize__option--label & {
          padding-left: 70px;
        }
      }
    }
    
    .radio:checked + .customize__item-label,
    .radio:checked + .mymaui-customize__item-label {
      font-weight: $font-weight-bold;
    }
    
    .mymaui-customize__item-alternate-fill {
      position: absolute;
      top: 7px;
      left: 7px;
      width: 26px;
      height: 26px;
      z-index: 1;
      box-sizing: border-box;
    
      .customize__option--round &,
      .mymaui-customize__option--round & {
        border-radius: 50%;
      }
    
      @include breakpoint($breakpoint-md) {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
      }
    }
    
    .js-customize-disabled {
      display: none;
    }
    
    .customize__option-value {
      font-weight: $font-weight-normal;
    }
    
    .customize__items {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
    
    .customize__item {
      flex: 0 0 85px;
      margin: 0 15px 15px 0;
      list-style-type: none;
    
      .form-item--radio {
        margin: 0;
      }
    
      .radio__image {
        margin: 0;
      }
    
      @include breakpoint($breakpoint-lg) {
        flex: 0 0 100px;
      }
    }
    
    .customize__options-help {
      margin-top: 35px;
      padding-bottom: 20px;
    
      .paragraph {
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
    .customize__option {
      .customize__items {
        margin-top: 15px;
      }
    
      .customize__item {
        flex: 0 0 30px;
        margin-right: 15px;
    
        @include breakpoint($breakpoint-md) {
          flex: 0 0 60px;
          margin-right: 20px;
        }
      }
    
      .customize__item-label {
        width: 30px;
        height: 30px;
        padding-left: 0;
    
        @include breakpoint($breakpoint-md) {
          width: 60px;
          height: 60px;
        }
      }
    
      .radio--alternate ~ label {
        &:before {
          display: none;
        }
    
        &:after {
          @include breakpoint($breakpoint-md) {
            width: 60px;
            height: 60px;
            border-width: 3px;
          }
        }
    
        .radio__alternate-fill {
          @include breakpoint($breakpoint-md) {
            top: 10px;
            left: 10px;
            width: 40px;
            height: 40px;
          }
        }
      }
    
      .radio--alternate:not(:checked) ~ label {
        .radio__alternate-fill {
          opacity: 1;
        }
      }
    }
    
    // Note:
    //
    // .customize__option--round has no special styles because:
    //
    // a) The radio--alternate-fill variant itself is round, and
    // b) Customizations of size etc for this context are common to round and
    //    square (so found in .customize__option).
    .customize__option--square {
      .radio--alternate ~ label {
        &:after,
        .radio__alternate-fill {
          border-radius: 0;
        }
      }
    }
    
    .customize__option--switch {
      border-top: 1px solid $color-light;
    
      .customize__items {
        display: block;
      }
    
      .customize__item {
        display: block;
        width: 100%;
        margin-right: 0;
      }
    }
    
    .customize--core-clip-on {
      .customize__option--square {
        margin-bottom: 25px;
      }
    
      .customize__items {
        margin-top: 5px;
      }
    }
    
    .customize--rimless {
      .customize__item {
        flex: 0 0 83px;
        margin: 0 $gutter-width-half $gutter-width-half 0;
    
        @include breakpoint($breakpoint-md) {
          flex: 0 0 100px;
        }
      }
    
      .radio__image {
        width: 55px;
        padding: 14px 12px;
    
        @include breakpoint($breakpoint-md) {
          width: 80px;
          padding: 19px 8px;
        }
      }
    
      .radio__image--narrow {
        width: 75px;
        padding: 3px 2px;
    
        @include breakpoint($breakpoint-md) {
          width: 92px;
        }
      }
    }
    
    .customize--rimless-colors {
      .customize__option-label {
        display: none;
    
        @include breakpoint($breakpoint-lg) {
          display: block;
        }
      }
    }
    
  • URL: /components/raw/customize/customize.scss
  • Filesystem Path: src/components/02-components/customize/customize.scss
  • Size: 6.9 KB

Customize Events

The Customize component emits an event, customization-options-notify, on the load of a page containing the component, and subsequently, each time one of the component’s child radio buttons is clicked.

Various other components listen for this type of event and modify their own internal states or that of other elements in the dom.

The event should contain an object with the following properties:

  • dataFrameStyle: that part of the product sku designating the frame, e.g. MJO2001. Specified by the value attribute of a radio with the name attribute set to lens-shape.
  • dataFrameColor: that part of the product sku designating the color, e.g. 30. Specified by the value attribute of a radiowith thenameattribute set toframe-color`.
  • dataValue: the name of the frame, as used in e.g. the Product Detail component. Specified by the data-value attribute of a radio.

The event object could also contain the following property:

  • dataTempleLength: that part of the product sku containing the temple length.

These properties will be combined using the @product-detail component’s data-sku-form attribute.