<div class="shipping-dropdown">
    <strong>Shipping Method</strong>
    <br>
    <span>Next Day — ETA: March 8th</span>
</div>
<div class="shipping-dropdown">
  {{#if preSelected}}
  <strong>{{label}}</strong>
  <br>
  <span>{{preSelected}}</span>
  {{else}}
  {{> @select-normal}}
  {{/if}}
</div>
{
  "preSelected": "Next Day — ETA: March 8th",
  "id": "shopping-cart-ship-option",
  "name": "shopping-cart-ship-option",
  "label": "Shipping Method",
  "required": null,
  "options": [
    {
      "value": "1",
      "label": "Next Day — ETA: March 8th"
    },
    {
      "value": "2",
      "label": "2-Day — ETA: March 9th"
    },
    {
      "value": "3",
      "label": "Standard — ETA: March 17th"
    }
  ]
}
  • 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 {
          font-size: 1.4rem;
          font-weight: $font-weight-bold;
        }
    
        .form-item--error {
          .select {
            border-width: 2px;
            border-color: $color-error;
          }
        }
    
        .select-wrapper {
          height: 5rem;
          margin-top: 1rem;
    
          @include breakpoint($breakpoint-md) {
            max-width: 40rem;
          }
        }
    
        .input-error {
          font-weight: $font-weight-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: 926 Bytes

There are no notes for this item.