Technell
Действующий магазин деревянных моделей кораблей
Магазин помогает сравнить модели по характеристикам и инструкциям, выбрать доставку, оплатить заказ через Т-Банк и открыть его в личном кабинете.
Nuxt · Vue · TypeScript · Pinia · Directus
- Вклад
- Модернизация витрины, личного кабинета и сценария заказа и оплаты для ООО «Технэл».
Задача
Покупателю нужны точные характеристики модели. Магазину важно сохранить заказ при переходе в Т-Банк и обратно, а затем получить подтверждённый статус оплаты с сервера.
Как проходит покупка
Сравнить и изучить модель
В категории можно сравнить модели, а в карточке — проверить масштаб, размеры, фотографии, инструкцию и цену.
Оформить заказ
Изменить количество, выбрать доставку, проверить итог и отдельно подтвердить правила продажи и обработку персональных данных.
Войти по коду и создать заказ
Получить код по почте, вернуться к оформлению и сохранить заказ в своём кабинете. Повторная отправка не создаёт второй заказ.
Подтвердить оплату и открыть заказ
Возврат из Т-Банка ведёт обратно в магазин, но статус оплаты сайт получает с сервера. В кабинете видны оплата или возврат; повторить платёж можно только в разрешённом состоянии.
От выбора модели до заказа в личном кабинете
Каталог, карточка товара, корзина и оформление сняты с действующей витрины. Личный кабинет и оплата показаны на реальных страницах с контрольными данными — без создания пользователя, заказа или платежа.
Каталог моделей кораблей
В категории можно сравнить типы моделей, масштаб и фотографии, а затем открыть подходящий товар.
Характеристики до покупки
В карточке вместе видны фотографии, размеры, масштаб, инструкция, цена и кнопка покупки.
Доставка на мобильном экране
В мобильной корзине на одном экране остаются количество, два способа доставки, скидка, итог и кнопка оформления.
Правила и согласия при оформлении
Реальная страница с контрольными данными: доставка, получатель, правила продажи и обработка персональных данных видны до входа. Пользователь и заказ не создавались.
Заказы в личном кабинете
Реальная страница с контрольными данными: видны номер заказа, статус оплаты, итог и ссылка на подробности. Пользователь и заказ не создавались.
Заказ и оплата на одной странице
Реальная страница с контрольными данными: вместе видны товар, доставка, итог, статус заказа, дата и номер платежа. Заказ и платёж не создавались.
После оплаты — обратно к заказу
Реальная страница с контрольными данными: показан пример статуса, подтверждённого сервером, и ссылка на заказ. Т-Банк не вызывался.
Как проходит заказ и где хранятся данные
Первая схема показывает путь покупателя. Вторая — как корзина, заказ и статус оплаты проходят между браузером, сервером сайта, банком и базой данных.
Путь покупателя
Заказ сохраняется до перехода в Т-Банк. После возвращения сервер проверяет оплату, а личный кабинет открывает сохранённый заказ.
Шесть шагов: изучить модель, проверить доставку и согласия, войти по коду из письма и создать заказ, перейти в Т-Банк, проверить оплату на сервере и открыть сохранённый заказ в личном кабинете.
Где хранятся данные
Корзина остаётся в браузере, пока покупатель её меняет. Сервер проверяет заказ и оплату перед записью в базу данных.
Браузер хранит корзину и поля оформления. Сервер сайта проверяет код входа, присланный по почте, пересчитывает заказ и начинает оплату. Т-Банк проводит платёж и возвращает его статус серверу. Directus и PostgreSQL хранят покупателей, заказы и платежи.
Что было сделано
Сохранять один проверенный заказ
Перед сохранением сервер заново проверяет состав и цену. Если браузер повторно отправляет тот же запрос, сервер возвращает уже созданный заказ, а не создаёт дубликат.
Проверять оплату на сервере
Возврат из Т-Банка открывает нужный заказ, но не помечает его оплаченным. Успех, обработка, ошибка или возврат показываются только после проверки на сервере.
Подготовить правила до запуска оплаты
Правила продажи, согласие на обработку данных и политика опубликованы как отдельные датированные страницы. При оформлении ссылки на них стоят рядом с двумя обязательными подтверждениями: условия покупки и обработка данных не скрыты в одной кнопке.
Реализовать заказ без готового движка магазина
Technell не использует готовую платформу интернет-магазина или платёжный модуль. Собственный сервер рассчитывает заказ, связывает его с покупателем, защищает от дубликатов и обменивается запросами и статусами с Т-Банком.
Развёртывать витрину и службу данных отдельно
Для витрины и службы данных собираются отдельные контейнеры. Автоматизация обновляет только изменённую часть, выполняет изменения данных в нужном порядке и ждёт проверки работоспособности; переключение трафика подтверждается вручную.
MajmarКальянная на Дубай-Крик с залом, террасой и кабаной