Красивые и современные уведомления в OpenCart без платных модулей

В дефолтном OpenCart система уведомлений на фронте - это просто Bootstrap alert где придётся. Никакого единства стиля, никакой анимации, никакого единого клиентского API. Просто воткнём alert вот тут и делай с ним что хочешь (сам он часто не пропадает).

Уверен есть модули (хотя не слежу за их ассортиментом), ну камон, какие модули? Это дефолтная фича! Уведомления не специфический костыль, нужный раз в 40 лет на одном проекте.

Поэтому я запилил одну простую глобальную клиентскую функцию, которая решает проблему раз и навсегда.

Как это работает

Функция называется notification(type, message, timeout) (не мудрствовал над названием) и доступна глобально. Принимает три параметра:

• type - один из: primary, success, warning, info, danger (точно под цвета Bulma)
• message - текст или HTML, который хочешь показать
• timeout - сколько миллисекунд показывать уведомление, по-умолчанию 5 секунд

Вызываешь - и появляется красивое уведомление в правом верхнем углу (или где захочешь позиционировать), с нужным цветовым акцентом, лёгкой прозрачностью + размытием фона, плавным появлением (slide-in) и автоматическим исчезновением (также по клику на крестик или на само уведомление). Ненавязчиво, современно, стильно, просто, удобно. Ещё аргументы нужны? Расслабься, это был риторический вопрос, читай дальше 😎

Почему это лучше стока

• Единообразие: все уведомления в одном стиле, цвета соответствуют теме сайта.
• Красиво и плавно: анимации, размытие, прозрачность - выглядит вкусно.
• Глобально доступно: вызывай из любого скрипта, хоть из checkout, хоть из формы отзыва.
• Легко кастомизировать: один файл, несколько строк CSS - меняй позицию, время, анимацию как хочешь

Всё из коробки. Поставил сборку - и уведомления уже не позорят сайт, а выглядят как у людей. Добавил товар - success, ошибка валидации - danger, всё красиво, всё плавно, всё без гемора.

Чекни в common.js если понял о чём я 😉