Розробка інтерфейсу каталогу на Next.js в Одесі

Поки позицій сто, каталог працює будь-як. На кількох тисячах усе вирішує інтерфейс: чи можна звузити вибірку кількома клацаннями, чи зрозуміло, що зараз відфільтровано, і чи можна надіслати колезі посилання саме на цей набір.

Стек
Next.js, React
Фокус
Інтерфейс вибірки
Обсяг
Тисячі позицій
Схема фронтенд-архітектури: компоненти, рендеринг, API-інтеграції та збірка для продакшенуКОМПОНЕНТИРЕНДЕРИНГAPICMSBUILDTYPESCRIPT · ІНТЕГРАЦІЇ · PERFORMANCE

Коли каталог
стає складним

  • Багато позицій

    Гортати список уже неможливо.

  • Багато ознак

    Розмір, тип, сумісність, наявність.

  • Технічний добір

    Клієнт шукає за параметрами.

  • Посилання на вибірку

    Добірку треба переслати.

З чого складається
робота з вибіркою

Спершу описуються ознаки товару, і лише потім із них будуються фільтри.

  • Ознаки

    За чим справді фільтрують, а що зайве.

  • Типи фільтрів

    Перемикач, діапазон, пошук, список.

  • Стан у адресі

    Вибірка відображається в посиланні.

  • Порожній результат

    Що показати, коли нічого не знайдено.

  • Порядок видачі

    Правила сортування за замовчуванням.

Що працює
в готовому каталозі

  • Фільтри без перезавантаження

    Список оновлюється на місці.

  • Видимий стан

    Обрані умови показані й знімаються.

  • Довантаження

    Позиції додаються порціями.

  • Збережені вибірки

    Адреса відкриває той самий набір.

Питання про
каталог на Next.js

  • Чи це те саме, що інтернет-магазин?

    Ні. Тут ідеться про інтерфейс перегляду й добору позицій. Кошик, оформлення й оплата — окрема задача, і вона може як бути частиною проєкту, так і не бути потрібною зовсім.

  • Звідки каталог бере позиції?

    З того джерела, яке вже веде компанія: облікової системи, бази або системи керування контентом. Ручне дублювання позицій на сайті ми намагаємось прибрати, а не закріпити.

  • Чи витримає інтерфейс тисячі позицій?

    Для цього список і показують порціями, а фільтрацію виконують на сервері, а не в браузері. Конкретну поведінку перевіряємо на реальному обсязі даних до запуску, а не на десятку тестових карток.

  • Чи потраплять сторінки фільтрів у пошук?

    Частина може, якщо вибірка має самостійний сенс і відкривається за власною адресою. Які саме комбінації відкривати для індексації — окреме рішення, і воно ухвалюється разом зі структурою каталогу.

Розберемо структуру вашого каталогу в Одесі

Надішліть перелік ознак, за якими шукають клієнти, — з них і будується інтерфейс добору.