Card de produto

Sobre

Card de produto é uma aplicação que resume os dados do produto retornados da plataforma, geralmente usada em vitrines e listagens de produto, contendo a imagem principal do produto, preços, parcelamentos e o nome do produto. Ainda suporta selos, avaliações e botão comprar.

Dependências

• prod

  • Descrição: Dados do produto (suporta somente a estrutura de dados recebida da API da Wap.store).

  • Tipo: Object

Instalação

• Instale o app através do seu terminal

npm install @wapstore/card-produto

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/card-produto": "^1.4.1"
}

Agora a loja está apta para o uso da aplicação.

Uso

O padrão para o template do card de produto para as prateleiras da loja pode ser inserido em qualquer lugar da pasta "components", mas normalmente se encontra no arquivo components/geral/card-produto.vue. Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Quando este template é consumido por outro componente, como em categoria ou busca, ele deve ser chamado nos scripts deste componente.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para o card-produto.vue:

<template>
  <div class="cardProduto">
    <div class="cardProduto-topo">
      <nuxt-link
        :to="produto.rota.route"
        class="cardProduto-containerImg"
      >
        <div class="cardProduto-wrapperImg">
          <img
            v-if="produto.midias.imagens.length"
            :src="produto.midias.imagens[0].arquivos.medium"
            :alt="produto.nome"
            width="232"
            height="232"
            loading="lazy"
          >
          <img
            v-else
            src="@/static/img/imgs-default/m_default.jpg"
            :alt="produto.nome"
            :title="produto.nome"
            width="232"
            height="232"
          >
        </div>
        <selos :selos="produto.selos" />
        <favoritos
          :idProduto="produto.id"
          class="cardProduto-favoritos"
          @loginFavorito="handleLoginFavorito"
        >
          <template #slotFavoritarAfter>
            <img
              src="~/static/img/geral/favorito.svg"
              alt="Icone favoritar produto"
              width="17"
              height="15"
              loading="lazy"
            >
          </template>
          <template #slotFavoritarBefore>
            <img
              src="~/static/img/geral/favoritado.svg"
              alt="Icone favoritar produto"
              width="17"
              height="15"
              loading="lazy"
            >
          </template>
        </favoritos>
      </nuxt-link>
      <div class="cardProduto-containerTitulo">
        <nuxt-link class="cardProduto-link" :to="produto.rota.route">
          <h3 class="cardProduto-titulo">
            {{ produto.nome }}
          </h3>
        </nuxt-link>
      </div>
      <div class="vitrine-avaliacao">
        <estrela-avaliacao
          :avaliacaoMedia="produto.avaliacao.media"
          :quantidadeAvaliacao="produto.avaliacao.quantidade"
          class="estrelaAvaliacao"
        />
      </div>
    </div>
    <div class="cardProduto-bottom">
      <div v-if="produto.estoque > 0">
        <div class="cardProduto-bottom-precos">
          <p class="cardProduto-bottom-precos-de">
            {{ produto.precos.de | formatPrice }}
          </p>
          <p class="cardProduto-bottom-precos-por">
            {{ produto.precos.por | formatPrice }}
          </p>
          <p
            class="cardProduto-bottom-precos-parcelamento"
            v-html="$options.filters.totalParcelado(produto.precos.parcelamento)"
          />
          <p class="cardProduto-bottom-precos-desconto">
            <span>
              {{ produto.precos.vista | formatPrice }} (<strong>{{ produto.precos.descontoVista }}% desconto no boleto</strong>)
            </span>
          </p>
        </div>
        <nuxt-link class="cardProduto-bottom-btnComprar" :to="produto.rota.route">
          Comprar Agora
          <img
            src="~/static/img/geral/shopping.svg"
            width="24"
            height="24"
            alt="Comprar agora"
            loading="lazy"
          >
        </nuxt-link>          
      </div>
      <div v-if="produto.estoque == 0">
        <div class="cardProduto-bottom-precos">
          <h5 class="titleIndisponivel">
            Produto indisponível
          </h5>
          <p class="textIndisponivel">
            Esse produto se encontra fora de estoque nesse momento.
          </p>
        </div>

        <nuxt-link class="cardProduto-bottom-btnComprar" :to="produto.rota.route">
          Avise-me quando chegar
        </nuxt-link>          
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardProduto',
  props: {
    produto: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleLoginFavorito () {
      window.location.href = '/checkout/acesso/';
    }
  }
};
</script>

<style>
  ...
</style>

-Este é um exemplo da chamada do template de prateleira em uma página de listagem:

<script>
  import cardProduto from '~/components/geral/card-produto.vue';
  export default {
    components: {
      cardProduto
    },
    props: {
      produtos: Array
    }
  };
</script>

Recursos

Props

| Prop | Descrição | Tipo | Valor padrão | |---|---|---|---| | tagTitulo 1.4.2 | Tag usada no nome do produto, pode ser definido manualmente, porém se encontra na API de vitrine da Wap.store em response.data.vitrine.tagTitulo. | String | "p" | | condicaoVista 1.4.2 | Ativa/Desativa o texto de condição para preço à vista. | Boolean | false | | formatoLista 1.4.2 | Ativa/Desativa o formato de lista em vitrines ou listagens. | Boolean | false | | favorito 1.4.2 | Ativa/Desativa o botão de adicionar aos favoritos. | Boolean | false |

Slots

| Slot | Descrição | Name | Valor padrão | Exemplo | |---|---|---|---|---| | Selo 1.4.2 | Campo para inserção de selos. | selo | - | <card-produto> <template #selo> <img src="seu-selo.webp" alt="selo"> </template> </card-produto> | | Avaliação 1.4.2 | Campo para inserção de avaliações, Wap.store, Trustvox ou qualquer outro tipo de avaliação. | avaliacao | - | <card-produto> <template #avaliacao> <div class="avaliacao-grayStar"> <div class="avaliacao-yellowStar"></div> </div> </template> </card-produto> | | Descrição 1.4.2 | Campo para descrição do produto. | descProd | - | <card-produto> <template #descProd> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </template> </card-produto> | | Condição de preço à vista 1.4.2 | Campo para texto de condição do preço à vista. | condicaoVista | "à vista no boleto." | <card-produto> <template #condicaoVista>Lorem ipsum dolor.</template> </card-produto> | | Label do botão comprar 1.4.2 | Campo para conteúdo do botão comprar. | labelBtComprar | "Comprar" | <card-produto> <template #condicaoVista>Lorem ipsum dolor.</template> </card-produto> | | Desconto no preço à vista 1.4.2 | Campo para Inserir o texto e/ou porcentagem de desconto à vista. | descontoVista | - | <card-produto> <template #descontoVista="data">{{ data.desconto }}%</template> </card-produto> | | Ícone do botão de favorito 1.4.2 | Slot destinado à alteração do ícone do botão de adicionar aos favoritos. | favorito | - | <card-produto> <template #favorito> <img src="icone" /> </template> </card-produto> |

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.