[Решено] Изменить jGrowl-уведомления в minishop2
Доброго времени суток.
Возникла необходимость в изменении текста jGrowl-уведомлений, всплывающих при добавлении товара в корзину.
Хотел бы убрать количество в уведомлении, чтобы просто выводились сообщения о добавлении товара.
Предполагаю, что нужно где-то здесь копать, но не смог разобраться где конкретно.
Заранее благодарен.
Возникла необходимость в изменении текста jGrowl-уведомлений, всплывающих при добавлении товара в корзину.
Хотел бы убрать количество в уведомлении, чтобы просто выводились сообщения о добавлении товара.
Предполагаю, что нужно где-то здесь копать, но не смог разобраться где конкретно.
Заранее благодарен.
Комментарии: 23
Вы можете просто очистить запись (не удалять, а заменить на пустую строку) в управлении лексиконами, чтобы убрать нужное сообщение.
Управление словарями:
Пространство имен — minishop2
Тема — cart
Язык — ru
Запись — ms2_cart_change_success
Управление словарями:
Пространство имен — minishop2
Тема — cart
Язык — ru
Запись — ms2_cart_change_success
Спасибо. Поправил, где мне было нужно.
А подскажите, как это уведомление можно стилизовать?
Возможно, при помощи CSS?))
Можно как угодно менять.
Как вариант, я вообще отключаю и делаю свой вывод сообщений в модальном окне, примерно так:
1) копируем штатный скрипт из assets/components/minishop2/js/web/default.js в assets/components/minishop2/js/web/custom.js
2) переключаем в настройках системы параметр ms2_frontend_js на новый скрипт
3) переписываем метод miniShop2.Message в скрипте на свой, например как-то так:
Также можно обойтись без кастомизации метода: просто закомментить jGrowl в своём скрипте и использовать callbacks. Например в своём скрипте на фронтенде:
Как вариант, я вообще отключаю и делаю свой вывод сообщений в модальном окне, примерно так:
1) копируем штатный скрипт из assets/components/minishop2/js/web/default.js в assets/components/minishop2/js/web/custom.js
2) переключаем в настройках системы параметр ms2_frontend_js на новый скрипт
3) переписываем метод miniShop2.Message в скрипте на свой, например как-то так:
....
miniShop2.Message.show = function (message) {
if (message != '') {
$('#modalMessageContent').html(message);
$('#modalMessage').modal();
}
};
...
Всё, что касается jGrowl в этом методе нужно в этом случае закомментировать/удалить.Также можно обойтись без кастомизации метода: просто закомментить jGrowl в своём скрипте и использовать callbacks. Например в своём скрипте на фронтенде:
if (typeof(miniShop2) != 'undefined') {
miniShop2.Callbacks.Cart.add.response.success = function(response) {
if (response.success) {
console.log('cart:add');
}
}
miniShop2.Callbacks.Cart.change.response.success = function(response) {
if (response.success) {
console.log('cart:change');
}
};
miniShop2.Callbacks.Cart.remove.response.success = function(response) {
if (response.success) {
console.log('cart:remove');
}
};
}
Все данные находятся в response.
Гораздо проще и лучше просто вызвать свой скрипт после default.js от ms2 и перезаписать там объект miniShop2.Message:
В modstore.pro, например, сделано вообще вот так:
miniShop2.Message = {
success: function() {},
error: function() {},
info: function() {},
};
В modstore.pro, например, сделано вообще вот так:
miniShop2.Message = App.utils.Message;
Поэтому все уведомления от ms2 работают через общую систему уведомлений сайта.
а как вызывать свой скрипт после default.js от ms2?
$(doсument).on('ready', function() {
miniShop2.Message = {
success: function() {},
error: function() {},
info: function() {},
};
});
Я не имел в виду, что нужно прям свой файл загрузить после, хотя и так можно. Нужно просто перезаписать часть скрипта miniShop2 перед его первым использованием.
Вот мне тоже интересно. А как правильно вызвать свой скрипт, после подключения default.js?
Ну в голову конечно приходит вариант, отключить автовызов default.js в системных настройках, и последовательно подключить нужные скрипты вручную перед body.
А есть более правильный способ с автовызовом default.js?
Ну в голову конечно приходит вариант, отключить автовызов default.js в системных настройках, и последовательно подключить нужные скрипты вручную перед body.
А есть более правильный способ с автовызовом default.js?
Я пока что юзаю такую методу — переименовал default.js в custom.js, соответственно поправил системные настройки, а нужные мне функции дописываю в конце файла. Все работает. Немного непонятен совет Василия сделать отдельный скрипт. Добавить еще один запрос к серверу? ЗАЧЕМ? На случай обновления? Клиент сам обновлять плагины не будет, а я уж как-нибудь через WinMerge найду края))) Только если для случая продвинутого клиента? Таких клиентов стараюсь не заводить)))
Что такое WinMerge?
Сравнение файлов. winmerge.org
Нюанс еще и в том, что убирая эти зеленые уведомления, желательно убирать также подключение одного файла скрипта и одного файла стилей! Себе закомментил в custom.js все, что связано с зеленью — вуаля, минус два запроса к серверу!
Добрый день. Научите пожалуйста как создать собственное уведомление.
У меня есть кнопка, хочу к ней прикрепить новое уведомление, мол товара нет в наличии.
У меня есть кнопка, хочу к ней прикрепить новое уведомление, мол товара нет в наличии.
<button type="submit" name="ms2_action" id="addto-cart" class="le-button huge unavailability">[[%ms2_cart_unavailability]]</button>
Добрый день, объясните пожалуйста в теории как получается уведомление: «Товар успешно добавлен в корзину: 1»
Хочу отследить цепочку, разобраться.)
1. Я нажимаю кнопку «Добавить в корзину»
3.
?
N. Появляется уведомление «Товар успешно добавлен в корзину: 1»
Хочу отследить цепочку, разобраться.)
1. Я нажимаю кнопку «Добавить в корзину»
<button type="submit" name="ms2_action" value="cart/add" id="addto-cart" class="le-button huge">[[%ms2_frontend_add_to_cart]]</button>
2. 3.
?
N. Появляется уведомление «Товар успешно добавлен в корзину: 1»
Вот собственно о чем я и говорил: народ не знает JavaScript. Прошу любить и жаловать: одна из красот JavaScript «Monkey Patching». Этот код можно выполнить в консоли браузера, к примеру на minishop2.com
(function(miniShop2, $){
var message = miniShop2.Message.show;
miniShop2.Message.show = function() {
alert('Хе хе хе!');
}
$.extend(miniShop2.Message.show, message.prototype);
})(miniShop2, jQuery);
Пример не более чем просто показательный и не убирает проблемы подключения не нужных скриптов и т.д. Но на самом деле это достаточно просто делается, правда на выходе код будет не столь «лаконичен» :-)
P.S. Я случайно ошибку допустил, но в этом примере она никак не проявится. Хотел исправить сначала, но потом подумал, что оно и к лучшему :-) Прототипы детям не игрушка ;-Р
Николай, спасибо, в вашем примере я разобрался, попробывал в консоли, работает как Alert с текстом Хе хе хе, когда добавляю товар в корзину…
Если знаете, дайте пожалуйста ссылку на урок или статью, чтобы я смог свое личное персональное JGrowl оповещение создать… Зеленое такое… Или в гугле, что именно поискать и сделать…?
Хочу разобраться в MS2… что происходит от нажатия на кнопку «В корзину» до появления JGrowl оповещения…
Если знаете, дайте пожалуйста ссылку на урок или статью, чтобы я смог свое личное персональное JGrowl оповещение создать… Зеленое такое… Или в гугле, что именно поискать и сделать…?
Хочу разобраться в MS2… что происходит от нажатия на кнопку «В корзину» до появления JGrowl оповещения…
Вобщем интересно, как к любой кнопке привязать Jgrowl через стандартные методы MS2 или еще как либо.
Запись в словарь я добавил — ms2_cart_unavailability (Товара нет)
А дальше пока не разобрался
Запись в словарь я добавил — ms2_cart_unavailability (Товара нет)
А дальше пока не разобрался
Более прозрачный намек
(function(miniShop2, $){
var message = miniShop2.Message.show;
miniShop2.Message.show = function() {
console.log("Тут код своего JGrowl");
}
$.extend(miniShop2.Message.show.prototype, message.prototype);
})(miniShop2, jQuery);
Очень прозрачный намек) То что надо. Спасибо! Научился кое-чему… Многому!
И сорри что я тут в JS пытаюсь разобраться)
Пока не получается привязать ваш код кнопке (второй блок кода) и Jgrowl — не стандартные, черные )
Как по-хорошему добавить свой Jgrowl-текст в минишоп пока не разобрался, но в следующий раз будет легче.
И сорри что я тут в JS пытаюсь разобраться)
Пока не получается привязать ваш код кнопке (второй блок кода) и Jgrowl — не стандартные, черные )
Как по-хорошему добавить свой Jgrowl-текст в минишоп пока не разобрался, но в следующий раз будет легче.
[[!+availability:el=`0`:then=`<button onclick="(miniShop2, $)" type="submit" name="ms2_action" id="addto-cart" class="le-button huge unavailability">[[%ms2_cart_unavailability]]</button>`:else=`<button type="submit" name="ms2_action" value="cart/add" id="addto-cart" class="le-button huge">[[%ms2_frontend_add_to_cart]]</button>`]]
<script>
(function(miniShop2, $){
var message = miniShop2.Message.show;
miniShop2.Message.show = function() {
$.jGrowl("Товара нет. Спросите дату поступления у менеджера");
}
$.extend(miniShop2.Message.show.prototype, message.prototype);
})(miniShop2, jQuery);
</script>
+ Ошибки думаю мои, уверен.Uncaught TypeError: Cannot read property 'show' of undefined
Прости меня, Господи, это что за ?%:%;
onclick="(miniShop2, $)"
Для того, чтобы понять смысл подобных конструкций:(function(){...})()
Почитайте, что такое AMD в JS.
Ошибка из-за того, что все это дело нужно обернуть еще раз:
(function(miniShop2, $){
$(function(){
var message = ....
...
...
});
})(miniShop2, jQuery)
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.