В этой статье будет немного критики, немного советов, немного исходников и много размышлений о вечном: «Зачем разработчики сделали так?»
И так. Все видели свеженький opencart 2.0. Мне очень хотелось, чтобы там было адекватное уведомление о том, что товар положили в корзину, но этого так и не случилось. Мне кажется, что минусы подобного уведомления очевидны, но я все же их перечислю:
- Мне, как клиенту, это очень неприятно, т.к. я не люблю когда кто-то двигает экраном против моей воли.
- Возможно клиент хотел еще что-то посмотреть, но съехавший экран как бы намекает — бери товар и проваливай
- Клиент мог читать описание товара или характеристики в то время, когда нажал на кнопку. И как Вы думаете? Он пойдет искать то место, на котором остановился или пойдет искать то, место которое не двигает его экран вверх.
И вот я, как и многие другие, жалуюсь на это и ничего не предпринимаю — подумаете Вы. А вот и нет. Я переделал этот механизм так, как мне удобно и делюсь им со всеми. Кто знает… может в следующей версии мой код добавят.
Первое, что нам надо сделать — это поправить файл /catalog/view/javascript/common.js
Заменим в нем строки:
|
1 2 3 4 5 |
$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>'); на: $('#content').parent().before('<div class="alertwraper"><div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div></div>'); |
|
1 2 3 4 5 |
$('#content').parent().before('<div class="alert alert-info"><i class="fa fa-info-circle"></i> ' + json['info'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>'); на: $('#content').parent().before('<div class="alertwraper"><div class="alert alert-info"><i class="fa fa-info-circle"></i> ' + json['info'] + '<button type="button" class="close" data-dismiss="alert">×</button></div></div>'); |
|
1 2 3 4 5 |
$('html, body').animate({ scrollTop: 0 }, 'slow'); на: $('.alertwraper').animate({ top: 0 }); |
|
1 2 3 4 5 |
$('.alert').remove(); на: $('.alertwraper').remove(); |
Заметьте в этом файле несколько одинаковых строк. Заменить нужно все!
Далее правим стили. Тут все просто. Добавляем в конец файла со стилями (/catalog/view/theme/default/stylesheet/stylesheet.css) следующий текст:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.alertwraper { position: fixed; top: -50px; width: 100%; z-index: 10; left: 0; text-align: center; } .alert { display:inline-block; } |
Теперь обновляем страницу с товаром/товарами и нажимаем кнопку «Купить». У нас выезжает уведомление сверху и при этом не смешает экран. Профит!
7 комментариев
[…] Ранее я уже писал о том как можно усовершенствовать уведомление добавления товара в корзину. Теперь я написал модификатор, чтобы упростить эту процедуру. Качаем модификатор addtocart.ocmod и устанавливаем. Должно получиться как здесь […]
ну подскажите кто знает, получается надо когда человек выбирает продолжить или в корзину, чтоб если выбрал продолжить страница обновилась
Огромное спасибо! Все получилось! Юзабилити превыше всего!
Добрый день! Все работает отлично! Спасибо за решение!
У меня такой вопрос: хотел бы оформить данное решение в виде OCMOD модификации, только вот те же самые действия, записанные в модификатор, не производят никакого эффекта. Помогите пожалуйста с таким решением.
Так там скрипты надо править, а на скрипты модификаторы не распространяются.
Понятно, спасибо.
Спасибо, секономили много времени. Делал для openCart 3 — тожи подходит(классы немнога другие уже), поиск покороче нада вбивать до класса alert и всё норм работает.