ZeenCardProduct

Компонент карточки товара

Примеры:

50

Товар 1 (категория)

Товар 1

Товар в наличии

50

коинов

0

Товар 2 (категория)

Товар 2

Товар распродан

20

коинов

Распродано

props

Название	Тип	Обязательный	По умолчанию	Описание
item	object	-		Объект товара
currency	string	-	Коинов	Валюта
notAvailableText	string	-	Распродано	Текст заглушки, когда количество товара равно 0

slot

Компонент имеет 7 именованных слота:

• picture
• stock
• category
• title
• description
• full-price
• footer

Source Code - исходный код компонента

<template lang="pug">
  .zeen-card(:id='`zeen-card-${componentId}`' v-on='$listeners' v-bind='$attrs')
    .zeen-card__top
      slot(name='picture' :item="item")
        .zeen-card__picture(
          v-if="picture"
          :style="{'background-image': `url(${picture})`}"
        )

      slot(name='stock' :item="item")
        .zeen-card__stock {{ quantity }}

    .zeen-card__information
      slot(name='category' :item="item")
        .zeen-card__category {{ category }}

      slot(name='title' :item="item")
        .zeen-card__title {{ item.title }}

      slot(name='description' :item="item")
        .zeen-card__description {{ item.description }}

      slot(name='full-price' :item="item")
        .zeen-card__full-price
          .zeen-card__price {{ item.price }}
          .zeen-card__currency {{ currency }}

      .zeen-card__footer
        slot(name='footer' :item="item")

    .zeen-card__not-available(v-if='!isAvailable')
      .zeen-card__text {{ notAvailableText }}

</template>

<script>
export default {
  name: 'ZeenCardProduct',
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    currency: {
      type: String,
      default: 'коинов',
    },
    notAvailableText: {
      type: String,
      default: 'Распродано',
    },
  },
  computed: {
    componentId() {
      return this._uid
    },
    category() {
      return this.item?.goods?.[0]?.title ?? ''
    },
    quantity() {
      return this.item?.goods?.[0]?.quantity ?? ''
    },
    isAvailable() {
      return this.item?.goods?.[0]?.quantity > 0
    },
    picture() {
      return this.item?.picture?.url
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --card-product-text-padding: var(--main-padding);
  --card-product-border-radius: 0;
  --card-product-not-available-border-radius: 8px;

  /* Цвета */
  --card-product-color: var(--main-text-color);
  --card-product-background: var(--gray-3);
  --card-product-top-background: var(--gray-1);
  --card-product-not-available-background: var(--gray-2);
  --card-product-text-color: var(--main-light);
  --card-product-text-border-color: var(--main-light);
  --card-product-stock-color: var(--main-light);
  --card-product-stock-background: var(--main-color);
}
</style>

<style lang="scss" scoped>
.zeen-card {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--card-product-border-radius);
  color: var(--card-product-color);
  background: var(--card-product-background);

  &__top {
    position: relative;
    background: var(--card-product-top-background);
  }

  &__picture {
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    &:after {
      content: '';
      display: block;
      padding-top: 100%;
      height: 100%;
    }
  }

  &__stock {
    display: inline-flex;
    font-weight: 600;
    font-size: var(--card-product-stock-font-size);
    line-height: 1.4;
    padding: var(--card-product-stock-vertical-padding) var(--card-product-stock-horizontal-padding);
    border-radius: 0 var(--card-product-stock-border-radius) var(--card-product-stock-border-radius) 0;
    position: absolute;
    left: 0;
    top: var(--card-product-stock-top-offset);
    color: var(--card-product-stock-color);
    background: var(--card-product-stock-background);
  }

  &__information {
    padding: var(--card-product-information-top-padding) var(--card-product-information-vertical-padding)
      var(--card-product-information-vertical-padding);
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &__category {
    font-size: var(--card-product-category-font-size);
    line-height: 1.4;
    margin-bottom: var(--card-product-category-bottom-offset);
  }

  &__title {
    font-weight: 600;
    font-size: var(--card-product-title-font-size);
    line-height: 1.375;
    margin-bottom: var(--card-product-title-bottom-offset);
  }

  &__description {
    font-size: var(--card-product-description-font-size);
    line-height: 1.5;
    margin-bottom: var(--card-product-description-bottom-offset);
  }

  &__full-price {
    display: inline-flex;
    align-items: baseline;
  }

  &__price {
    font-weight: 600;
    font-size: var(--card-product-price-font-size);
    line-height: 1.3;
  }

  &__currency {
    font-size: var(--card-product-currency-font-size);
    line-height: 1.5;
    margin-left: var(--card-product-currency-bottom-offset);
  }

  &__footer {
    width: 100%;
    margin-top: auto;

    & button,
    & a {
      width: 100%;
      margin-top: var(--card-product-footer-top-offset);
    }
  }

  &__not-available {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0.7;
      background: var(--card-product-not-available-background);
    }
  }

  &__text {
    font-weight: bold;
    font-size: var(--card-product-text-font-size);
    line-height: 1.2;
    box-sizing: border-box;
    transform: rotate(var(--card-product-text-rotate));
    padding: var(--card-product-text-padding);
    z-index: 2;
    border: var(--card-product-text-border-width) solid var(--card-product-text-border-color);
    color: var(--card-product-text-color);
    border-radius: var(--card-product-not-available-border-radius);
  }
}
</style>