Проверьте этот пост в моих веб-заметках!

В нашей предыдущей статье мы завершили создание главных страниц нашего интернет-магазина, и теперь пришло время пойти дальше и добавить некоторые динамические элементы, такие как модальные окна и уведомления. Прежде всего, модальное окно будет полезно для быстрого просмотра продукта, управления продуктом и т. д., а роль уведомлений имеет решающее значение, поскольку это лучший способ общения с пользователем, начиная с приветственных сообщений и заканчивая сообщениями о продаже. Да, как вы поняли из вступления и названия, наша сегодняшняя статья будет состоять из следующего:

1. Создание пользовательских модальных окон в Nuxt.js
2. Настройка уведомлений в нашем интернет-магазине

Теперь, когда мы знаем, насколько важны модальные окна и оповещения, давайте изучим, как интегрировать их в наше приложение электронной коммерции Nuxt.js, и углубимся в особенности реализации.

1. Создание пользовательских модальных окон в Nuxt.js

Нам нужно уточнить, что мы хотим создать модальное окно многократного использования, чтобы его можно было использовать разными способами и показывать разные данные. Для этого мы создадим основной модальный компонент с модальными стилями и элементами, которые можно будет отображать внутри нашего модального компонента.

Перво-наперво создайте файл Modal.vue внутри папки «ui» с контейнером, который должен размывать фон, и модальным элементом div внутри, который будет содержать динамически отображаемые элементы. Кроме того, мы импортируем значок «xmark» и сделаем его кнопкой, которая закроет наше модальное окно.

Внутри нашего базового хранилища мы добавим две новые переменные «modalStatus» с ложным значением и «modalType» в виде строки, а также добавим простые действия, которые изменят эти значения.

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

Переменная status будет управлять поведением модального рендеринга, а type будет обновлять различные модальные типы.

Теперь, когда у нас есть модальная система управления, мы можем добавить наш модальный компонент в макет по умолчанию. Не забудьте импортировать наш базовый магазин.

Отлично, наш многоразовый модальный компонент готов, теперь, если мы хотим отобразить модальное окно, нам просто нужно обновить значение modalStatus внутри базового хранилища.

Также вы можете добавлять к модальному компоненту любые стили, которые захотите, но я рекомендую вам использовать «Глассморфизм», и это будет выглядеть стильно.

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

Мы здесь отлично поработали, но я предлагаю вам продолжить и создать первый компонент, который будет использовать наше модальное окно - «Предварительный просмотр продукта», который будет доступен после нажатия кнопки предварительного просмотра на любой карточке продукта. Давайте создадим новый файл Vue внутри «общей» папки и добавим несколько элементов HTML/CSS:

Затем импортируйте этот компонент в файл Modal.vue и вставьте его в div контента.

Теперь нам нужно только добавить на нашу карточку такую ​​функцию, как «showPreview», чтобы после щелчка пользователя эта функция устанавливала модальный тип «product-preview» и модальный статус «true». Вот и все, у нас есть многоразовый модальный функционал и функция предварительного просмотра продукта.

Хорошо, нам нужно двигаться дальше и добавить предупреждающие сообщения в наш проект Nuxt.js.

2. Настройка уведомлений в нашем интернет-магазине.

Хорошо, мы можем добавить что-то вроде модального изменения его стилей и назвать это оповещениями, звучит как простое и быстрое решение. Но что, если одновременно сработают два или более оповещений (например, сообщение «приветствие» и сообщение «ваш список желаний не пуст»)? Чтобы решить эту проблему, мы создадим контейнер оповещений, который будет расширяться пропорционально количеству входящих сообщений.

Прежде всего, мы добавим настройки оповещений в наш магазин, аналогично тому, что мы сделали с модальной частью. Добавьте массив notificationsList в часть состояния и добавьте действия по уведомлению, которые будут отправлять и удалять уведомления из списка. Каждое уведомление имеет уникальный идентификатор и показывает статус, тип, сообщение и задержку (время, в течение которого наше сообщение будет видно).

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

Следующим шагом нам нужно создать компонент «Уведомление», который будет отображать само сообщение в зависимости от типа сообщения. Кроме того, нам нужно использовать время задержки и автоматически удалять сообщения.

Вы можете оформить свои сообщения как угодно, я, как обычно, использую «Глассморфизм» и добавляю немного цвета.

.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 стало более динамичным, интерактивным и удобным для пользователя. Эти элементы способствуют повышению качества покупок, позволяя нашим клиентам предварительно просматривать товары и оставаться в курсе на протяжении всего пути.

Поскольку мы продолжаем создавать и совершенствовать нашу платформу электронной коммерции, мы можем и дальше расширять функциональность модальных окон и уведомлений, адаптируя их к конкретным сценариям использования и обеспечивая удобство и удобство работы для наших пользователей.

Если вам нужен исходный код для этого руководства, вы можете получить его здесь.