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

Vue components for E-Com Plus Storefront

<portal :selector="`#${portalId}`">
  <div class="product-quickview">
    <a-backdrop
      :is-visible="isVisible"
      @hide="hide"
    />

    <transition
      enter-active-class="animated zoomIn"
      leave-active-class="animated fadeOutUp slow"
    >
      <div
        class="product-quickview__box card"
        v-if="isVisible"
      >
        <slot name="header">
          <div class="product-quickview__header card-header">
            {{ productName }}
            <button
              type="button"
              class="close"
              :aria-label="i19close"
              @click="hide"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </slot>

        <div class="product-quickview__body card-body">
          <div
            v-if="!productName"
            class="product-quickview__loading"
          >
            <div
              class="spinner-border"
              role="status"
            >
              <span class="sr-only">Loading...</span>
            </div>
          </div>

          <div class="container">
            <the-product
              is-quickview
              :product-id="productId"
              :product="product"
              @update:product="setProduct"
              @buy="hide"
            />
          </div>

          <a
            v-if="productName"
            class="product-quickview__btn-redirect btn btn-secondary"
            :href="productLink"
          >
            {{ i19seeMoreInfo }}
          </a>
        </div>
      </div>
    </transition>
  </div>
</portal>