listagem-produtos-wap v1.0.2
Busca
Sobre
Componente responsável por exibir os produtos em uma listagem.
Dependências
Props
| Prop | Descrição | Tipo |
|---|---|---|
produtos 1.2.0 | Contém os dados dos produtos a serem exibidos. | Array |
Store
| Prop | Descrição | Tipo | Uso |
|---|---|---|---|
loadProds 1.2.0 | Variável encontrada no módulo categoria da $store, responsável por indicar carregamento. | Variável da $store no módulo categoria. | $store.state.categoria.loadProds |
Instalação
- Instale o app através do seu terminal
npm install @wapstore/listagem-produtos- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/listagem-produtos": "^1.2.0"
}Agora a loja está apta para o uso da aplicação.
Uso
O componente de Paginação pode ser inserido em qualquer lugar da pasta "components". 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 Categoria:
<template>
<listagemProdutos
v-if="pageData"
id="produtosCategoria"
:key="JSON.stringify(pageData.conteudo.produtos)"
:produtos="pageData.conteudo.produtos"
:formatoLista="formatoLista"
/>
</template>
<script>
import listagemProdutos from '~/components/produto/categoria/produtos';
export default {
name: 'Personalizado',
components: {
listagemProdutos
},
props: {
formatoLista: {
type: Boolean,
default: true
}
},
computed: {
limits () {
return this.config.sistema.produtos.listagem.geral.ippOpt;
},
limitDefault () {
return this.config.sistema.produtos.listagem.geral.ipp || 12;
}
},
watch: {
'$route.query' (newVal, oldVal) {
if (newVal !== oldVal) {
this.$store.commit('categoria/toggleLoadProds', true);
document.querySelector('html').scrollTop = this.$refs.mainContainerCategoria.offsetTop - 50;
this.$requestDataListagem(this.$route, 'category', () => {
this.update();
});
}
}
}
};
</script>
<style>
...
</style>Recursos
Props
| Prop | Descrição | Tipo | Valor padrão |
|---|---|---|---|
formatoLista 1.2.0 | Ativa/Desativa o formato de lista em vitrines ou listagens. | Boolean | false |
Slots
| Slot | Descrição | Name | Exemplo de uso |
|---|---|---|---|
Produto não encontrado 1.2.0 | Slot responsável pela personalização da mensagem de produto não encontrado. | prodNaoEncontrado | <listagem-produto><template #prodNaoEncontrado>Nenhum produto foi encontrado</template></listagem-produto> |
Desconto no preço à vista 1.2.0 | Campo para Inserir o texto e/ou porcentagem de desconto à vista. | descontoVista | <listagem-produto><template #descontoVista="data">{{ data.desconto }}%</template></listagem-produto> |
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.