- В объекте с информацией по каждому товару хранится:
- цена товара,
- действующая на него скидка,
- количество на ближнем и дальнем складах,
- даты поставок с ближнего/дальнего склада,
- прочие данные о характеристиках товара, поставщик.
- Цена по каждой товарной позиции просчитывается исходя из стоимости товара, количества, скидки на данный товар и индивидуальной скидки покупателя.
- Размер примененных скидок на товар отражен в тултипе, который открывается по нажатию на зачеркнутую полную цену товара.
- По нажатию на значок рядом с поставщиком товара открывается тултип с дополнительной информацией (в десктоп версии).
- Еще один тултип - пояснения про бесплатную обратную доставку товаров - открывается по клику.
- Изменение количества товара происходит кнопками плюс/минус или вводом с клавиатуры.
- Ввод с клавиатуры ограничен цифрами, минимальное значение 1, а максимальное - количеством товара в наличии.
- Чекбоксы позволяют выбрать товарные позиции, которые идут в итоговый заказ (пойдут в оплату).
- Количество заказываемых товарных позиций дублируется в виде счетчика на значке корзины.
- Можно раздельно свернуть перечень товарных позиций и отсутствующих товаров. Вверху по каждому указана суммарное количество позиций/товаров.
- Все поля с количеством товаров/товарных позиций адаптируют окончания слов в зависимости от количества (1 товар, 2 товара и т.д.).
- Каждый товар (в наличии или отсутствующий) может быть удален и/или добавлен в избранное.
- Количество товаров в избранном показано счетчиком на иконке избранного (в мобильной версии). Хранится как массив в объекте пользователя.
- Все выбранные чекбоксами товарные позиции группируются по датам доставки.
- Когда указанного количества товара не хватает на ближайшем складе, то добавляется вторая дата поставки с недостающим количеством с дальнего склада.
- Даты поставок по всем товаром дублируются в Итого в виде общего интервала, например, 5-6 фев или 5-8 фев (на декстоп версии).
- Два вида доставки: курьером и в пункт выдачи. По умолчанию доставка в пункт выдачи.
- Смена вида доставки влияет на цену: курьером 180 сом, а в пункт выдачи - бесплатно.
- В модальном окне можно поменять адрес доставки курьером или пункт выдачи из списка сохраненных. Каждый из вариантов можно удалить.
- Информация по пунктам выдачи хранится в отдельном массиве объектов, каждый из которых содержит рейтинг, адрес, график работы.
- В модельном окне можно изменить какую банковскую карту использовать для оплаты.
- Данные банковских карт хранятся в массиве внутри объекта пользователя.
- Галочка "списать оплату сразу" меняет кнопку Заказать на Оплатить с указанием суммы.
- Все цены проходят визуальное форматирование: пробелами разделяются разряды с шагом по 3 или 6 в зависимости от поля.
- Валидация до нажатия кнопки Заказать/Оплатить не подсвечивает пустое поле как ошибочно заполненное.
- Первая валидация происходит после снятия фокуса с поля ввода.
- live валидация включается после ошибочной первой валидации.
- Имя и фамилия допускает использование русского и английского алфавита с апострофами, дефисами и пробелами (но не два подряд, только в середине слова и т.д.).
- Телефон проходит live визуальное форматирование с разбиением пробелами и удалением всего кроме цифр. Начинается всегда с "+". Поле принимает до 30 символов, но за пределами 11 цифр - ошибка.
- ИНН допускает ввод 14 цифр, но не 14 нулей.
- Ошибка валидации вызывает соответствующее сообщение из заготовленных.
- Если js валидация у пользователя не запускается, то применяется стандартная.
- Нажатие кнопки Заказать/Оплатить подводит скрол к первому ошибочно провалидированному полю.
JavaScript, HTML, SCSS, BEM, MVC, адаптивная верстка и картинки под разную плотность пикселей. Цель применения SCSS:
- менеджмент брейкпоинтов для адаптива через функцию, позволяет проще заполнять медиа-запросы, править брейкпоинты в одном месте.
- модульная структура файлов, выделение переиспользуемых компонентов, создание удобной структуры.