нажал плюс — и страница прыгнула наверх) количество и сумма должны обновляться на месте
Каталог, карточка и корзина
В действующем магазине количество стояло в трёх местах. В каталоге. На карточке товара. В корзине. Задача была одна. Нажал плюс или минус — число и сумма меняются здесь же. Страница не собирается заново и не уезжает к шапке.
Так ведёт себя полная перезагрузка. Кнопка сработала. Браузер открыл адрес снова. Экран прыгнул наверх. Сумма моргнула и вернулась уже на новом месте. На компьютере это злит. На телефоне, в короткой корзине перед заказом, человек теряет строку, которую только что правил.
Заказчик прислал задачу на правки существующего магазина. Каталог, карточка и компактная корзина. На компьютере и на телефоне. Количество и сумма должны меняться без перезагрузки.
Про корзину, где на телефоне кнопки мешали друг другу, у меня отдельный разбор. Про сумму на печати, которая должна сходиться с корзиной, тоже. Здесь другое. Три места и обновление на месте.
Покупателю всё равно, как устроен запрос. Он видит плюс. Жмёт. Штук стало на одну больше. Сумма рядом выросла на цену этой штуки. Строка осталась под пальцем. Если вместо этого магазин моргнул и уехал наверх, плюс для него сломан. Даже если в итоге число где-то поменялось.
Сначала копии, потом старая вёрстка
На живом магазине я не кладу новую кнопку поверх старой сразу. Сначала резервные копии. Потом разбираю старую вёрстку.
Смотрю сетку каталога. Блок количества на карточке. Колонки корзины. Где рисуется число. Куда садится сумма строки и общий итог. Старая вёрстка часто держит и вид, и пересчёт сразу. Уберёшь кнопку — поедет колонка. Поэтому сначала читаю, как оно собрано. Потом меняю.
Копии снимаю до правок. Если промежуточный шаг заденет оформление заказа, магазин можно вернуть к тому, что уже работало. Кнопки трогаю уже после копий. Не вместо них.
На чужом магазине я продолжаю его логику. Новая кнопка должна сесть в ту же сетку, а не жить отдельным куском сбоку. Иначе количество в каталоге считается одним способом, а в корзине другим. Владелец это видит на своей же покупке.
Колонки корзины разбираю отдельно. Название товара, цена, плюс, минус, сумма строки, общий итог. Компактная корзина на телефоне и так короткая. Лишний столбец отжимает название. Кнопки садятся на буквы. Это смотрю до того, как красить плюс в новый цвет.
Плюс, минус и сумма на месте
Кнопки количества поставил в каталог, на карточку и в корзину.
Плюс в каталоге меняет число у этого товара. Список остаётся на том же ряду. Не открывается заново с первого места. Человек листает каталог и накидывает количество, не теряя, где он был.
Плюс на карточке меняет число рядом с ценой. Человек остаётся у кнопки. Его не выбрасывает к началу описания. Цена этой строки и количество читаются вместе. Не на разных концах страницы.
В корзине плюс и минус меняют строку. Сумма строки и общая сумма обновляются тут же. Компактная корзина на широком экране и на телефоне. Колонки собрал так, чтобы у названия было место, а кнопки не сидели на буквах названия.
Удаление идёт вместе с плюсом и минусом. Убрал товар — строка ушла, итог пересчитался. В корзине не остаётся пустой дырки и старой цены. Последний товар убрали — корзина пустая. Старый итог на экране не висит.
Минус не прячу в меню. Он рядом с плюсом. Человек ошибся на одну штуку и поправил тут же. Не через перезагрузку и не через удаление всей строки, если товар ему всё ещё нужен.
Быстрые клики, экраны и обрыв связи
Одного аккуратного клика мало. Перед выпуском жму плюс несколько раз подряд. Палец на телефоне часто быстрее, чем ответ экрана. Два быстрых плюса должны дать плюс два. Сумма должна сойтись с числом. Не плюс один и кружок, который больше не крутится.
Дальше удаление. Убрал одну позицию из нескольких. Остальные на месте. Итог без удалённой строки. Убрал последнюю. Корзина пустая, старого итога на экране нет.
Потом связь. Запрос не дошёл. Человек жмёт ещё раз. После ошибки соединения магазин должен ожить. На экране честное число. Не вечный кружок и не тихий лишний товар, которого человек не просил.
Экраны разные. Узкий телефон и широкий монитор. Одна и та же корзина на обоих должна оставаться компактной. Кнопка, которая на компьютере стоит в своей колонке, на телефоне не уезжает под название.
Первый выпуск прошёл 29 автоматических проверок. Потом обновление вышло на сайт. Замечания после выпуска закрывал точечными правками. На работу ушло 3 рабочих дня. Заказ закрыт. В магазине количество и сумма меняются без перезагрузки страницы.
Проверял я не главную. Путь от товара до корзины. Каталог, карточка, плюс, минус, удаление, итог. На компьютере и с телефона в руке. Главная может быть красивой. Заказ спотыкается позже. На плюсе.
Проверьте у себя
Откройте свой магазин. Пройдите три места сами. С компьютера и с телефона в руке.
- Плюс в каталоге меняет число. Список не прыгает к шапке.
- Плюс на карточке меняет число рядом с ценой. Вы остаётесь у кнопки.
- Плюс в корзине меняет количество, сумму строки и общий итог.
- Минус уменьшает число и тут же уменьшает итог.
- Удаление позиции убирает строку. Итог пересчитан. Старой цены нет.
- Три быстрых плюса дают плюс три. Сумма сходится с числом.
- После обрыва связи повторное нажатие не зависает и не добавляет лишнее молча.
- На телефоне кнопки не закрывают название. Корзина читается без горизонтальной каши.
- На широком экране те же действия. Итог тот же.
Если плюс обновляет число только после новой загрузки страницы, это ещё старое поведение. Его меняют раньше нового дизайна карточки.
Частые вопросы
Весь магазин надо переписывать?
Нет. Здесь был действующий магазин. Я обновлял каталог, карточку и корзину. Кнопки количества, колонки и пересчёт суммы. Сначала копии и разбор старой вёрстки. Потом выпуск. Новый магазин с нуля для этой задачи не нужен.
Плюс в каталоге и плюс в корзине — одна и та же кнопка?
Нет. Места три. Смысл один. Клик прибавляет одну штуку. Сумма догоняет число. Страница остаётся там, где была. Каталог может уже обновляться на месте, а корзина всё ещё грузит адрес заново. Путь до заказа тогда рвётся в конце. Проверяйте все три места.
Сумма отстала от числа. Куда смотреть?
Сначала быстрые клики. Два-три плюса без паузы. Потом минус. Потом удаление строки. Где число и итог разъехались, там дыра. То же повторите с телефона. Узкая корзина часто живёт своим куском вёрстки. На компьютере уже сходится, на телефоне ещё нет.
После обрыва сети на экране старое число. Чинить?
Да. Восстановление после ошибки соединения я проверяю отдельно. Клик не дошёл — человек жмёт ещё раз и видит то число, которое реально в корзине. Не кружок без конца и не второй товар без спроса. Если после обрыва на экране одно, а в итоге другое, это чинится до рекламы. Иначе вы платите за визит, который спотыкается на плюсе.
Если хотите, чтобы я посмотрел ваш случай, посмотрите услуги и цены.