<div class="shipping-dropdown">
    <div class="form-item form-item--select form-item--required">
        <div class="select-wrapper">
            <label for="" class="label label--required">
      Ship to
      <select id="" name="shopping-cart-ship-to" class="select js-select">
        <option value="option1" >500 N Kingsbury St Chicago, IL 60654, USA</option>
        <option value="option2" >600 S 55th St New York, NY 10280, USA</option>
      </select>
      </label>
        </div>
    </div>
</div>
<div class="shipping-dropdown">
  {{#if preSelected}}
  <strong>{{label}}</strong>
  <br>
  <span>{{preSelected}}</span>
  {{else}}
  {{> @select-normal}}
  {{/if}}
</div>
{
  "name": "shopping-cart-ship-to",
  "label": "Ship to",
  "required": true,
  "options": [
    {
      "value": "option1",
      "label": "500 N Kingsbury St Chicago, IL 60654, USA"
    },
    {
      "value": "option2",
      "label": "600 S 55th St New York, NY 10280, USA"
    }
  ]
}
  • Content:
    (function (window) {
      function init() {
        const selects = document.querySelectorAll('.js-shipping-method-dropdown');
    
        Array.prototype.forEach.call(selects, function (select) {
          if (!select.dataset.shippingMethodChangeInit) {
            select.addEventListener('change', handleShippingMethodChange);
            select.dataset.shippingMethodChangeInit = true;
          }
        });
      }
    
      function handleShippingMethodChange(data) {
        // `data` param may be an event or the select element itself.
        const select = data.target || data;
        componentEvents.emitEvent('shipping-method-changed', [ select ]);
      }
    
      function handleShippingMethodUpdate() {
        const selects = document.querySelectorAll('.js-shipping-method-dropdown');
        Array.prototype.forEach.call(selects, function (select) {
          handleShippingMethodChange(select);
        });
      }
    
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
        componentEvents.on('shipping-method-update', handleShippingMethodUpdate);
      }
    
      init();
    })(this);
    
  • URL: /components/raw/shipping-dropdown/shipping-dropdown.js
  • Filesystem Path: src/components/01-elements/form-items/shipping-dropdown/shipping-dropdown.js
  • Size: 1 KB
  • Content:
    .shipping-dropdown {
      @if $brand == 'b2b' {
        padding-right: 2rem;
        padding-bottom: 2rem;
    
        strong,
        span {
          line-height: 1.8;
        }
    
        label,
        strong {
          @include font-bold;
          font-size: 1.4rem;
        }
    
        .form-item--error {
          .select {
            border-width: 2px;
            border-color: $color-error;
          }
        }
    
        .select-wrapper {
          margin-top: 1rem;
    
          @include breakpoint($breakpoint-md) {
            max-width: 40rem;
          }
        }
    
        .input-error {
          @include font-normal;
    
          @include breakpoint($breakpoint-md) {
            max-width: 40rem;
          }
        }
    
        @include breakpoint($breakpoint-md) {
          padding-top: 2.5rem;
    
          // Normally, we would do & + & here, but this doesn’t work because we
          // scope all b2b styles in b2b.scss.
          & + .shipping-dropdown {
            padding-top: 0;
          }
        }
      }
    }
    
  • URL: /components/raw/shipping-dropdown/shipping-dropdown.scss
  • Filesystem Path: src/components/01-elements/form-items/shipping-dropdown/shipping-dropdown.scss
  • Size: 882 Bytes

There are no notes for this item.