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.
-
prod
-
Descrição: Dados do produto (suporta somente a estrutura de dados recebida da API da Wap.store).
-
Tipo:
Object
-
- 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.
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.
-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>
| 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 |
| 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> |
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.