Vérifiez cet article dans mes notes Web !

Dans notre article précédent, nous avons terminé la création des pages principales de notre boutique de commerce électronique, et il est maintenant temps d'aller plus loin et d'ajouter des éléments dynamiques tels que les modaux et les notifications. Tout d'abord, la fenêtre modale sera utile pour la visualisation rapide du produit, la gestion des produits, etc., et le rôle des notifications est crucial car c'est le meilleur moyen de communiquer avec l'utilisateur, en commençant par les messages de bienvenue et en terminant par les messages de vente. Oui, comme vous l'avez compris dans l'intro et le titre, l'article d'aujourd'hui comprendra les éléments suivants :

1. Création de modaux personnalisés dans Nuxt.js
2. Configuration des messages de notification dans notre boutique e-commerce

Maintenant que nous savons à quel point les modaux et les alertes sont importants, étudions comment les intégrer dans notre application de commerce électronique Nuxt.js et abordons les détails de la mise en œuvre.

1. Création de modaux personnalisés dans Nuxt.js

Nous devons préciser que nous souhaitons créer une fenêtre modale réutilisable afin qu'elle puisse être utilisée de plusieurs manières et afficher différentes données. Pour cela, nous allons créer un composant modal principal avec des styles et des éléments spécifiques au modal qui pourraient être rendus dans notre composant modal.

Tout d'abord, créez un fichier Modal.vue dans le dossier "ui" avec un conteneur qui doit flouter l'arrière-plan et un div modal à l'intérieur qui contiendra des éléments rendus dynamiquement. De plus, nous importerons l'icône "xmark" et en ferons un bouton qui fermera notre fenêtre modale.

Dans notre magasin de base, nous ajouterons deux nouvelles variables "modalStatus" avec une valeur fausse et "modalType" en tant que chaîne, et ajouterons des actions simples qui modifieront ces valeurs.

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

La variable d'état contrôlera le comportement de rendu modal et le type mettra à jour différents types modaux.

Maintenant, lorsque nous disposons d'un système de contrôle modal, nous pouvons ajouter notre composant modal à la mise en page par défaut. N'oubliez pas d'importer notre magasin de base.

Super, notre composant modal réutilisable est prêt, maintenant si nous voulons afficher le modal, nous devons simplement mettre à jour la valeur modalStatus dans le magasin de base.

En outre, vous pouvez ajouter les styles de votre choix au composant modal, mais je vous recommande d'utiliser "Glassmorphism" et il aura l'air élégant.

.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;
            }
        }
    }
}

Nous avons fait un excellent travail ici, mais je vous propose de continuer et de créer le premier composant qui utilisera notre modal - "Aperçu du produit", qui sera disponible après avoir cliqué sur le bouton d'aperçu sur n'importe quelle fiche produit. Créons un nouveau fichier Vue dans le dossier "common" et ajoutons quelques éléments HTML/CSS :

Importez ensuite ce composant dans le fichier Modal.vue et insérez-le dans le div de contenu.

Maintenant, il nous suffit d'ajouter une fonction telle que "showPreview" à notre carte afin qu'après que l'utilisateur ait cliqué, cette fonction définira le type modal sur "product-preview" et le statut modal sur "true". Ça y est, nous avons une fonctionnalité modale et d'aperçu du produit réutilisable.

D'accord, nous devons continuer et ajouter des messages d'alerte à notre projet Nuxt.js.

2. Configuration des messages de notification dans notre boutique e-commerce

D'accord, nous pouvons ajouter quelque chose comme un changement modal de ses styles, et l'appeler des alertes, cela ressemble à une solution simple et rapide. Mais que se passe-t-il si deux alertes ou plus sont déclenchées en même temps (par exemple un message « bienvenue » et un message « votre liste de souhaits n'est pas vide ») ? Pour résoudre ce problème, nous allons créer un conteneur d'alertes qui s'agrandira autant que le nombre de messages entrants.

Tout d'abord, nous ajouterons des paramètres d'alerte à notre boutique, similaires à ce que nous avons fait avec la partie modale. Ajoutez le tableau « notificationsList » à la partie état et ajoutez des actions de notification qui pousseront et supprimeront la notification de la liste. Chaque notification a un identifiant unique et affiche le statut, le type, le message et le délai (durée pendant laquelle notre message sera visible).

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);
    }
},

Prochaine étape, nous devons créer un composant "Notification" qui affichera lui-même un message, en fonction du type de message. De plus, nous devons utiliser le délai et supprimer automatiquement les messages.

Vous pouvez styliser vos messages comme vous le souhaitez, j'utiliserai comme d'habitude "Glassmorphism" et j'ajouterai de la couleur.

.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 );
}

Et la touche finale, nous devons créer notre conteneur de messages et ajouter ce conteneur dans le fichier app.vue.

Le conteneur de notification affichera simplement un tableau de notre liste stockée dans le fichier de base.

N'oubliez pas d'ajouter "Notification Container" au fichier app.vue principal.

Ça y est, nous pouvons redémarrer notre serveur de développement et déclencher des messages de notification plusieurs fois, histoire de vérifier le résultat.

Avec l'intégration des modaux et des notifications, notre application de commerce électronique Nuxt.js est devenue plus dynamique, interactive et conviviale. Ces éléments contribuent à une expérience d'achat améliorée, permettant à nos clients de prévisualiser les produits et de rester informés tout au long de leur parcours.

À mesure que nous continuons à développer et à améliorer notre plate-forme de commerce électronique, nous pouvons étendre davantage les fonctionnalités des modaux et des notifications, en les adaptant à des cas d'utilisation spécifiques et en garantissant une expérience transparente et attrayante à nos utilisateurs.

Si vous avez besoin d'un code source pour ce didacticiel, vous pouvez l'obtenir ici.