Меню
Обсудить сайт

Проверка при заказе товара

Расскажу о задаче, которая возникла на рабочем проекте. Не буду вставлять участки кода, вам это будет вряд ли интересно.

Ближе к делу

В детальной карточке товара, в некоторых товарах присутствует возможность выбрать цвет и размер товара. Размеры появляются только тогда, когда выбран цвет, они подбираются из базы данных в зависимости от цвета.

Проверка при заказе товара 1

Изначально, у меня была проверка на выбранный цвет и размер. Без этого нельзя было купить товар. При нажатии на купить без выбранного размера или цвета, показывалось сообщение «Выберите цвет или размер».

Товары разные, в некоторых были только цвета, в других были только размеры. Формулировка «Выберите цвет или размер» не очень-то подходила.

На тот момент я сделал так, потому что были задачи важнее, я запомнил недочет и собирался вернуться и все поправить.

Уведомление об отсутствии товара на складе.

От заказчика поступила задача, при увеличении количества товара, если такого количества нет, показывать пользователю уведомление об этом.

Проверка при заказе товара 2
Поле для ввода количества

Мои коллеги вывели для меня на странице оставшееся количество товара, которое я смог использовать и показывать уведомление.

Проверка при заказе товара 3
Показ уведомления при отсутствии товара на складе

Проверка на цвет и размер

Первая задача решена. Но осталось недоработка с подсказками для цвета и размера.

Дело в том, что помимо подсказки отдельно про цвет и размер, нужно было запретить пользователю выбирать количество, если не выбран цвет или размер. Иначе как я буду проверять остаток на складе?

Проверка при заказе товара 4
Сделал блок с количество полупрозначным и неактивным

Итак, я отключил возможность увеличивать или уменьшать количество товара. Вместо этого я подсказываю пользователю, что ему нужно делать, чтобы выбрать количество и купить товар.

Цвет не выбран, нажали на количество или кнопку «Купить» — уведомление «Выберите цвет».

Проверка при заказе товара 5

Цвет выбран, нажали на количество или кнопку «Купить» — уведомление «Выберите размер».

Проверка при заказе товара 6

Иногда запросы в базу данные на размер бывают долгими, и цвета не появляются по 5 секунд. Что пользователь подумает об этом? — «Сайт не работает». Не порядок.

Я сделал еще одну проверку и если размеры еще не загрузились, показываю уведомление о том, что размеры загружаются, подождите немного.

Супер! Теперь пользователь будет знать что сайт работает, а сайт ищет в базе данных размеры по этому цвету.

Проверка при заказе товара 7

Если же все поля были выбраны верно, то есть и цвет и размер — товар успешно попадает в корзину.

Проверка при заказе товара 8
Поделиться
Отправить

Комментарии