19.4 Раздел “Сделки”
Состоит из:
19.4.1 Блок фильтрации -
Сортировка (“Сначала новые”, “Сначала старые”);
-
Поиск (по ключевым словам);
-
Фильтрация: товары, услуги.
19.4.2 Карточка сделки
состоит из:
-
Шапка: номер заказа, дата заказа, ссылка “Поставщик”, при клике переход на магазин поставщика;
-
Блок товара: фото; название; цена за единицу/к-во;
-
Способ доставки;
-
Общая стоимость;
-
Статус (Новый, Подтвержден, Завершен). В зависимости от статуса отображаются следующие кнопки:
Статус “Новый” - кнопка “Подтвердить”, при нажатии переход на страницу “Оформление заказа” (Шаг 2);
Статус “Подтвержден” - кнопка “Завершить, при нажатии переход на страницу “Оформление заказа” (Шаг 3);
Статус “Завершен” - кнопка “Удалить”, при нажатии карточка сделки удаляется;
-
Кнопка “Изменить детали”, при нажатии - переход на оформление заказа (Шаг 1);
-
Ссылка “Отклонить”, при клике сделка отменяется;
19.5 Страница “Оформления заказа”
Состоит из трех разделов (шагов оформления заказа): “Детали заказа”, “Подтверждение заказа”, “Завершение сделки”.
19.5.1 Шаг 1. Детали заказа
Состоит из:
-
Блок “Основная информация”
-
Название товара;
-
Описание товара;
-
Инпут “Цена за единицу”;
-
Инпут “Количество”;
-
Селект “Единицы измерения”
-
“Сумма” (числовое значение, валюта);
-
Блок “Метод доставки” состоит из радио кнопок выбора метода: Доставка морем, Воздушная перевозка, Экспресс доставка.
В зависимости от выбранного метода доставки, под блоком отображается следующие:
Доставка морем:
-
текстовое разъяснение - “Покупатель или агент покупателя несет ответственности за таможенное оформление. Длинное время доставки”;
-
селект выбора “Условия доставки” (под селектом - текстовое разъяснение );
-
блок указания порта назначения (селект выбора страны, селект выбора порта);
-
инпут ввода крайнего срока доставки, при клике - мини календарь выбора даты, при клике на дату она отображается в инпуте, а календарь закрывается;
-
Текстовое поле “Комментарии к доставке”;
-
Блок “Прикрепить файл”: кнопка “Загрузить” при нажатии - окно браузера для загрузки файлов; текстовое разъяснение;
Воздушная перевозка:
-
текстовое разъяснение - “Покупатель или агент покупателя несет ответственности за таможенное оформление. Быстрее чем перевозка морем”;
-
селект выбора “Условия доставки” (под селектом - текстовое разъяснение );
-
блок указания аэропорта назначения (селект выбора страны, селект выбора аэропорта);
-
инпут ввода крайнего срока доставки, при клике - мини календарь выбора даты, при клике на дату она отображается в инпуте, а календарь закрывается;
-
Текстовое поле “Комментарии к доставке”;
-
Блок “Прикрепить файл”: кнопка “Загрузить” при нажатии - окно браузера для загрузки файлов; текстовое разъяснение;
Экспресс доставка:
-
текстовое разъяснение - “Идеально подходит для небольших заказов и доставки от двери до двери (например, DHL, FedEx, UPS, TNT)”;
-
селект выбора “Компании доставки”;
-
инпут ввода стоимости доставки (под инпутом - текстовое разъяснение );
-
инпут ввода крайнего срока доставки, при клике - мини календарь выбора даты, при клике на дату она отображается в инпуте, а календарь закрывается;
-
Текстовое поле “Комментарии к доставке”;
-
Блок “Прикрепить файл”: кнопка “Загрузить” при нажатии - окно браузера для загрузки файлов; текстовое разъяснение.
Железнодорожная перевозка:
-
текстовое разъяснение - “Быстрее чем перевозка морем”;
-
селект выбора “Условия доставки” (под селектом - текстовое разъяснение );
-
блок указания станции назначения (селект выбора страны, селект выбора станции);
-
инпут ввода крайнего срока доставки, при клике - мини календарь выбора даты, при клике на дату она отображается в инпуте, а календарь закрывается;
-
Текстовое поле “Комментарии к доставке”;
-
Блок “Прикрепить файл”: кнопка “Загрузить” при нажатии - окно браузера для загрузки файлов; текстовое разъяснение;
Автотранспортная перевозка:
-
текстовое разъяснение - “Быстрее чем перевозка морем”;
-
селект выбора “Условия доставки” (под селектом - текстовое разъяснение );
-
блок указания города назначения (селект выбора страны, селект выбора города, улицы дома);
-
инпут ввода крайнего срока доставки, при клике - мини календарь выбора даты, при клике на дату она отображается в инпуте, а календарь закрывается;
-
Текстовое поле “Комментарии к доставке”;
-
Блок “Прикрепить файл”: кнопка “Загрузить” при нажатии - окно браузера для загрузки файлов; текстовое разъяснение;
-
Блок “Информация о поставщике”
-
Название поставщика;
-
Контактное лицо поставщика;
-
Город/Штат, Страна;
-
Адрес;
-
Е-мейл;
-
Телефон;
-
Кнопка “Далее”, при нажатии - переход на следующий шаг “Подтверждение заказа”;
-
Кнопка “Сохранить”, при нажатии - вся введенная информация сохраняется в разделе “Сделка”, переход на страницу “Сделки”;
-
Ссылка “Отменить”, при клике переход в раздел “Сделки” (информация не сохраняется).
19.5.2 Шаг 2. Подтверждение заказа
Состоит из:
-
Блок “Основная информация”
-
“Название”;
-
“Цена за единицу”;
-
“Количество”;
-
“Единицы измерения”
-
“Сумма”;
-
“Описание”.
-
Блок “Доставка” (поля отображаются в зависимости от выбранного метода доставки):
-
“Метод доставки”;
-
“Условия доставки”/ “Компания доставки”, “Стоимость доставки”/ блок выбора“Аэропорт”, блок выбора ”Порт назначения”;
-
“Крайние сроки доставки”;
-
“Комментарии”;
-
Прикрепленные файлы.
-
Блок “Информация о поставщике”:
-
Название поставщика;
-
Контактное лицо поставщика;
-
Город/Штат, Страна;
-
Адрес;
-
Е-мейл;
-
Телефон.
-
Кнопка “Подтвердить”, при нажатии - переход на следующий шаг.
-
Блок “Связаться с поставщиком”. Состоит из:
-
блока отправки сообщения: аватар отправителя, имя фамилия адресата, поле для ввода текста, кнопка “Отправить”, кнопка-иконка “Прикрепить” открывает окно браузера для прикрепления файлов, названия прикрепленных файлов отображаются справа от данной кнопки;
-
блок сообщения (адресата, адресанта) - аватар, имя фамилия, дата отправки сообщения, текст сообщения (одна строка).
В блоке отображается не больше 3-ох сообщений (присутствует скроллинг).
19.5.3 Шаг 3. Завершение сделки
Состоит из тех же блоков, что в предыдущем шаге (Шаг 2), за исключением блока “Связаться с поставщиком” (отсутствует), а вместо кнопки “Подтвердить” - кнопка “Завершить”.
Поделитесь с Вашими друзьями: |