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

Vue components for E-Com Plus Storefront

<div class="buy-together">
  <transition enter-active-class="animated fadeInDown">
    <div v-if="hasLoadedItems && recommendedItems.length">
      <div class="buy-together__title">
        <div class="buy-together__discount lead mb-3">
          {{ i19buyTogether }}
          <span
            v-if="discount"
            class="badge badge-success"
          >
            {{ formatMoney(discount) }} <span>OFF</span>
          </span>
        </div>
      </div>

      <div class="buy-together__row row">
        <div
          class="col-12"
          :class="productIds.length > 1 ? 'col-md' : 'col-md-6 col-lg-4'"
        >
          <div class="row">
            <div
              v-if="items.length"
              v-for="item in items"
              :key="item._id"
              class="buy-together__item col-12"
              :class="`col-md-${(12 / items.length)}`"
            >
              <product-card
                :product="item"
                :productId="item._id"
                :is-loaded="true"
                v-bind="productCardProps"
              />
            </div>
          </div>
        </div>
        <div class="buy-together__cta col-auto">
          <a-prices
            :product="{ price: subtotal - discount, base_price: subtotal }"
            :is-literal="true"
            :is-big="true"
          />
          <button
            v-if="canAddToCart"
            class="btn btn-lg btn-primary mt-3"
            @click="buy"
          >
            <i class="i-shopping-basket mr-1"></i>
            {{ i19buyTogether }}
          </button>
        </div>
      </div>
    </div>
  </transition>

  <transition leave-active-class="animated fadeOut">
    <slot v-if="!hasLoadedItems"/>
  </transition>
</div>