@id0/ Interface Collection

Магазин морских моделей и локальный кабинет

Keel & Frame

Выберите модели, настройте корзину, создайте локальный профиль при оформлении, укажите доставку и способ оплаты, затем откройте сохранённый заказ в кабинете.

Технология
  • Nuxt
  • Vue
  • TypeScript
  • PrimeVue
  • Pinia

Задача

Количество товаров, профиль, доставка, способ оплаты, подтверждение и история должны описывать один и тот же заказ. При оформлении также важно прямо сказать, что данные остаются в этом браузере, а реальный платёж не проводится.

Как устроен сценарий

  1. Выбрать набор

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

  2. Собрать корзину

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

  3. Оформить заказ

    Если профиля ещё нет, его можно создать прямо при оформлении, не теряя корзину. На той же странице выбираются дополнительные услуги, доставка и способ оплаты.

  4. Найти заказ в кабинете

    После подтверждения в кабинете видны профиль, товары, дополнительные услуги, доставка, способ оплаты и итоговая стоимость.

Ключевые решения

  • Кабинет хранится только в браузере

    Профиль, корзина и заказы записываются вместе, остаются после перезагрузки и удаляются явным сбросом. Между устройствами эти данные не синхронизируются.

Сложные состояния

  • Ограничения указаны рядом с оформлением

    Именно в момент заказа интерфейс сообщает, что данные хранятся в браузере, а реальный платёж не проводится.

  • Понятное подтверждение удаления

    Перед удалением профиля и заказов открывается модальное окно с кнопками отмены и подтверждения. Оно работает с клавиатуры и возвращает фокус после закрытия.