Avaliação Produto

Sobre

Componente usado no detalhe de produto, com o intuito de realizar a avaliação do produto.

Dependências

Props

| Prop | Descrição | Tipo | |---|---|---| | dataAvaliacoes 1.0.8 | Avaliações do produto atual, com base na estrutura da loja modelo, normalmente fica armazenado em $store.state.detalhe.dataProd.conteudo.avaliacao. | Object | | prodId 1.0.8 | ID do produto atual, com base na estrutura da loja modelo, normalmente fica armazenado em $store.state.detalhe.dataProd.conteudo.id. | String/Number |

Instalação

• Instale o app através do seu terminal

npm install @wapstore/avaliacao-produto

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

"dependencies": {
  "@wapstore/avaliacao-produto": "1.0.8"
}

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

Uso

O componente de Avaliação Produto pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para uma Avaliação em página de produto:

<template>
  <div v-if="liberar" class="weContainer">
    <avaliacao-produto :dataAvaliacoes="pageData.conteudo.avaliacao" :prodId="pageData.conteudo.id" />
  </div>
</template>
<script>
  ...
</script>
<style>
  ...
</style>

Recursos

Props

| Props | Descrição | Tipo | Valores | Valor padrão | |---|---|---|---|---| | listaId 1.0.8 | ID da lista de compras atual. | String/Number | - | - | | tipoAvaliacao 1.0.8 | Define se a avaliação é de produto ou de lista de compras. | String | produto / lista | produto | | mostrarTitulo 1.0.8 | Ativa/desativa titulo. | Boolean | - | true | | limitComentario 1.0.8 | Define o valor máximo de caracteres que pode ser escrito no comentário da avaliação. | Number | - | 1000 | | limiteMB 1.0.8 | Limite de tamanho em megabytes, das imagens que podem ser enviadas na avaliação (limite para cada imagem). | Number | - | 1 |

Estilização

Para a estilização, basta inserir os estilos sem escopos no componente pai ou em um arquivo CSS separado dentro de static/css/packages-styles/ com o nome do mesmo como nome do arquivo, utilizando sempre de um ID ou classe específica na tag do componente inserido 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 arquivo CSS separado. Para estilos em arquivos separados, utilizar o import no componente pai do componente correspondente ao estilo.