O que você deve saber antes de começar:
NÃO USE FORMULÁRIOS WIX PARA ESTE TUTORIAL Este tutorial não funcionará se você usar o Wix Forms para criar seus elementos de formulário. Este tutorial mostrará como adicionar seus elementos e criar o formulário do zero.
Este artigo mostra como criar uma tela de login personalizada 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.
Você vai aprender a criar uma tela de Login personalizada.
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 à sua janela
Adicione quaisquer elementos de entrada à sua janela para criar seu formulário e design de registro personalizados, conforme desejado. Por exemplo, usamos os seguintes elementos neste:
Entrada para Email
Entrada para Senha
botão login
Textos
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.
Ainda precisa de ajuda?
Compre o templete com o código adicionado
Etapa 4: configurar o painel de propriedades de cada elemento
Abra o Painel de Propriedades clicando 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):
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 as maiúsculas e minúsculas são importantes ao digitar os IDs de elemento em seu código.
Etapa 5: adicionar e configurar botões
Em nosso exemplo, rotulamos nosso primeiro botão Entrar
Atualize o nome do ID do elemento. Em nosso exemplo, chamamos de loginButton .
E, finalmente, adicione o evento onClick no painel Propriedades.
Na propriedades da mensagem em vermelho na imagem colocamos no ID o nome erro e marcamos a caixa do Recolhimento ao carregar.
Nomeamos nosso segundo texto como Esqueci minha senha .
Atualize o nome do ID do elemento. Em nosso exemplo, nós o nomeamos: esqueciasenha
Não ative o evento onClick e não vincule esse botão a nenhum link ou conjunto de dados
Nomeamos nosso terceiro texto como Ainda não tem uma conta? registre-se
link o nome registre-se para a janela do formulário de registro personalizado do Wix
Outra opção é criar a própria janela de formulário de registro com Código wix
Temos o tutoria para as duas opção!
Etapa 6: adicione o código à sua janela de login
Agora você escreverá um código para acionar o login clicando no botão login . O código em nosso exemplo se parece com isso:
O código da janela de registro está aqui neste post
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#esqueciasenha").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_click(event) {
let email = $w("#email").value;
let password = $w("#senha").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixLocation.to("/minha-conta/minha-conta"); //Change the URL ending to whatever page you want to send the user to after they log in.
} )
.catch( (err) => {
console.log(err);
$w("#erro").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}Veja o tutorial em vídeo
#wix #loginwix #personalizado #codigowix #corvid #portugues #brasil #tutoriais