O que você deve saber antes de começar:
Este artigo mostra como criar um registro personalizado para que um visitante do site efetue login como membro do seu site.
Um membro do site é uma pessoa que pode efetuar login em todas as páginas do seu site usando a janela pop-up nativa do Wix ou criando sua própria janela personalizada de login.
Etapa 1: ativar as Ferramentas do desenvolvedor
Sempre ative as Ferramentas do desenvolvedor de dentro do Wix Editor antes de começar a codificar.
Etapa 2: adicionar elementos de entrada na janela de Registro de Membro
Dica: você pode usar o próprio formulário personalizado da Wix como janela de registro, ao invés de criar uma no código. saiba como aqui
Adicione quaisquer elementos de entrada na janela de registro para criar seu formulário e design de registro personalizados, conforme desejado. Por exemplo, usamos os seguintes elementos em uma mesa de luz:
Primeiro nome
Último nome
O email
Senha
Etapa 3: Definir configurações do elemento de entrada
Em nosso exemplo, definimos um dos nossos elementos de entrada de texto como Tipo de senha e Obrigatório . Definimos essas configurações clicando no ícone Configurações que aparece acima do elemento após a seleção do elemento. Ao defini-lo como Tipo de senha, ele criptografará automaticamente todos os caracteres digitados nesse elemento de entrada específico.
Definimos outro elemento de entrada de texto como Tipo de email, para que ele possa auditar automaticamente os caracteres digitados nesse elemento de entrada específico para garantir que estejam em um formato de email correto.
Em nosso exemplo, definimos todos os campos como obrigatórios, para que nossos elementos mostrem um erro quando um visitante ignora esse campo de entrada. Nós projetamos nossos elementos (usando o ícone do pincel ) para serem destacados em uma cor vermelha para facilitar ao visitante a visualização do erro do elemento de entrada que foi ignorado.
Etapa 4: configurar o painel de propriedades de cada elemento
Nome do ID do elemento Clique com o botão direito do mouse em qualquer elemento e selecionando ' Exibir Propriedades ' ou, no Menu Ferramentas, na parte superior do Editor, selecione Painel de Propriedades. Alteramos os IDs de nossos elementos para o seguinte (para facilitar a compreensão do código):
primeiro nome
último nome
o email
senha
Nome do ID do elemento Você pode clicar no nome do ID para alterá-lo para outra coisa. É sempre uma boa prática alterar o nome do ID para algo que possa ser facilmente lembrado e identificado no Painel de Código, especialmente quando você possui muitos elementos que podem estar codificando. Lembre-se de que o nome do ID deve ser exclusivo para que seu código saiba a qual elemento você está se referindo.
Sem espaços e maiúsculas e minúsculas Ao renomear seus IDs de elemento, você não pode usar espaços, não é possível começar com um número e deixe as letras em minúsculas ao digitar os IDs dos elemento.
Etapa 5: adicionar e configurar o botão Enviar
Etapa 6: adicione o código à sua página
Agora você escreverá um código para acionar a inserção dos detalhes do registro de cada elemento no Wix CRM ao clicar no registrobutao . O código para o Botão em nosso exemplo é igual a este:
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#registrobutao").onClick( (event) => {
let email = $w("#email").value;
let password = $w("#senha").value;
let first = $w("#nome").value;
let last = $w("#sobrenome").value;
wixUsers.register(email, password, {
contactInfo: {
"nome": first,
"sobrenome": last
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixWindow.openLightbox("login");
} );
} );
});
Veja o vídeo:
