この投稿をウェブノートでチェックしてください!

前回の記事で、e コマース ストアのメイン ページの作成が完了しました。今度はさらに進んで、モーダルや通知などの動的要素を追加します。まず第一に、モーダル ウィンドウは、製品のクイック ビューや製品管理などに役立ちます。通知の役割は、ウェルカム メッセージから始まりセール メッセージで終わるユーザーとのコミュニケーションに最適な方法であるため、非常に重要です。はい、イントロとタイトルからわかるように、今日の記事は次の内容で構成されます:

1. Nuxt.js でのカスタム モーダルの作成
2. E コマース ストアでの通知メッセージの設定

モーダルとアラートがいかに重要であるかがわかったので、次はそれらを Nuxt.js 電子商取引アプリケーションに統合する方法を検討し、実装の詳細に入りましょう。

1. Nuxt.js でカスタムモーダルを作成する

さまざまな方法で使用でき、さまざまなデータを表示できるように、再利用可能なモーダル ウィンドウを作成したいことを明確にする必要があります。そのために、モーダル コンポーネント内でレンダリングできるモーダル固有のスタイルと項目を備えたメイン モーダル コンポーネントを作成します。

まず最初に、背景をぼかすコンテナと、動的にレンダリングされるアイテムを含むモーダル div を含む Modal.vue ファイルを「ui」フォルダー内に作成します。また、「×マーク」アイコンをインポートして、モーダルウィンドウを閉じるボタンにします。

ベース ストア内に、false 値を持つ 2 つの新しい変数「modalStatus」と文字列としての「modalType」を追加し、これらの値を変更する単純なアクションを追加します。

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

ステータス変数はモーダル レンダリングの動作を制御し、type はさまざまなモーダル タイプを更新します。

モーダル制御システムを作成したら、モーダル コンポーネントをデフォルトのレイアウトに追加できます。ベースストアをインポートすることを忘れないでください。

再利用可能なモーダル コンポーネントの準備ができました。モーダルを表示したい場合は、ベース ストア内の modalStatus 値を更新するだけです。

また、モーダルコンポーネントには好きなスタイルを追加できますが、「Glassmorphism」を使用するとスタイリッシュに見えるのでおすすめです。

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

ここでは素晴らしい仕事をしましたが、続行して、モーダルを使用する最初のコンポーネント「製品プレビュー」を作成することをお勧めします。このコンポーネントは、製品カードのプレビュー ボタンをクリックした後に利用可能になります。 「common」フォルダー内に新しい Vue ファイルを作成し、いくつかの HTML/CSS 要素を追加しましょう:

次に、このコンポーネントを Modal.vue ファイルにインポートし、コンテンツ div に挿入します。

ここで必要なのは、「showPreview」のような関数をカードに追加することだけです。これにより、ユーザーがクリックした後、その関数によってモーダル タイプが「product-preview」に設定され、モーダル ステータスが「true」に設定されます。以上です。再利用可能なモーダル機能と製品プレビュー機能が備わっています。

さて、次に進んで、Nuxt.js プロジェクトにアラート メッセージを追加する必要があります。

2. Eコマースストアでの通知メッセージの設定

わかりました。スタイルを変更するモーダルのようなものを追加して、それをアラートと呼びます。これはシンプルで高速なソリューションのように思えます。しかし、同時に 2 つ以上のアラートがトリガーされる場合はどうなるでしょうか (たとえば、「ようこそ」メッセージと「ウィッシュリストは空ではありません」メッセージ)。この問題を解決するために、受信メッセージの数に応じて拡張するアラート コンテナを作成します。

まず、モーダル部分で行ったのと同様に、ストアにアラート設定を追加します。 「notificationsList」配列を状態部分に追加し、リストから通知をプッシュおよび削除する通知アクションを追加します。各通知には一意の ID があり、ステータス、タイプ、メッセージ、遅延 (メッセージが表示される時間) が表示されます。

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

次に、メッセージの種類に応じてメッセージ自体をレンダリングする「通知」コンポーネントを作成する必要があります。また、遅延時間を使用し、メッセージを自動的に削除する必要があります。

メッセージのスタイルは自由に設定できます。私はいつものように「Glassmorphism」を使用して色を追加します。

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

そして最後の仕上げとして、メッセージ コンテナを作成し、そのコンテナを app.vue ファイルに追加する必要があります。

通知コンテナは、ベース ファイルに保存されているリストの配列を単純にレンダリングします。

メインの app.vue ファイルに「通知コンテナ」を忘れずに追加してください。

これで、開発サーバーを再起動し、結果を確認するために通知メッセージを数回トリガーできます。

モーダルと通知の統合により、Nuxt.js 電子商取引アプリケーションはより動的、インタラクティブ、そしてユーザーフレンドリーになりました。これらの要素はショッピング エクスペリエンスの向上に貢献し、お客様が製品をプレビューし、旅行全体を通じて最新情報を入手できるようにします。

e コマース プラットフォームの構築と改善を継続することで、モーダルと通知の機能をさらに拡張し、特定のユースケースに合わせて調整し、ユーザーにとってシームレスで魅力的なエクスペリエンスを確保できます。

このチュートリアルのソース コードが必要な場合は、ここから入手できます。