SweetAlert2. Красивые уведомления для AjaxForm, Office, Minishop2 и msOneClick

Компонент переопределяет уведомления jGrowl для AjaxForm, Office и Minishop2.



Системные настройки:
  • swal2_position — Позиция модального окна, может быть 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', или 'bottom-end'. По умолчанию: 'top-end'.
  • swal2_timer — Таймер автоматического закрытия модального окна. Установить в миллисекундах. По умолчанию: 3000.
  • swal2_showconfirmbutton — Если установлено значение false, кнопка 'Подтвердить' не будет отображаться. По умолчанию: false
  • swal2_toast — Следует ли рассматривать предупреждение как тостовое уведомление. Эта опция обычно связана с параметром позиции и таймером. Тосты НИКОГДА не автофокусированы. По умолчанию: true
  • swal2_width — Ширина уведомления. По умолчанию: 19rem


Если отключить системную настройку swal2_toast, то увидим уже большое уведомление:


Документация по опциям

По умолчанию SweetAlert2 принимает опции системных настроек, но вы всегда можете переопределить их или добавить другие опции.

1. Инициализируем заново SweetAlert2 и передаем новые опции:
SweetAlert2.initialize({ 
    footer: '2020', 
    backdrop: 'rgba(0,0,0,.5)'
})

2. Изменяем существующую конфигурацию:
SweetAlert2.config.toast = true;
SweetAlert2.config.backdrop = 'rgba(0,0,0,.5)';

Смотреть все примеры

UPD. Версия 1.0.2
  • Добавлена системная настройка width
  • Исправлена регистрация скриптов
  • Исправлена ошибка, когда скрипт SweetAlert2 не загрузился
  • Добавлены системные настройки для инициализации соответствующих компонентов
  • Добавлена поддержка компонента msOneClick

Компонент доступен в modstore.

Aleksandr Huz
08 мая 2020, 11:50
modx.pro
7
714
+21
Поблагодарить автора Отправить деньги

Комментарии: 24

