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
Aleksandr Huz
08 мая 2020, 11:50
modx.pro
7
3 343
+21
Поблагодарить автора Отправить деньги

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

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

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

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

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

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

          Ну опять таки это для кого как, как говорится кому так удобнее тот так и делает, а вот уведомлялки крутые и подключаются быстро и адаптированны под работу востребованных сниппетов уже, так что то что надо прям, лакшери как говорится. Стильно, четко, молодежно, соверменно!
            Алексей Соин
            Алексей Соин
            09 мая 2020, 22:38
            +2
            раньше тоже пользовался часто cdn, но когда в один день ркн заблокировал сервера гугл, амазон и прочего на котором находилось большинство cdn и у меня больше 20ти сайтов перестали нормально работать я больше решил cdn не пользовать на сайтах, а подгружать локально. В тот момент был очень веселый день))))
              Andrey
              Andrey
              10 мая 2020, 16:08
              0
              ну кстати да, как аргумент в сторону все же отказа использования подобной практики.
              Я все же такой политики, чтобы самостоятельно контролировать сборки и актуализировать
                Aleksandr Huz
                Aleksandr Huz
                24 мая 2020, 17:22
                +1
                Обновил компонент. Теперь, если по каким-то причинам SweetAlert2 не загрузится, то будет работать стандартные уведомления. Ошибок не будет
                  Andrey
                  Andrey
                  26 мая 2020, 17:23
                  +1
                  чччетко!
            Hiiragi
            Hiiragi
            20 мая 2020, 13:59
            0
            Добрый день, будет ли добавлен msOneClick?
              Aleksandr Huz
              Aleksandr Huz
              20 мая 2020, 18:01
              0
              Добрый день, Денис! Да, будет! Скоро
                Aleksandr Huz
                Aleksandr Huz
                24 мая 2020, 17:21
                +1
                Добавил msOneClick.
                  Hiiragi
                  Hiiragi
                  26 мая 2020, 14:01
                  0
                  Спасибо!)
                Anton
                Anton
                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
                  Aleksandr Huz
                  05 июня 2020, 22:05
                  0
                  Привет, Антон!
                  Значит вызываешь до загрузки основного скрипта. Добавь на событие ready или load
                    Anton
                    Anton
                    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
                  SEQUEL.ONE
                  15 июня 2020, 01:45
                  0
                  Как это чудо к Tickets прикрутить?
                    Aleksandr Huz
                    Aleksandr Huz
                    15 июня 2020, 10:48
                    0
                    Посмотрю на днях
                      SEQUEL.ONE
                      SEQUEL.ONE
                      15 июня 2020, 16:00
                      0
                      Я уже сделал, не могу коммит в гитхаб отправить.
                  Anton
                  Anton
                  15 июня 2020, 14:56
                  0
                  Еще вопрос.
                  Как исключить загрузку скриптов SweetAlert на всех страницах, кроме тех, где вызвана форма?
                  А то скрипты загружены и в разделе фото, и описание услуг, и на странице с формой обратной связи.
                    olik
                    olik
                    20 июля 2020, 14:09
                    0
                    После установки SweetAlert2 со всех станиц сайта пошла ссылка на cdn.jsdelivr.net/npm/sweetalert2@9
                    А на результаты оптимизации сайта влияют внешние, исходящие ссылки на другие ресурсы!
                    Aleksandr Huz, подскажите как решить проблему?
                    Ведь при переносе на свой хост файл с яваскритом SweetAlert2 почемуто не работает.
                      Aleksandr Huz
                      Aleksandr Huz
                      22 июля 2020, 10:20
                      0
                      Напишите в ТП и предоставьте доступы в админку
                        olik
                        olik
                        22 июля 2020, 14:46
                        0
                        Написал, Спасибо.
                      Андрей Шевяков
                      Андрей Шевяков
                      24 июля 2020, 16:01
                      0
                      Добрый день!

                      Использую дополнение msPromoCode. При применении промо-кода, в алерте добавляется [object Object], но SweetAlert2 работает. Из-за чего может быть [object Object]?

                      prnt.sc/tnvecm
                        Ян Сонов
                        Ян Сонов
                        03 октября 2020, 01:08
                        0
                        Прикольные уведомления, но почему-то не работают с Localizator. C «базовым» языком работает, а вот с другими — нет (выводятся стандартные jGrowl).
                          Сергей
                          Сергей
                          17 сентября 2021, 14:35
                          0
                          Выводятся стандартные jGrowl при обновленном AjaxForm
                            Сергей
                            Сергей
                            17 сентября 2021, 14:48
                            0
                            Update: были прописаны свои скрипты и стили. При переустановке на стандартные значения все заработало.
                            Максим
                            Максим
                            09 февраля 2022, 13:38
                            0
                            Подскажите, как к Tickets прикрутить?
                              Андрей
                              Андрей
                              07 декабря 2022, 13:45
                              0
                              Раз уж после установки SweetAlert2 все необходимые скрипты уже подключены, то можно «прямо в лоб» изменить сообщения в скрипте самого Tickets.
                              В файле assets/components/tickets/js/web/default.js можно поменять
                              <script>
//...
success: function (message) {
    if (message) {
        $.jGrowl(message, {theme: 'tickets-message-success'});
    }
}
//...
</script>
                              на
                              <script>
//...
success: function (message) {
    if (message) {
        Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: message,
            showConfirmButton: false,
            timer: 1500,
            toast: true
        })
    }
}
//...
</script>
                              Ну и, конечно, сообщения с остальными статусами.
                                Андрей
                                Андрей
                                07 декабря 2022, 15:12
                                0
                                «В лоб» не совсем правильно, лучше было бы доработать SweetAlert2 полностью под работу с Tickets.
                                Для этого понадобится:
                                1. Доработать assets/components/sweetalert2/js/default.js (выбрав его в параметре swal2_frontend_js)
                                2. Добавить соответствующий системный параметр типа swal2_tickets
                                3. Прописать этот параметр в sweetalert2.class.php
                                После этого обновление компонента Tickets ничего не сломает.
                                А для обновления самого SweetAlert2, скорее всего, достаточно будет только заменить файл sweetalert2.all.min.js
                                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                34