@ecomplus/storefront-components/src/html/ShippingCalculator.html

Vue components for E-Com Plus Storefront

<div class="shipping-calculator">
  <form
    v-if="canInputZip"
    @submit.prevent="submitZipCode"
    class="shipping-calculator__form"
  >
    <div class="form-group">
      <label for="shipping-calculator-zip">
        {{ i19calculateShipping }}
      </label>
      <div class="input-group">
        <cleave-input
          type="tel"
          class="form-control shipping-calculator__input"
          id="shipping-calculator-zip"
          :placeholder="i19zipCode"
          :aria-label="i19zipCode"
          :options="cleaveOptions"
          v-model="localZipCode"
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-secondary"
            type="submit"
            :aria-label="i19calculateShipping"
          >
            <i class="i-shipping-fast"></i>
          </button>
        </div>
      </div>
    </div>
  </form>

  <div class="shipping-calculator__services">
    <transition-group
      enter-active-class="animated fadeInDown"
      leave-active-class="animated position-absolute fadeOutUp"
    >
      <div
        v-if="isWaiting"
        key="waiting"
        class="spinner-border spinner-border-sm"
        role="status"
      >
        <span class="sr-only">Loading...</span>
      </div>

      <div
        v-else
        key="services"
        class="list-group"
      >
        <transition
          enter-active-class="animated fadeInUp"
          leave-active-class="animated fadeOutDown"
        >
          <div
            v-if="canSelectServices && !canAutoSelectService &&
              selectedService === null && shippingServices.length"
            class="shipping-calculator__label"
          >
            <i class="i-arrow-down animated wobble"></i>
            {{ i19selectShippingMsg }}
          </div>
        </transition>
        <component
          :is="canSelectServices ? 'a' : 'div'"
          :href="canSelectServices && '#'"
          class="list-group-item"
          v-for="(service, i) in shippingServices"
          :key="i"
          :class="{
            'list-group-item-action': canSelectServices,
            active: canSelectServices && selectedService === i
          }"
          @click.prevent="setSelectedService(i)"
        >
          <span class="shipping-calculator__option">
            <slot
              name="option"
              v-bind="{ service }"
            >
              <shipping-line
                :shipping-line="service.shipping_line"
                :production-deadline="productionDeadline"
                :data-service-code="service.service_code"
              />
              <div
                v-if="canSelectServices && !canAutoSelectService"
                class="custom-control custom-radio"
              >
                <input
                  type="radio"
                  :id="`shipping-method-${service.service_code}`"
                  name="shipping-method-select"
                  class="custom-control-input"
                  :checked="selectedService === i"
                />
                <label 
                  class="custom-control-label" 
                  :for="`shipping-method-${service.service_code}`"
                >
                  <small>{{ service.label }}</small>
                </label>
              </div>
              <small v-else>{{ service.label }}</small>
            </slot>
          </span>
        </component>
      </div>
    </transition-group>

    <transition
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <div
        v-if="freeFromPercentage"
        class="shipping-calculator__free-from-value"
      >
        <slot
          name="free-from-value"
          v-bind="{ amountSubtotal, freeFromValue, freeFromPercentage }"
        >
          <span>
            {{ i19add$1ToEarn.replace('$1', formatMoney(freeFromValue - amountSubtotal)) }}
            <strong>{{ i19freeShipping }}</strong>
          </span>

          <div
            v-if="freeFromPercentage >= 33"
            class="progress"
          >
            <div
              class="progress-bar progress-bar-striped"
              role="progressbar"
              :style="`width: ${freeFromPercentage}%`"
              :aria-valuenow="freeFromPercentage"
              aria-valuemin="0"
              aria-valuemax="100"
            >
              <span>
                {{ i19freeShipping }}
                <i class="i-truck mx-1"></i>
                <strong>{{ freeFromPercentage }}%</strong>
              </span>
            </div>
          </div>
        </slot>
      </div>
    </transition>
  </div>
</div>