consumocuidado/components/CoopCard.vue

<template>
  <div class="productcard_container">
    <div class="row productcard_container-basic">
      <div class="image_container col-md-2">
        <img
          v-if="coop.logo"
          class="image"
          :src="coop.logo"
          :alt="coop.company_name"
        />
        <img
          v-else
          class="image"
          src="@/assets/img/latienda-product-default.svg"
          :alt="coop.company_name"
        />
      </div>
      <div class="info_container col-md-6" align="left">
        <NuxtLink :to="`/c/${this.coop.id}`">
          <h2>{{ coop.company_name }}</h2>
        </NuxtLink>
        <p class="description">{{ coop.description }}</p>
        <div class="tags_container">
          <NuxtLink
            :to="tagRoute(n)"
            class="tag_container"
            v-for="n in coop.tags"
            :key="n"
          >
            <img class="tag_img" src="@/assets/img/latienda-tag.svg" />
            <span>{{ n }}</span>
          </NuxtLink>
        </div>
      </div>
      <div class="col-md-4 button_container" align="center">
        <a v-if="coop.shop_link" :href="coop.shop_link" class="button_buy">
          <img
            alt="tienda"
            class="button_cart_img"
            src="@/assets/img/latienda-tienda.svg"
          />
          <span>Tienda online</span>
        </a>
        <a v-if="coop.web_link" :href="coop.web_link" class="button_buy">
          <img
            alt="web"
            class="button_cart_img"
            src="@/assets/img/latienda-web.svg"
          />
          <span>Página web</span>
        </a>
        <div class="smlogos_container">
          <div class="smlogo_container">
            <a @click="shareFacebook">
              <img
                class="smlogo_img"
                alt="facebook logo"
                src="@/assets/img/latienda-smlogo-facebook.svg"
              />
            </a>
          </div>
          <a @click="shareTwitter">
            <div class="smlogo_container">
              <img
                class="smlogo_img"
                alt="twitter logo"
                src="@/assets/img/latienda-smlogo-twitter.svg"
              />
            </div>
          </a>
          <a
            :href="shareWhatsApp()"
            data-action="share/whatsapp/share"
            target="_blank"
            title="latiendacoop"
          >
            <div class="smlogo_container">
              <img
                alt="whatsapp logo"
                class="smlogo_img"
                src="@/assets/img/latienda-smlogo-whatsapp.svg"
              />
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import socialShare from '~/utils/socialShare'
export default {
  name: 'CoopCard',
  props: ['coop'],

  computed: {
    coopUrl() {
      return `${window.location.origin}/c/${this.coop.id}`
    },
  },
  methods: {
    tagRoute(tag) {
      return `/busqueda?tags=${tag}`
    },

    shareFacebook() {
      const url = socialShare.facebook(this.coopUrl)
      window.open(url, '_blank')
    },
    shareTwitter() {
      const url = socialShare.twitter(this.coopUrl)
      window.open(url, '_blank')
    },
    shareWhatsApp() {
      return socialShare.whatsApp(this.coopUrl)
    },
  },
}
</script>

<style lang="scss" scoped>
.productcard_container {
  border: 3px #e9e9e9 solid;
  border-radius: 5px;
  margin-bottom: 25px;
}
.productcard_container-basic {
  padding: 25px 20px;
}

.image_container {
  height: 100%;
  overflow: hidden;
  margin: auto;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info_container {
  h2 {
    outline: none;
    font-weight: $medium;
    color: $color-navy;
    font-size: $m;
  }
  .price {
    font-weight: $bold;
    color: $color-navy;
    font-size: $m;
  }
  span {
    color: #808080;
  }
  .description {
    margin-top: 8px;
    font-family: $font-secondary;
    font-size: $s;
    color: $color-greytext;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.button_container {
  display: flex;
  flex-direction: column;
  font-size: $s;

  .button_buy {
    width: 100%;
    color: $color-orange;
    font-weight: $bold;
    padding: 10px 0;
    margin-bottom: 5px;
    border: 3px solid $color-orange;
    border-radius: 5px;
    background-color: $color-light;

    &:hover {
      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
      transition: all 0.2s ease;
    }

    span {
      display: inline-block;
    }
  }
}

.tag_container {
  margin: 25px 6px 0 0;
  border: 2px solid $color-greylayout;
  border-radius: 5px;
  padding: 6px 10px;
  display: inline-block;
  font-family: $font-secondary;
  font-size: $xs;
  color: $color-greytext;

  .tag_img {
    width: 18px;
  }
}

.smlogo_container {
  display: inline-block;
  margin-top: 15px;

  .smlogo_img {
    width: 35px;
    fill: $color-greytext;
    margin: 2px;
  }
  img:hover {
    transform: scale(1.1);
    transition: all 0.2s ease;
  }
}

.button_cart_img {
  width: 20px;
  margin-right: 10px;
}

.content > h2,
h3,
p {
  margin: 0;
}
</style>