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

Vue components for E-Com Plus Storefront

<div class="search">
  <a-backdrop
    :is-visible="isVisible"
    @hide="hide"
  />

  <transition
    enter-active-class="animated zoomIn"
    leave-active-class="animated fadeOutUp slow"
  >
    <div
      class="search__box card"
      v-if="isVisible || hasSearched"
      v-show="isVisible"
    >
      <slot
        name="header"
        v-bind="{ isSearching }"
      >
        <header class="search__header card-header">
          <div class="search__input-group">
            <input
              type="search"
              autocomplete="off"
              class="search__input form-control form-control-lg"
              :placeholder="i19searchProducts"
              ref="input"
              v-model="localTerm"
            >
            <button
              type="submit"
              class="search__submit"
              :aria-label="i19search"
            >
              <i class="i-search"></i>
            </button>
          </div>

          <div class="search__status">
            <div
              v-if="isSearching"
              class="search__spinner spinner-grow"
              role="status"
            >
              <span class="sr-only">Loading...</span>
            </div>
            <button
              type="button"
              class="close"
              :aria-label="i19close"
              @click="hide"
            >
              <i class="i-times-circle"></i>
            </button>
          </div>
        </header>
      </slot>

      <article class="search__body card-body">
        <slot
          name="search-engine"
          v-bind="{ term: searchTerm }"
        >
          <SearchEngine
            v-bind="{ ...searchEngineProps, pageSize, autoFixScore }"
            :term.sync="searchTerm"
            :is-filterable="false"
            :product-card-props="productCardProps"
            @fetch="handleFetching"
            @search="handleSearch"
          >
            <div
              class="search__loading spinner-border"
              role="status"
            >
              <span class="sr-only">Loading...</span>
            </div>
          </SearchEngine>
        </slot>
      </article>

      <footer class="search__footer card-footer">
        <slot
          name="count-results"
          v-bind="{ hasSearched, totalSearchResults }"
        >
          <transition enter-active-class="animated fadeInDown">
            <div
              v-if="hasSearched"
              class="search__count"
            >
              <strong>{{ totalSearchResults }}</strong>
              {{ i19items.toLowerCase() }}
              <button
                type="submit"
                v-if="totalSearchResults > pageSize"
                class="ml-2 btn btn-primary"
              >
                {{ i19seeAll }}
              </button>
            </div>
          </transition>
        </slot>

        <slot
          name="history"
          v-bind="{ history }"
        >
          <transition enter-active-class="animated fadeInDown">
            <div
              v-if="history.length"
              class="search__history d-none d-lg-block"
            >
              <i class="i-history"></i>
              <a
                class="search__history-link"
                v-for="term in history"
                href="#"
                @click.prevent="setSearchTerm(term)"
                v-text="term"
              ></a>
            </div>
          </transition>
        </slot>
      </footer>
    </div>
  </transition>
</div>