Verifique esta postagem em minhas notas da web!

Em nosso artigo anterior, terminamos de criar as páginas principais de nossa loja de e-commerce e agora é hora de avançar e adicionar alguns elementos dinâmicos, como modais e notificações. Em primeiro lugar a janela modal, será útil para visualização rápida de produtos, gestão de produtos, etc., e o papel das notificações é crucial porque é a melhor forma de comunicar com o utilizador, começando pelas mensagens de boas-vindas e terminando com mensagens de venda. Sim, como você percebeu na introdução e no título, nosso artigo de hoje consistirá no seguinte:

1. Criando modais personalizados em Nuxt.js
2. Configurando mensagens de notificação em nossa loja de comércio eletrônico

Agora que sabemos a importância dos modais e alertas, vamos estudar como integrá-los em nosso aplicativo de e-commerce Nuxt.js e entrar nos detalhes da implementação.

1. Criando modais personalizados em Nuxt.js

Precisamos esclarecer que queremos criar uma janela modal reutilizável para que possa ser usada de várias maneiras e mostrar dados diferentes. Para isso, criaremos um componente Modal principal com estilos e itens específicos do modal que poderão ser renderizados dentro do nosso componente modal.

Primeiro, crie um arquivo Modal.vue dentro da pasta "ui" com um contêiner que deve desfocar o fundo e um div modal dentro que conterá itens renderizados dinamicamente. Além disso, importaremos o ícone "xmark" e faremos dele um botão que fechará nossa janela Modal.

Dentro de nosso armazenamento base, adicionaremos duas novas variáveis ​​"modalStatus" com um valor falso e "modalType" como uma String, e adicionaremos ações simples que modificarão esses valores.

aSetModalStatus(status) {
    this.modalStatus = status;
},
aSetModalType(type) {
    this.modalType = type;
},

A variável de status controlará o comportamento de renderização modal e o tipo atualizará diferentes tipos modais.

Agora, quando temos um sistema de controle modal, podemos adicionar nosso componente modal ao layout padrão. Não esqueça de importar nossa loja base.

Ótimo, nosso componente modal reutilizável está pronto, agora se quisermos mostrar o modal basta atualizar o valor modalStatus dentro do armazenamento base.

Além disso, você pode adicionar qualquer estilo que desejar ao componente modal, mas eu recomendo que você use "Glassmorphism" e ficará estiloso.

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    .modal {
        min-width: 300px;
        min-height: 300px;
        background: rgba( 255, 255, 255, 0.9 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 13px );
        -webkit-backdrop-filter: blur( 13px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        padding: 24px;
        display: flex;
        flex-direction: column;
        &__close {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            &--btn {
                border: none;
                background-color: transparent;
                cursor: pointer;
                outline: none;
                display: flex;
                align-items: center;
            }
            &--icon {
                color: #6c757d;
                font-size: 20px;
            }
        }
    }
}

Fizemos um ótimo trabalho aqui, mas estou oferecendo a vocês que continuem e criem o primeiro componente que usará nosso modal - "Product Preview", que estará disponível após o botão de visualização clicar em qualquer cartão de produto. Vamos criar um novo arquivo Vue dentro da pasta "common" e adicionar alguns elementos HTML/CSS:

Em seguida, importe este componente para o arquivo Modal.vue e insira-o na div de conteúdo.

Agora, só precisamos adicionar uma função como "showPreview" ao nosso cartão para que, após o usuário clicar, essa função defina o tipo modal como "visualização do produto" e o status do modal como "true". É isso, temos um modal reutilizável e uma funcionalidade de visualização do produto.

Ok, precisamos seguir em frente e adicionar mensagens de alerta ao nosso projeto Nuxt.js.

2. Configurando mensagens de notificação em nossa loja de comércio eletrônico

Ok, podemos adicionar algo como uma mudança modal em seus estilos e chamá-lo de alertas, parece uma solução simples e rápida. Mas e se forem acionados dois ou mais alertas ao mesmo tempo (por exemplo, mensagem de “boas-vindas” e mensagem “sua lista de desejos não está vazia”)? Para resolver este problema criaremos um contêiner de alerta que se expandirá tanto quanto o número de mensagens recebidas.

Em primeiro lugar, adicionaremos configurações de alerta à nossa loja, semelhante ao que fizemos com a parte modal. Adicione a matriz "notificationsList" à parte do estado e adicione ações de notificação que enviarão e removerão a notificação da lista. Cada notificação possui um ID exclusivo e mostra status, tipo, mensagem e atraso (quantidade de tempo que nossa mensagem ficará visível).

aSetNotification(payload) {
    const notification = {
        id: uuidv4(),
        show: true,
        type: payload.type,
        msg: payload.msg,
        delay: payload.delay ? payload.delay : 7000,
    }
    this.notificationsList.push(notification);
},
aRemoveNotification(id) {
    const indexToRemove = this.notificationsList.findIndex((element) => element.id === id);
    if (indexToRemove !== -1) {
        this.notificationsList.splice(indexToRemove, 1);
    }
},

Próximo passo, precisamos criar um componente "Notificação" que renderizará a própria mensagem, dependendo do tipo de mensagem. Além disso, precisamos usar o tempo de atraso e remover mensagens automaticamente.

Você pode estilizar suas mensagens da maneira que quiser. Como de costume, usarei "Glassmorphism" e adicionarei um pouco de cor.

.alert-success {
    background: rgba( 114, 255, 136, 0.45 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

E o toque final, precisamos criar nosso contêiner de mensagens e adicioná-lo ao arquivo app.vue.

O contêiner de notificação simplesmente renderizará uma matriz de nossa lista que está armazenada no arquivo base.

Não se esqueça de adicionar "Notification Container" ao arquivo app.vue principal.

É isso, podemos reiniciar nosso servidor de desenvolvimento e disparar mensagens de notificação algumas vezes, apenas para verificar o resultado.

Com a integração de modais e notificações, nosso aplicativo de e-commerce Nuxt.js tornou-se mais dinâmico, interativo e fácil de usar. Esses elementos contribuem para uma experiência de compra aprimorada, permitindo que nossos clientes visualizem os produtos e se mantenham informados ao longo de sua jornada.

À medida que continuamos a construir e melhorar nossa plataforma de comércio eletrônico, podemos expandir ainda mais a funcionalidade de modais e notificações, adaptando-os a casos de uso específicos e garantindo uma experiência integrada e envolvente para nossos usuários.

Se precisar de um código-fonte para este tutorial, você pode obtê-lo aqui.