Newsletter

Descrição

Um componente padrão para a newsletter com os campos de nome e e-mail.

Instalação

npm install @wapstore/newsletter

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.

Dependências

Componentes

• Loader

  • Descrição: Um componente que contém um loader padrão em formato de círculo.

  • Instalação: npm install @wapstore/loader

  • Documentação: Acesse aqui

Recursos

Props

• placeholderNome 1.2.0

  • Descrição: Texto placeholder do campo de nome.

  • Tipo: String

  • Valor padrão: Nome

• placeholderEmail 1.2.0

  • Descrição: Texto placeholder do campo de E-mail.

  • Tipo: String

  • Valor padrão: E-mail

• txtBt 1.3.0

  • Descrição: Texto do botão enviar.

  • Tipo: String

  • Valor padrão: Enviar

• termos 1.4.0

  • Descrição: Ativa/Desativa o checkbox de termos de privacidade.

  • Tipo: Boolean

  • Valor padrão: false

• campoAdicional 1.5.0

  • Descrição: Ativa/Desativa o campo adicional.

  • Tipo: Boolean

  • Valor padrão: false

• placeholderAdicional 1.5.0

  • Descrição: Insere o texto que aparecerá dentro do input quando não houver nada digitado.

  • Tipo: String

  • Valor padrão: "Adicional"

• typeAdicional 1.5.0

  • Descrição: Define o tipo de input do campo adicional.

  • Tipo: String

  • Valor padrão: "text"

• apiHashAdicional 1.5.0

  • Descrição: Caso o campo adicional seja ativado, essa prop se torna obrigatória. Prop que recebe o nome/hash do campo adicional criado pelo painel da wapstore (/wapstore/configuracao/editar/?grupo=modulo/newsletter/geral), o nome deve ser exatamente o mesmo descrito no painel.

  • Tipo: String

  • Valor padrão: ""

• campoAdicionalObrigatorio 1.5.0

  • Descrição: Define se o campo adicional é obrigatório ou não. Vale lembrar que caso esse seja marcado como false no front e no painel como obrigatório, a API apenas dará erro ao enviar mas o campo não será marcado como incorreto.

  • Tipo: Boolean

  • Valor padrão: false

• popAdicionais 1.6.0

  • Descrição: Ativa pop-up de dados adicionais.

  • Tipo: Boolean

  • Valor padrão: false

• titlePopAdicionais 1.6.0

  • Descrição: Titulo da pop-up de dados adicionais.

  • Tipo: String

  • Valor padrão: ""

• labelBtEnviarPopAdicionais 1.6.0

  • Descrição: Label do botão enviar do forms da pop-up de dados adicionais.

  • Tipo: String

  • Valor padrão: "Enviar"

• itensPopAdicionais 1.6.0

  • Descrição: Campos a serem exibidos no forms da pop-up de dados adicionais. Essa prop passa a ser OBRIGATÓRIA quando a prop popAdicionais recebe o valor true. Ela possui dados especificos que seram apresentados abaixo. Para cadastrar dados adicionais, no painel basta ir no módulo de newsletter nas configurações (/wapstore/configuracao/editar/?grupo=modulo/newsletter/geral).

  • Tipo: Array

  • Valor padrão: []

  • Formato padrão: A prop deve deve receber um array com outros arrays dentro, cada array interno é um grupo (grupos se matém na mesma linha, visualmente falando. Eles são incluídos dentro da mesma div), cada array (grupo) deve conter pelo menos um objeto em qualquer um dos formatos abaixo:

    • Inputs:

      {
        hashCampo: 'Hash', // Hash definida no painel
        obrigatorio: true/false, // Defina se o campo é obrigatório
        tipoCampo: 'input', // Defina o tipo do campo
        tipoInput: 'tel' // Defina o type do input
        mask: 'tel' // Aplica máscara que formata o conteúdo do input ao digitar (disponível a partir da versão 1.7.0)
      }

    • Inputs radio e checkbox:

      {
        hashCampo: 'hash', // Hash definida no painel
        obrigatorio: true/false, // Defina se o campo é obrigatório
        tipoCampo: 'input', // Defina o tipo do campo
        tipoInput: 'checkbox'/'radio', // Defina o type do input
        valores: [ // Defina os valores a serem exibidos no forms
          {
            label: 'Exemplo', // Label do input
            val: '0' // Value do input
          },
          {
            label: 'Exemplo 2', // Label do input
            val: '1' // Value do input
          }
        ]
      }

    • Selects:

      {
        hashCampo: 'hash', // Hash definida no painel
        obrigatorio: true/false, // Defina se o campo é obrigatório
        tipoCampo: 'select', // Defina o tipo do campo
        valores: [ // Defina as options do select
          {
            label: 'Exemplo', // Label da option
            val: '0' // Value do option
          },
          {
            label: 'Exemplo 2', // Label da option
            val: '1' // Value do option
          }
        ]
      }

  • Exemplo:

    [
      [
        {
          hashCampo: 'CPF',
          obrigatorio: true,
          tipoCampo: 'input',
          tipoInput: 'tel',
          mask: 'cpf'
        },
        {
          hashCampo: 'Telefone',
          obrigatorio: true,
          tipoCampo: 'input',
          tipoInput: 'tel',
          mask: 'tel'
        }
      ],
      [
        {
          hashCampo: 'Cidade',
          obrigatorio: true,
          tipoCampo: 'input',
          tipoInput: 'text'
        },
        {
          hashCampo: 'Estado',
          obrigatorio: true,
          tipoCampo: 'select',
          valores: [
            {
              label: 'SP',
              val: 'SP'
            },
            {
              label: 'MG',
              val: 'MG'
            }
          ]
        },
        {
          hashCampo: 'CEP',
          obrigatorio: true,
          tipoCampo: 'input',
          tipoInput: 'tel',
          mask: 'cep'
        }
      ],
      [
        {
          hashCampo: 'Faixa etária',
          obrigatorio: false,
          tipoCampo: 'input',
          tipoInput: 'radio',
          valores: [
            {
              label: 'Menos de 18 anos',
              val: 'Menos de 18 anos'
            },
            {
              label: 'Entre 18 e 30 anos',
              val: 'Entre 18 e 30 anos'
            },
            {
              label: 'Mais de 30 anos',
              val: 'Mais de 30 anos'
            }
          ]
        },
        {
          hashCampo: 'Notificações',
          obrigatorio: true,
          tipoCampo: 'input',
          tipoInput: 'checkbox',
          valores: [
            {
              label: 'Ofertas',
              val: 'Ofertas'
            },
            {
              label: 'Eventos',
              val: 'Eventos'
            }
          ]
        }
      ]
    ]

Slots

• newstext

  • Descrição: Campo para alteração do texto exibido na newsletter.

  • Name: newstext

  • Exemplo de uso:

    <newsletter>
      <template #newstext>
      Texto exemplo
      </template>
    </newsletter>

• newsIcon 1.1.0

  • Descrição: Campo para adição de um ícone na newsletter.

  • Name: newsIcon

  • Exemplo de uso:

    <newsletter>
      <template #newsIcon>
      <img src="icone.svg" alt="icone">
      </template>
    </newsletter>

• Texto termos 1.4.0

  • Descrição: Campo destinado ao texto do label do checkbox de termos.

  • Name: termosText

  • Exemplo de uso:

    <newsletter>
      <template #termosText>
        Ao se cadastrar você concorda com a nossa <a href="/pagina/politica-privacidade/">Política de privacidade</a>
      </template>
    </newsletter>