Алексей
08 мая 2020, 12:13
+1
Ссылка на компонент битая
    Aleksandr Huz
    08 мая 2020, 12:16
    0
    Спасибо. Исправил
    Николай
    08 мая 2020, 19:26
    0
    На одном из проектов делал так, как по мне главное что бы уведомление было по середине и была кнопка закрыть
      Aleksandr Huz
      08 мая 2020, 19:52
      0
      SweetAlert2.config.position = 'center';
      SweetAlert2.config.showCloseButton = true;
      Andrey
      09 мая 2020, 03:47
      +2
      За компонент лойс однозначно!
      Собственно скачал и поставил на проект, которым сейчас занимаюсь!
      Крутые уведомлялки, я бы чуть чуть буквально внес корректировку!

      Там у Вас получается подключаются куча скриптов со стороннего сайта:
      Скрипты фронтенда: //cdn.jsdelivr.net/npm/sweetalert2@9
      Меня просто все же слегка трясет от того, что бывает на сайте грузятся скрипты не родные, может решение не самое элегантное и не знаю что теряется при таком подходе, но я взял с сайта только этот скрипт:
      /npm/sweetalert2@9.10.12/dist/sweetalert2.all.min.js
      И запилил себе на сайт, с одной стороны конечно не самое элегантное решение, в плане, что придется самостоятельно следить за изменением версий, но думаю не критично, я протестил, как описал, работает отлично и на УРА, даже с компонентом Минюфиксом!
        Aleksandr Huz
        09 мая 2020, 09:43
        0
        Спасибо, Андрей!

        Там у Вас получается подключаются куча скриптов со стороннего сайта:
        Что-то не понял, что за куча скриптов?

        Я предпочитаю подключать скрипты из CDN и загружать асинхронно. И как Вы правильно отметили, не нужно следить за обновлением.
          Andrey
          09 мая 2020, 15:26
          +1
          ну получается что по ссылке подключаются я так полагаю куча всякой фигни не понятной, я как не оч шарящий человек сразу и не разберет, может там что то совершенно ненужное подключается.

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

          Ну опять таки это для кого как, как говорится кому так удобнее тот так и делает, а вот уведомлялки крутые и подключаются быстро и адаптированны под работу востребованных сниппетов уже, так что то что надо прям, лакшери как говорится. Стильно, четко, молодежно, соверменно!
            Алексей Соин
            09 мая 2020, 22:38
            +2
            раньше тоже пользовался часто cdn, но когда в один день ркн заблокировал сервера гугл, амазон и прочего на котором находилось большинство cdn и у меня больше 20ти сайтов перестали нормально работать я больше решил cdn не пользовать на сайтах, а подгружать локально. В тот момент был очень веселый день))))
              Andrey
              10 мая 2020, 16:08
              0
              ну кстати да, как аргумент в сторону все же отказа использования подобной практики.
              Я все же такой политики, чтобы самостоятельно контролировать сборки и актуализировать
                Aleksandr Huz
                24 мая 2020, 17:22
                +1
                Обновил компонент. Теперь, если по каким-то причинам SweetAlert2 не загрузится, то будет работать стандартные уведомления. Ошибок не будет
                  Andrey
                  26 мая 2020, 17:23
                  +1
                  чччетко!
            Denis
            20 мая 2020, 13:59
            0
            Добрый день, будет ли добавлен msOneClick?
              Aleksandr Huz
              20 мая 2020, 18:01
              0
              Добрый день, Денис! Да, будет! Скоро
                Aleksandr Huz
                24 мая 2020, 17:21
                +1
                Добавил msOneClick.
                  Denis
                  26 мая 2020, 14:01
                  0
                  Спасибо!)
                Anton Erin
                05 июня 2020, 18:45
                0
                Привет!
                Очень классный компонент, спасибо.

                Никак не могу понять как инициализировать новые настройки с моими параметрами.

                Делаю так:
                <script>
                    SweetAlert2.initialize({
                        footer: '2020',
                        backdrop: 'rgba(0,0,0,.5)'
                    })
                    SweetAlert2.config.toast = false;
                    SweetAlert2.config.backdrop = 'rgba(0,0,0,.5)';
                </script>
                А в консоли Chrome пишет:
                Uncaught ReferenceError: SweetAlert2 is not defined
                Пробовал в футере после всех скриптов, пробовал в head — не работает.

                В каком месте надо объявлять?

                Спасибо.
                  Aleksandr Huz
                  05 июня 2020, 22:05
                  0
                  Привет, Антон!
                  Значит вызываешь до загрузки основного скрипта. Добавь на событие ready или load
                    Anton Erin
                    05 июня 2020, 22:25
                    0
                    Привет, Александр!
                    Большое спасибо!

                    Устал, начал тупить.

                    <script>
                        $(document).ready(function () {
                            SweetAlert2.initialize({
                                footer: '2020',
                                backdrop: 'rgba(0,0,0,.5)'
                            })
                            SweetAlert2.config.toast = false;
                            SweetAlert2.config.backdrop = 'rgba(0,0,0,.5)';
                        });
                    </script>
                    И, разумеется, вызывать после jQuery.
                  SEQUEL.ONE
                  15 июня 2020, 01:45
                  0
                  Как это чудо к Tickets прикрутить?
                    Aleksandr Huz
                    15 июня 2020, 10:48
                    0
                    Посмотрю на днях
                      SEQUEL.ONE
                      15 июня 2020, 16:00
                      0
                      Я уже сделал, не могу коммит в гитхаб отправить.
                  Anton Erin
                  15 июня 2020, 14:56
                  0
                  Еще вопрос.
                  Как исключить загрузку скриптов SweetAlert на всех страницах, кроме тех, где вызвана форма?
                  А то скрипты загружены и в разделе фото, и описание услуг, и на странице с формой обратной связи.
                    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                    24