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


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

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


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

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

Основан на модифицированном modPNotify
27 февраля 2018, 02:59    Pavel Zarubin   G+  
8    1016 +11


Комментарии ()

  1. Баха Волков 27 февраля 2018, 10:48 # +1
    Жму руку, отличная работа!
    1. Дмитрий 27 февраля 2018, 11:09 # +1
      Во, здорово. Спасибули! :)
      1. Leonid Krylov 27 февраля 2018, 11:57 # +1
        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 — именно так там и сделано.
            1. Pavel Zarubin 27 февраля 2018, 12:28 # +1
              Что-то я не подумал о том, что можно просто переписывать Message :)
              Исправлю, спасибо!
              1. Pavel Zarubin 27 февраля 2018, 18:18 # +1
                Обновил версию на 1.1.0 в новой версии не заменяется весь минишоповский default.js а лишь переписывается метод Massage.
                Также немного расширил описание, добавив информацию о том, что весь функционал modPNotify сохранен, и вы можете использовать методы как modPNotify так и методы minishop2
                1. Василий Столейков 28 февраля 2018, 10:27 # +3
                  1. Классно, было бы круто, если бы в компонент получилось запилить выбор между разными скриптами уведомлений, и выбор между нужным был бы только в настройках компонента. Например мне лично дизайн PNotify кажется детским, и я часто использую стильный Toastr (мне нравится в нём progress bar), хотя есть и другие стильные.

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

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

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

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

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

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

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

                              Вот бы ещё добавить в настройки возможности включить или отключить замену уведомлений для минишопа, офиса и ажаксформа — чтобы было гибче…
                              1. Pavel Zarubin 13 марта 2018, 23:10 # 0
                                Все будет как и обещал, времени сейчас просто немного не хватает
                            2. Konstantin 13 марта 2018, 22:06 # 0
                              Крутая штука. А можно в уведомление засунуть еще что-то? например ссылку на корзину?
                              1. 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;
                                }
                                
                              2. Владимир 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 во всех шаблонах.
                                1. Владимир 28 марта 2018, 08:12 # 0
                                  PS и наверно, лучше исчерпывающий список ID шаблонов где будет использоваться mspnnotify, а не наоборот.
                                2. Андрей Шевяков 01 апреля 2018, 15:05 # 0
                                  Установилось с ошибкой:



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

                                  Переустановка не помогла. В чем может быть проблема?
                                  1. Pavel Zarubin 01 апреля 2018, 15:11 # 0
                                    Ошибка в установке это нормально, возможно вы кэш браузера не сбросили после установки, лучше покажите что в консоле браузера пишет когда должно появляться сообщение об успехе
                                    1. Альжан 09 апреля 2018, 14:02 # 0
                                      Добрый день! Такая же ошибка, кеш сбросил, в консоле браузера нет ошибок. Вот сайт можете проверить, отправить форму написать тест и какой нибудь номер телефона meal.kz
                                      1. 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>
                                        
                                        Как руки дойдут до компонента — исправлю
                                        1. Альжан 09 апреля 2018, 14:48 # 0
                                          не выходит( подожду обновление, спасибо за ответ.
                                          1. Pavel Zarubin 14 апреля 2018, 03:34 # 0
                                            У меня не получается повторить вашу ошибку, если не сложно пришлите пожалуйста доступы на почту
                                            pavel@orendat.ru
                                            либо в любое другое место из моих контактов на modxpro
                                            1. Альжан 14 апреля 2018, 10:26 # 0
                                              отправил на почту
                                          2. Igor Ivanov 14 апреля 2018, 12:25 # 0
                                            Даже если подключить скрипт AjaxForm выше скриптов msPNnotify, все равно на success нет уведомлений.
                                            1. Pavel Zarubin 14 апреля 2018, 14:10 # +1
                                              Исправлено, обновляйтесь
                                              1. Igor Ivanov 15 апреля 2018, 07:23 # 0
                                                Теперь работает, спасибо большое!
                                    2. Юрий 05 мая 2018, 19:46 # 0
                                      Можно ли включить в компонент уведомления для msOneClick?
                                      1. Pavel Zarubin 10 мая 2018, 02:06 # +1
                                        Можно, еще бы кто нибудь предоставил доступы к сайту на котором стоит msOneClick :)
                                        1. Юрий 11 мая 2018, 14:12 # 0
                                          Выслал Вам доступы.
                                          1. Купчинский Михаил 15 мая 2018, 17:13 # 0
                                            Добрый день! получилось ли включить в компонент уведомления для msOneClick?
                                            1. Pavel Zarubin 15 мая 2018, 19:43 # 0
                                              Как оказалось msOneClick не использует никаких уведомлений, по этому нет, вам нужно либо самостоятельно их прикрутить, либо попросить их сделать автора дополнения
                                              1. Купчинский Михаил 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.
                                                Но может я что-то не то ищу?
                                                1. Igor Ivanov 16 мая 2018, 14:29 # 0
                                                  А если jquery поменять на вторую версию?
                                                  1. Купчинский Михаил 16 мая 2018, 15:50 # 0
                                                    Со второй помогло. Спасибо. Посмотрю теперь все ли будет правильно работать в других местах)
                                                    1. Igor Ivanov 16 мая 2018, 16:05 # 0
                                                      Все будет нормально ) Это просто используемая jgrowl не дружит с третьей jquery.
                                                      1. Купчинский Михаил 16 мая 2018, 16:09 # 0
                                                        Я имел ввиду, чтоб другие скрипты дружили со второй jquery)
                                                        1. Igor Ivanov 16 мая 2018, 16:10 # 0
                                                          Так и я про это, все будет хорошо…
                                        2. Максим 20 мая 2018, 20:06 # 0
                                          А чем эти «уведомлялки» лучше старых? Внешним видом?
                                          1. Hiddenski 20 мая 2018, 20:21 # 0
                                            Дело не в «лучше». Просто кому-то хватит и простого jGrowl, а кому-то захочется что-то по-сложнее и интереснее.
                                            1. Максим 20 мая 2018, 22:00 # 0
                                              Перефразирую: в каких случаях нужно использовать PNnotify? Т.е. с чем jGrowl не справляется?
                                              Понимаю, можно посмотреть доки и узнать отличия в функционале, но интересно чисто из практики пример.
                                          Вы должны авторизоваться, чтобы оставлять комментарии.