Estados do produto

Sobre

Componente que abstrai as funcionalidades do disponivel, indisponivel e sobconsulta.

Dependências

Não há.

Instalação

• Instale o app através do seu terminal

npm i @wapstore/estados-produto

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

"dependencies": {
  "@wapstore/estados-produto": "1.0.1"
}

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

Uso

O componente de favoritos 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 Estados na página de produto:

*Considere a variavel "pageInfo" como response.data da requisição GET detalhe de produto retornado pela API wapstore v2 front.

<template>
  <EstadosProduto
    ref="refEstadosProduto"
    :prodInfo="pageInfo.conteudo"
    :quantidade="parseInt(quantidade)"
    :dadosFormulario="dadosAviseMe"
    :isCarrinhoLateral="true"
    @sucessoAviseMe="handleSucessoAvise"
    @loadingAviseMe="handleLoadingAvise"
    @erroAdicionarCarrinho="handleErroCompra"
    @updatedCarrinhoLateral="handleCarrinhoLateral"
  >
    <template #estadoDisponivel>
      /* seu disponivel */
    <template>
    <template #estadoIndisponivel>
      /* seu indisponivel */
    </template>
  </EstadosProduto>
</template>
<script>
  import EstadosProduto from '@wapstore/estados-produto';
  export default {
    components: {
      EstadosProduto
    },
    data () {
      return {
        // pageInfo: response.data retornado pela requisição GET detalhe de produto da API wapstore v2 front.
        dadosAviseMe: {
          nome: '',
          email: ''
        },
        quantidade: 1, // Quantidade do produto a ser comprado. Esse valor fixo é apenas ilustrativo.
      }
    },
    methods: {
      handleSucessoAvise () {
        // Adicione aqui alguma lógica para ser apresentada ao realizar um sucesso no envio formulario de avise-me;
        this.dadosAviseMe.nome = '';
        this.dadosAviseMe.email = '';
      },
      handleLoadingAvise ({ status }) {
        // Adicione aqui alguma lógica para apresentar "loading" para o usuário enquanto a requisição POST avise-me esta sendo enviada.
      },
      handleErroCompra ({ data }) {
        // Adicione aqui alguma lógica para apresentar "compra inválida" para o usuário.
        // Esse método será chamado quando tiver uma tentativa de compra invalida, sendo: falta de seleção de atributo, personalizações obrigatória, etc. 
      },
      handleCarrinhoLateral ({ quantidadeItens }) {
        // Adicione aqui alguma lógica para abrir o carrinho lateral após a requisição POST addToCart for sucedida.
        // Neste exemplo é aberto o carrinho lateral e atualizado o número de itens no carrinho, conforme retornado pelo evento "updatedCarrinhoLateral".
        // this.$store.commit(
        //   'carrinhoLateral/setQuantidadeProduto',
        //   quantidadeItens
        // );
        // this.$store.commit('carrinhoLateral/toggleCarrinhoLateral');
      },
    }
  }
</script>
<style>
  ...
</style>

Recursos

Props

| Prop | Descrição | Tipo | Valor padrão | |---|---|---|---| | dadosFormulario 1.0.1 | Objeto com as informações para o envio do avise me quando o produto apresenta indisponivel. | Object | - | | prodInfo 1.0.1 | response.conteudo retornado pela API na requisição GET detalhe produto. | Object | - | | quantidade 1.0.1 | Quantidade do produto. | Number | - | | isSobConsulta 1.0.1 | Para projetos que utilizam sobconsulta, caso não tenha será exibido o indisponivel em momentos de sobconsulta. | Boolean | false | | isCarrinhoLateral 1.0.1 | Para projetos que possue carrinho lateral. | Boolean | false | | isPersonalizacao 1.0.1 | Para projetos que tenha personalização. | Boolean | false | | isListaCompra 1.0.1 | Usado quando esse componente estiver sendo utilizado em uma lista de compras. | Boolean | false |

Campos obrigatorios para dadosFormulario

| Campo | Descrição | Tipo | |---|---|---| | nome 1.0.1 | Nome do usuário que esta enviando o avise me. | String | | email 1.0.1 | Email do usuário que esta enviando o avise me. | String |

Slots

