Schauen Sie sich diesen Beitrag in meinen Webnotizen an!

In unserem vorherigen Artikel haben wir die Erstellung der Hauptseiten unseres E-Commerce-Shops abgeschlossen, und jetzt ist es an der Zeit, weiterzumachen und einige dynamische Elemente wie Modalitäten und Benachrichtigungen hinzuzufügen. Zuallererst ist das modale Fenster nützlich für die Schnellansicht des Produkts, die Produktverwaltung usw., und die Rolle der Benachrichtigungen ist von entscheidender Bedeutung, da es die beste Möglichkeit ist, mit dem Benutzer zu kommunizieren, angefangen bei Willkommensnachrichten bis hin zu Verkaufsnachrichten. Ja, wie Sie der Einleitung und dem Titel entnehmen konnten, wird unser heutiger Artikel aus Folgendem bestehen:

1. Benutzerdefinierte Modalitäten in Nuxt.js erstellen
2. Benachrichtigungsnachrichten in unserem E-Commerce-Shop konfigurieren

Da wir nun wissen, wie wichtig Modalitäten und Warnungen sind, wollen wir uns mit der Integration in unsere E-Commerce-Anwendung Nuxt.js befassen und uns mit den Implementierungsdetails befassen.

1. Erstellen benutzerdefinierter Modalitäten in Nuxt.js

Wir müssen klarstellen, dass wir ein wiederverwendbares modales Fenster erstellen möchten, damit es auf viele Arten verwendet werden kann und verschiedene Daten anzeigt. Dazu erstellen wir eine modale Hauptkomponente mit modalspezifischen Stilen und Elementen, die in unserer modalen Komponente gerendert werden könnten.

Das Wichtigste zuerst: Erstellen Sie eine Modal.vue-Datei im Ordner „ui“ mit einem Container, der den Hintergrund verwischen sollte, und einem modalen Div darin, das dynamisch gerenderte Elemente enthält. Außerdem importieren wir das „xmark“-Symbol und machen daraus eine Schaltfläche, die unser modales Fenster schließt.

In unserem Basisspeicher fügen wir zwei neue Variablen „modalStatus“ mit einem falschen Wert und „modalType“ als String hinzu und fügen einfache Aktionen hinzu, die diese Werte ändern.

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

Die Statusvariable steuert das modale Renderverhalten und der Typ aktualisiert verschiedene modale Typen.

Wenn wir nun ein modales Steuerungssystem haben, können wir unsere modale Komponente zum Standardlayout hinzufügen. Vergessen Sie nicht, unseren Basisshop zu importieren.

Großartig, unsere wiederverwendbare Modalkomponente ist fertig. Wenn wir nun das Modal anzeigen möchten, müssen wir lediglich den modalStatus-Wert im Basisspeicher aktualisieren.

Sie können der modalen Komponente auch beliebige Stile hinzufügen, aber ich empfehle Ihnen, „Glassmorphism“ zu verwenden, dann wird es stilvoll aussehen.

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

Wir haben hier großartige Arbeit geleistet, aber ich biete Ihnen an, fortzufahren und die erste Komponente zu erstellen, die unser Modal verwendet – „Produktvorschau“, die verfügbar ist, nachdem auf der Vorschau-Schaltfläche auf einer beliebigen Produktkarte geklickt wird. Erstellen wir eine neue Vue-Datei im Ordner „common“ und fügen einige HTML/CSS-Elemente hinzu:

Dann importieren Sie diese Komponente in die Modal.vue-Datei und fügen Sie sie in das Inhaltsdiv ein.

Jetzt müssen wir unserer Karte nur noch eine Funktion wie „showPreview“ hinzufügen, damit diese Funktion nach dem Klicken des Benutzers den modalen Typ auf „product-preview“ und den modalen Status auf „true“ setzt. Das war's, wir verfügen über eine wiederverwendbare Modal- und Produktvorschaufunktion.

Okay, wir müssen weitermachen und Warnmeldungen zu unserem Nuxt.js-Projekt hinzufügen.

2. Konfigurieren von Benachrichtigungsnachrichten in unserem E-Commerce-Shop

Okay, wir können so etwas wie eine modale Änderung seiner Stile hinzufügen und es Warnungen nennen, das klingt nach einer einfachen und schnellen Lösung. Was aber, wenn zwei oder mehr Benachrichtigungen gleichzeitig ausgelöst werden (zum Beispiel die Nachricht „Willkommen“ und die Nachricht „Ihre Wunschliste ist nicht leer“)? Um dieses Problem zu lösen, erstellen wir einen Alarmcontainer, der sich entsprechend der Anzahl der eingehenden Nachrichten erweitert.

Zuerst werden wir Alarmeinstellungen zu unserem Shop hinzufügen, ähnlich wie wir es mit dem modalen Teil gemacht haben. Fügen Sie das Array „notificationsList“ zum Statusteil hinzu und fügen Sie Benachrichtigungsaktionen hinzu, die die Benachrichtigung pushen und aus der Liste entfernen. Jede Benachrichtigung hat eine eindeutige ID und zeigt Status, Typ, Nachricht und Verzögerung (Zeitraum, in dem unsere Nachricht sichtbar ist) an.

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

Als Nächstes müssen wir eine „Benachrichtigungs“-Komponente erstellen, die je nach Nachrichtentyp eine Nachricht selbst rendert. Außerdem müssen wir die Verzögerungszeit nutzen und Nachrichten automatisch entfernen.

Sie können Ihre Nachrichten nach Ihren Wünschen gestalten. Ich verwende wie üblich „Glassmorphism“ und füge etwas Farbe hinzu.

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

Und zum letzten Schliff müssen wir unseren Nachrichtencontainer erstellen und diesen Container in die app.vue-Datei einfügen.

Der Benachrichtigungscontainer rendert einfach ein Array unserer Liste, das in der Basisdatei gespeichert ist.

Vergessen Sie nicht, „Notification Container“ zur Hauptdatei app.vue hinzuzufügen.

Das war's, wir können unseren Entwicklungsserver neu starten und ein paar Mal Benachrichtigungen auslösen, nur um das Ergebnis zu überprüfen.

Durch die Integration von Modalitäten und Benachrichtigungen ist unsere E-Commerce-Anwendung Nuxt.js dynamischer, interaktiver und benutzerfreundlicher geworden. Diese Elemente tragen zu einem verbesserten Einkaufserlebnis bei und ermöglichen es unseren Kunden, eine Vorschau der Produkte anzuzeigen und während der gesamten Reise informiert zu bleiben.

Während wir unsere E-Commerce-Plattform weiter ausbauen und verbessern, können wir die Funktionalität von Modalitäten und Benachrichtigungen weiter ausbauen, sie an bestimmte Anwendungsfälle anpassen und unseren Benutzern ein nahtloses und ansprechendes Erlebnis bieten.

Wenn Sie einen Quellcode für dieses Tutorial benötigen, können Sie ihn hier erhalten.