estados-produto v1.0.1

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

Campos obrigatorios para dadosFormulario

Slots

Eventos

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>

Variáveis

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.