| Slot | Descrição | Name | Exemplo de uso | |---|---|---|---| | Estados disponível 1.0.1 | Esse slot será apresentado enquanto a prop prodInfo estiver com status disponivel. | estadoDisponivel | <EstadosProduto :prodInfo="pageInfo.conteudo" :quantidade="Number(quantidade)"> <template #estadoDisponivel>/*...*/</template></EstadosProduto> | | Estados indisponivel 1.0.1 | Esse slot será apresentado enquanto a prop prodInfo estiver com status indisponivel. Em projetos que não tenham sobconsulta esse componente será exibido também em status sobconsulta. | estadoIndisponivel | <EstadosProduto :prodInfo="pageInfo.conteudo" :quantidade="Number(quantidade)"> <template #estadoIndisponivel>/*...*/</template></EstadosProduto> | | Estados sobconsulta 1.0.1 | Esse slot será apresentado enquanto a prop prodInfo estiver com status sobconsulta caso tenha configurado a prop isSobConsulta. | estadoSobconsulta | <EstadosProduto :prodInfo="pageInfo.conteudo" :quantidade="Number(quantidade)"> <template #estadoSobconsulta>/*...*/</template></EstadosProduto> |

Eventos

| Evento | Descrição | Argumentos | |---|---|---| | loadingCompra 1.0.1 | Disparado antes e depois da requisição de compra quando configurado o uso de carrinho lateral. | status Descrição: Status no momento de disparo do evento. Tipo: Boolean | | updatedCarrinhoLateral 1.0.1 | Disparado quando é adicionado um produto no carrinho lateral, quando configurado. | data Descrição: Informações do carrinho lateral. Tipo: Object | | erroAdicionarCarrinho 1.0.1 | Erro ao tentar adicionar ao carrinho. | dataErro Descrição: Informações do erro ao tentar adicionar ao carrinho. Tipo: Object | | loadingAviseMe 1.0.1 | Evento de loading disparado quando antes e depois da requisição do avise me. | data Descrição: Status no momento do disparo do evento. Tipo: Boolean | | sucessoAviseMe 1.0.1 | Apos obter um sucesso ao enviar o avise me, é retornado o response da requisição no seu argumento. | data Descrição: Response da solicitação do avise me. Tipo: Object | | erroAviseMe 1.0.1 | Disparado caso a requisição para o avise me retorne um erro. E m seu argumento é retornado o response do erro. | data Descrição: Detalhes do erro retornado pela requisição. Tipo: Object | | initEstadosProduto 1.0.1 | Evento da primeira renderização no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement | | updatedEstadosProduto 1.0.1 | Toda atualização no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement |

Métodos

Exemplo genérico da chamada de um método.

<template>
  <EstadosProduto ref="refEstadosProduto">
    /*...*/
  </EstadosProduto>
</template>
<script>
  export default {
    methods: {
      handleComprar() {
        this.$refs.refEstadosProduto.compra();
      },
    },
  }
</script>

| Método | Descrição | Exemplo de uso | |---|---|---| | compra | Esse método abstrai toda lógica necessária para efetuar a compra seja do produto, da lista de compras, tendo ou não personalização ou ate mesmo com ou sem carrinho lateral. Mas tudo depende de estar configurado corretamente suas props. | <template><EstadosProduto ref="refEstadosProduto">/*...*/</EstadosProduto></template><script>export default { methods: { handleComprar() { this.$refs.refEstadosProduto.compra(); }, }, }</script> | | aviseMe | Esse método abstrai toda lógica necessária para o envio do avise me para produtos com estado indisponivel. | <template><EstadosProduto ref="refEstadosProduto">/*...*/</EstadosProduto></template><script>export default { methods: { handleAviseMe() { this.$refs.refEstadosProduto.aviseMe(); }, }, }</script> |

Variáveis

| Variáveis | Descrição | Exemplo de uso | |---|---|---| | validaEmail | Variável reativa para validação do campo email para o envio do avise me. Use para economizar tempo criando validação para o campo email. Como essa variável depende da renderização do componente, utilize ela como um método. | <template><EstadosProduto ref="refEstadosProduto">/*...*/</EstadosProduto></template><script>export default { methods: { changeInputEmail() { this.emailValido = this.$refs.refEstadosProduto.validaEmail; }, }, }</script> |

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.