[msPNnotify] - заменяем JGrowl

Описание
Компонент полностью заменяет уведомления Jgrowl на PNnotify для minishop2
Требуется только установка, далее все будет работать само. Все что делает компонент — это добавляет свои js на страницу. Настройки minishop2 он не переписывает, а лишь заменяет метод Massage
Посмотреть работу вы можете на демо-сайте

Под катом маленькое отступление и ссылка на скачивание компонента


Отступление
Это маленький компонент и по сути он всего лишь добавляет на сайт несколько js и css файлов, которые вы можете добавить вручную.
Компонент сохранил все методы modPNotify, по этому вы можете использовать как методы minishop2 так и методы modPNotify.
Мне просто надоело вручную на каждом проекте заменять JGrowl на PNotify
Компонент бесплатный, все исходники на GitHub.

Установить с modstore
Подробнее на странице GitHub

Основан на модифицированном modPNotify
Pavel Zarubin
26 февраля 2018, 23:59
modx.pro
8
5 245
+11

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

Баха Волков
27 февраля 2018, 10:48
+1
Жму руку, отличная работа!
    Дмитрий
    27 февраля 2018, 11:09
    +1
    Во, здорово. Спасибули! :)
      Leonid Krylov
      27 февраля 2018, 11:57
      +1
        Сергей
        27 февраля 2018, 12:01
        1
        +1
        класс! Красиво!
          Василий Наумкин
          27 февраля 2018, 12:05
          +3
          Настройки minishop2 он не переписывает, а лишь временно устанавливает свою настройку на ms2_frontend_js

          Не лучше ли просто проверять наличие ms2 и регистрировать свой скрипт после него — а в скрипте уже перезаписывать объект miniShop2.Message на свой?
          miniShop2.Message = App.Message;

          На modhost / modstore ведь тоже используются не стандартные всплывашки, а Alertify — именно так там и сделано.
            Pavel Zarubin
            27 февраля 2018, 12:28
            +1
            Что-то я не подумал о том, что можно просто переписывать Message :)
            Исправлю, спасибо!
              Pavel Zarubin
              27 февраля 2018, 18:18
              +1
              Обновил версию на 1.1.0 в новой версии не заменяется весь минишоповский default.js а лишь переписывается метод Massage.
              Также немного расширил описание, добавив информацию о том, что весь функционал modPNotify сохранен, и вы можете использовать методы как modPNotify так и методы minishop2
                Василий Столейков
                28 февраля 2018, 10:27
                +3
                1. Классно, было бы круто, если бы в компонент получилось запилить выбор между разными скриптами уведомлений, и выбор между нужным был бы только в настройках компонента. Например мне лично дизайн PNotify кажется детским, и я часто использую стильный Toastr (мне нравится в нём progress bar), хотя есть и другие стильные.

                2. Также было бы классно, если бы компонент перезаписывал и уведомления от Office, а то сбивает когда у минишопа один стиль уведомлений, а у офиса другой!

                Если получится сделать компонент универсальным, с выбором разных уведомлений, а также перезаписывающим и Office, то будет очень удобный инструмент, который будут использовать на всех проектах.
                  Дмитрий Суворов
                  28 февраля 2018, 10:34
                  +1
                  Согласен, и в случае подобной доработки — не грех сделать получившийся компонент платным.
                    Pavel Zarubin
                    28 февраля 2018, 12:35
                    +1
                    Круто, спасибо за идею! Реализую ее как только наберется хотя бы 3 варианта уведомлений и так поехали
                    PNotify
                    Toastr

                    Кто что еще знает/хочет?

                    А на счет офиса сегодня выложу, просто забыл о его существовании :)
                      Василий Столейков
                      28 февраля 2018, 12:58
                      1
                      +4
                      Мне понравились эти, оригинальные вроде:
                      1. Notiny
                      2. amaranjs
                      3. overhang
                      4. noty
                      5. Bootstrap Notify
                      6. UIKit notify
                        Pavel Zarubin
                        28 февраля 2018, 22:56
                        +1
                        Отлично, приглянулись некоторые, в идеале можно будет реализовать еще и выбор положения где они будут всплывать, как доберусь — реализую
                        Владимир
                        28 февраля 2018, 13:03
                        +5
                        А на счет офиса
                        — и AjaxForm )))
                          Pavel Zarubin
                          28 февраля 2018, 22:56
                          +1
                          Будет сделано :)
                          Алексей Соин
                          27 июня 2018, 07:43
                          0
                          Я постоянно заменяю стандартные уведомления на sweetalert.js.org/ если будет добавлено такое уведомление буду очень благодарен))
                  UDAV
                  27 февраля 2018, 15:06
                  0
                  Кроме дизайна есть какие-то отличия? Можно ли дизайн через чанки задавать? А уведомления с форм?)
                    Pavel Zarubin
                    27 февраля 2018, 16:24
                    +1
                    Отличия в том, что это PNotify со всеми его достоинствами и минусами, дизайн задавать через чанки нельзя.
                    Владимир
                    28 февраля 2018, 11:00
                    2
                    0
                    вот еще вариант sweetalert2.github.io/ приятных и функциональных (дизайн сразу вписывается в часто решаемые задачи), если вдруг выбор уведомлений далее будет реализован
                      Василий Столейков
                      28 февраля 2018, 13:04
                      0
                      Этот вариант больше на модальные окна смахивает, чем на простые уведомления того же минишопа.
                        Владимир
                        28 февраля 2018, 13:07
                        0
                        В примере. А если применить bottom-end, анимацию fade и т.п. ( все там уже есть), то получатся аккуратные уведомления. Но тут и модалки и уведомления, что универсальнее.
                          Василий Столейков
                          28 февраля 2018, 13:10
                          0
                          Всё равно оно ведёт себя не как уведомление, а как модалка. во время уведомления блокирует весь экран и не даёт работать дальше пока не закроешь его.
                            Владимир
                            28 февраля 2018, 13:13
                            +1
                            Всё равно
                            времени нет доказывать что ты ошибаешься. Автор просто в примере напихал модалок.
                              Василий Столейков
                              28 февраля 2018, 13:16
                              +2
                              времени нет
                              полностью согласен с тобой. Не буду отбирать твоё и моё время. )))

                              ты ошибаешься
                              не спорю. Ты лучше знаешь, я просто взглянул со стороны. Извини.

                              На самом деле даже такой нотифай-модалка кому-то подойдёт, проекты разные бывают. Спасибо за интересный пример!
                                Владимир
                                28 февраля 2018, 13:41
                                +1
                                test.vm2.ru/sweetalert2/ вот, без модалок в простейшем виде.
                                И еще раз повторю, этот вариант как раз включает и уведомления и модалки.
                      Pavel Zarubin
                      04 марта 2018, 03:47
                      +6
                      Обновление 1.1.1, добавлена поддержка Office и AjaxForm
                      В следующем обновлении планируется:
                      — Настройка задержки показа оповещений
                      — Выбор системы оповещения
                        Василий Столейков
                        04 марта 2018, 09:31
                        +2
                        Круто, молодец!
                          Sergey
                          05 марта 2018, 11:43
                          +2
                          Супер!
                            Владимир
                            05 марта 2018, 12:10
                            +2
                            Спасибо! Круто (нужная в хозяйстве вещь)!
                              Василий Столейков
                              09 марта 2018, 12:43
                              0
                              Ждём ещё возможности подтягивания других скриптов, а то PNotify у меня не заходит ну никак.
                              Кнопка раскрыть лишняя возле кнопки закрыть уведмоление, дизайн немножко детский.

                              Но работа получилась очень хорошая!

                              Вот бы ещё добавить в настройки возможности включить или отключить замену уведомлений для минишопа, офиса и ажаксформа — чтобы было гибче…
                                Pavel Zarubin
                                13 марта 2018, 23:10
                                0
                                Все будет как и обещал, времени сейчас просто немного не хватает
                              Konstantin
                              13 марта 2018, 22:06
                              0
                              Крутая штука. А можно в уведомление засунуть еще что-то? например ссылку на корзину?
                                Pavel Zarubin
                                13 марта 2018, 23:08
                                +1
                                Конечно, к примеру вот такой код будет выводить ссылку на корзину при добавлении товара в корзину
                                miniShop2.Callbacks.Cart.add.response.success = function() {
                                        miniShop2.Message.success('Товар успешно добавлен в корзину <br /><br /><a href="/cart">перейти в корзину</a>');
                                	return false;
                                }
                                Владимир
                                27 марта 2018, 13:40
                                0
                                Было бы хорошо в системных настройках добавить перечень шаблонов по ID где не будет вызываться mspnnotify и не нужно грузить
                                <script type="text/javascript" src="/assets/components/mspnnotify/js/web/pn/pnotify.custom.js"></script>
                                <script type="text/javascript" src="/assets/components/mspnnotify/js/web/pn/default.js"></script>
                                Сейчас js mspnnotify во всех шаблонах.
                                  Владимир
                                  28 марта 2018, 08:12
                                  0
                                  PS и наверно, лучше исчерпывающий список ID шаблонов где будет использоваться mspnnotify, а не наоборот.
                                  Андрей Шевяков
                                  01 апреля 2018, 15:05
                                  0
                                  Установилось с ошибкой:



                                  Работает только error окна. Окна success не всплывают.
                                  Форма письма отправляет. Но уведомлений об успехе нет.

                                  Переустановка не помогла. В чем может быть проблема?
                                    Pavel Zarubin
                                    01 апреля 2018, 15:11
                                    0
                                    Ошибка в установке это нормально, возможно вы кэш браузера не сбросили после установки, лучше покажите что в консоле браузера пишет когда должно появляться сообщение об успехе
                                      Альжан
                                      09 апреля 2018, 14:02
                                      0
                                      Добрый день! Такая же ошибка, кеш сбросил, в консоле браузера нет ошибок. Вот сайт можете проверить, отправить форму написать тест и какой нибудь номер телефона meal.kz
                                        Pavel Zarubin
                                        09 апреля 2018, 14:07
                                        0
                                        Вижу, да действительно есть, потому что скрипты ajaxForm подключаются ниже msPNnotify, как временное решение подключите скрипты вручную в самом низу страницы:
                                        <link rel="stylesheet" href="/assets/components/mspnnotify/js/web/pn/pnotify.custom.css" type="text/css" />
                                        <script type="text/javascript" src="/assets/components/mspnnotify/js/web/pn/pnotify.custom.js"></script>
                                        <script type="text/javascript" src="/assets/components/mspnnotify/js/web/pn/default.js"></script>
                                        Как руки дойдут до компонента — исправлю
                                          Альжан
                                          09 апреля 2018, 14:48
                                          0
                                          не выходит( подожду обновление, спасибо за ответ.
                                            Pavel Zarubin
                                            14 апреля 2018, 03:34
                                            0
                                            У меня не получается повторить вашу ошибку, если не сложно пришлите пожалуйста доступы на почту
                                            pavel@orendat.ru
                                            либо в любое другое место из моих контактов на modxpro
                                              Альжан
                                              14 апреля 2018, 10:26
                                              0
                                              отправил на почту
                                            Igor Ivanov
                                            14 апреля 2018, 12:25
                                            0
                                            Даже если подключить скрипт AjaxForm выше скриптов msPNnotify, все равно на success нет уведомлений.
                                              Pavel Zarubin
                                              14 апреля 2018, 14:10
                                              +1
                                              Исправлено, обновляйтесь
                                                Igor Ivanov
                                                15 апреля 2018, 07:23
                                                0
                                                Теперь работает, спасибо большое!
                                      Юрий
                                      05 мая 2018, 19:46
                                      0
                                      Можно ли включить в компонент уведомления для msOneClick?
                                        Pavel Zarubin
                                        10 мая 2018, 02:06
                                        +1
                                        Можно, еще бы кто нибудь предоставил доступы к сайту на котором стоит msOneClick :)
                                          Юрий
                                          11 мая 2018, 14:12
                                          0
                                          Выслал Вам доступы.
                                            Купчинский Михаил
                                            15 мая 2018, 17:13
                                            0
                                            Добрый день! получилось ли включить в компонент уведомления для msOneClick?
                                              Pavel Zarubin
                                              15 мая 2018, 19:43
                                              0
                                              Как оказалось msOneClick не использует никаких уведомлений, по этому нет, вам нужно либо самостоятельно их прикрутить, либо попросить их сделать автора дополнения
                                                Купчинский Михаил
                                                16 мая 2018, 09:30
                                                0
                                                Странно, при заказе через msOneClick (, быстрый заказ) у меня выдает ошибку
                                                jquery.jgrowl.min.js:1 Uncaught TypeError: b(...).size is not a function
                                                    at Function.b.jGrowl (jquery.jgrowl.min.js:1)
                                                    at Object.msOneClick.Message.show (default.js:301)
                                                    at Object.success (default.js:309)
                                                    at Object.success (default.js:141)
                                                    at Object.h.success (jquery.form.min.js:12)
                                                    at i (jquery-3.2.1.min.js:2)
                                                    at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
                                                    at A (jquery-3.2.1.min.js:4)
                                                    at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)
                                                Обычный заказ правильно срабатывает и выдает сообщение через msPNotify
                                                Я предполагаю, что это от того, что стандартные уведомления заменены на msPNotify.
                                                Но может я что-то не то ищу?
                                                  Igor Ivanov
                                                  16 мая 2018, 14:29
                                                  0
                                                  А если jquery поменять на вторую версию?
                                                    Купчинский Михаил
                                                    16 мая 2018, 15:50
                                                    0
                                                    Со второй помогло. Спасибо. Посмотрю теперь все ли будет правильно работать в других местах)
                                                      Igor Ivanov
                                                      16 мая 2018, 16:05
                                                      0
                                                      Все будет нормально ) Это просто используемая jgrowl не дружит с третьей jquery.
                                                        Купчинский Михаил
                                                        16 мая 2018, 16:09
                                                        0
                                                        Я имел ввиду, чтоб другие скрипты дружили со второй jquery)
                                                          Igor Ivanov
                                                          16 мая 2018, 16:10
                                                          0
                                                          Так и я про это, все будет хорошо…
                                          Максим
                                          20 мая 2018, 20:06
                                          0
                                          А чем эти «уведомлялки» лучше старых? Внешним видом?
                                            Raimei
                                            20 мая 2018, 20:21
                                            0
                                            Дело не в «лучше». Просто кому-то хватит и простого jGrowl, а кому-то захочется что-то по-сложнее и интереснее.
                                              Максим
                                              20 мая 2018, 22:00
                                              0
                                              Перефразирую: в каких случаях нужно использовать PNnotify? Т.е. с чем jGrowl не справляется?
                                              Понимаю, можно посмотреть доки и узнать отличия в функционале, но интересно чисто из практики пример.
                                            Rootiys
                                            26 июня 2018, 11:20
                                            0
                                            С Tickets не работает?
                                              Pavel Zarubin
                                              26 июня 2018, 11:45
                                              0
                                              В данный момент — нет
                                              Максим
                                              27 июня 2018, 15:58
                                              0
                                              И можно в следующем обновлении вынести стили и скрипты в системные настройки? Чтобы можно было, не боясь обновлений, запихнуть все в MinifyX.
                                              Спасибо.
                                                Pavel Zarubin
                                                27 июня 2018, 22:04
                                                0
                                                так и планирую, но честно я даже не знаю когда смогу выпустить обновление. В данный момент готовится вторая версия msRussianPost и глобальное обновление msCDEK и только к концу лета msPNnotify, так что можете смело перезаписывать скрипты или собирать компонент из исходников github
                                                Альжан
                                                05 октября 2018, 21:56
                                                0
                                                Добрый день! Не подскажите где можно поменять текст «Ваша заявка принята» использую ajaxForm
                                                  Альжан
                                                  06 октября 2018, 07:26
                                                  0
                                                  Вопрос закрыт, нашел где
                                                  Vlad Brise
                                                  06 декабря 2018, 21:49
                                                  +3
                                                  А как сделать, чтобы уведомление появлялось в другой части экрана?
                                                    Мартин Очоа
                                                    20 сентября 2019, 00:46
                                                    0
                                                    /assets/components/mspnnotify/js/web/pn/pnotify.custom.css

                                                    2-3 строки, задаётся привязка:
                                                    top: 36px;
                                                    right: 36px;
                                                    Можно поменять top на bottom, right на left.
                                                    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                                    66