В этой статье будет немного критики, немного советов, немного исходников и много размышлений о вечном: “Зачем разработчики сделали так?”
И так. Все видели свеженький 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; } |
Теперь обновляем страницу с товаром/товарами и нажимаем кнопку “Купить”. У нас выезжает уведомление сверху и при этом не смешает экран. Профит!