[miniShop2 4.0.0-beta] - Разбор нововведений. Уведомления. Пример подключения своей библиотеки.

Продолжая серию заметок @Николай Савин о нововведениях в miniShop2 Для MODX2, расскажу об изменениях в уведомлениях.

jGrowl заменили на IziToast.

Настройки хранятся в файле assets/components/minishop2/js/web/vanilajs/message_settings.json. Путь к файлу содержится в системной настройке ms2_frontend_notify_js_settings.

Если показ уведомления нужно отменить, то действовать следует по-старинке:

miniShop2.Callbacks.add('Cart.change.response.success', 'test', (response) => {       
        response.message = ''; // присваиваем пустую строку и уведомление показано не будет
});

Подключение другой библиотеки уведомлений рассмотрим на примере SweetAlert2.
1. Скачиваем стили и скрипты данной библиотеки с официального сайта. Или устанавливаем через пакетный менеджер. Или копируем ссылки на CDN.

2. Копируем файл assets/components/minishop2/js/web/vanilajs/message_settings.json и называем его custom_message_settings.json (название может быть любым).
!!! ВАЖНО!!! Если нужно просто изменить настройки, оригинальный файл так же необходимо копировать и переименовать, чтобы избежать затирания при последующих обновлениях.

3. Дописываем настройки новой библиотеки:

{
  "msNotify": {},
  "MsIziToast": {
    "jsPath": "assets/components/minishop2/js/web/vanilajs/lib/izitoast/iziToast.min.js",
    "cssPath": "assets/components/minishop2/css/web/lib/izitoast/iziToast.min.css",
    "handlerClassName": "iziToast",
    "handlerOptions": {
      "timeout": 1500
    }
  },
  "MsSwal2": {
    "jsPath": "assets/components/minishop2/js/web/vanilajs/lib/sweetalert2/sweetalert2.min.js",
    "cssPath": "assets/components/minishop2/css/web/lib/sweetalert2/sweetalert2.min.css",
    "handlerClassName": "Swal",
    "handlerOptions": {
      "position": "top-end",
      "title": "",
      "showConfirmButton": false,
      "toast": true,
      "timer": 1500
    }
  }
}

jsPath — путь до скриптов библиотеки (можно указать ссылку на CDN.);
cssPath — путь до стилей библиотеки (можно указать ссылку на CDN.);
handlerClassName — название класса, как в документации к библиотеке;
handlerOptions — настройки уведомлений, как в документации к библиотеке.
!!! ВАЖНО!!! MsSwal2 это название класса, который мы создадим далее.

4. Создаём новый класс, расширяя стандартный MsNotify

import MsNotify from './msnotify.class.js';

export default class MsSwal2 extends MsNotify {
    show(type, message) {
        if (window[this.config.handlerClassName] && message) {
            const options = Object.assign(this.config.handlerOptions, {icon: type, title: message});
            window[this.config.handlerClassName]['fire'](options);
        }
    }
}

Путь к импортируемому классу указан с учётом того, что файл класса MsSwal2 лежит в той же папке, что и файл класса MsNotify. Если ваш файл лежит в другой папке, например в /assets/project_files/js/msswal2.class.js, то импорт будет выглядеть так

import MsNotify from '../../components/minishop2/js/web/vanilajs/modules/msnotify.class.js';

5. Теперь осталось указать название нашего класса в системной настройке ms2_notify_js_class_name и путь к нему относительно корня сайта в ms2_notify_js_class_path.
!!! ВАЖНО!!! Если в пути не изпользуете плейсхолдер [[+jsUrl]], то не забудьте в начале добавить слэш(/).

UPDATE
Некоторым описанный выше способ может показаться сложным, поэтому покажу «более простой», который предполагает, что вы самостоятельно должны переопределить значение в miniShop2.Message. К достоинствам второго способа могу отнести тот факт, что необязательно оформлять всё в виде класса.
Можно написать инлайново внутри обработчика события DOMContentLoaded

<script>
window.addEventListener('DOMContentLoaded', e => {
    miniShop2.Message = {
        success: (msg) => alert(msg),
        error: (msg) => alert(msg)
    }
});
</script>

Но лучше всё же вынести в файл

miniShop2.Message = {
        success: (msg) => alert(msg),
        error: (msg) => alert(msg)
    }

При подключении файла следует использовать атрибут defer, если внутри файла не используется событие DOMContentLoaded.

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

На этом всё. Не забываем благодарить авторов, это вдохновляет делать больше и быстрее.