Розробка кошика покупок у мобільному додатку
Кошик, який втрачає товари при закритті додатку або показує застарілу ціну — джерело прямих втрат конверсії, у 90% випадків через відсутність серверної синхронізації. Штатна схема зберігання на клієнті без бекапу призводить до розбіжності даних між пристроями. Наш досвід — більше 40 інтеграцій в e-commerce проєктах — гарантує стабільну роботу навіть у складних сценаріях. Замовте розробку кошика — ми оцінимо ваш проєкт за один день.
Де все йде не так
Синхронізація локального та серверного стану
Найпоширеніша помилка — зберігати кошик лише на клієнті. Користувач додав товар з одного пристрою, відкрив додаток на іншому — кошик порожній. Правильна схема: оптимістичне оновлення UI + асинхронна синхронізація з сервером. У React Native з Redux Toolkit — createAsyncThunk для кожної операції (add, remove, updateQuantity), extraReducers з pending/fulfilled/rejected. При помилці мережі — rollback до попереднього стану через immer. Серверна синхронізація кошика підвищує конверсію в 1,5 раза порівняно з чисто локальним зберіганням — користувачі йдуть при розбіжності даних.
Застарілі ціни та наявність
Користувач додав товар три дні тому, ціна змінилася. При відкритті кошика робимо запит на валідацію з поточними даними — сервер повертає актуальні ціни та статус наявності. Товари, яких немає в наявності, виділяємо візуально та блокуємо чекаут. Це знижує кількість покинутих кошиків на 15–20%. При значному місячному обороті втрата одного кошика через помилку синхронізації може коштувати значну суму.
Свайп для видалення
SwipeRow у React Native або ReorderableList часто конфліктують з вертикальним скролом. На Android через Compose — SwipeToDismiss з Material 3 працює стабільніше. На iOS — UISwipeActionsConfiguration в нативі, у Flutter — Dismissible віджет. Скрізь потрібен haptic feedback при досягненні порогу свайпу — UIImpactFeedbackGenerator.impactOccurred() / HapticFeedback.mediumImpact(). SwiftUI з Combine показує в 1,5 раза більш плавну анімацію оновлення кількості порівняно з UIKit.
Кошик покупок: особливості реалізації на iOS та Android
Платформені нюанси: на iOS критична підтримка Universal Links для повернення в кошик з чекауту, на Android — deep linking з перевіркою App Links. Для in-app purchase використовуємо StoreKit 2 (iOS) та Billing 6 (Android) з серверною верифікацією покупок. У кросс-платформених проєктах вибір стеку впливає на швидкість розробки та продуктивність.
| Платформа | Рекомендований стек | Складність синхронізації | Час на реалізацію (база) |
|---|---|---|---|
| iOS | SwiftUI + Combine | Середня | 2–3 дні |
| Android | Jetpack Compose + Coroutines | Середня | 2–3 дні |
| React Native | Redux Toolkit + AsyncStorage | Низька | 1–2 дні |
| Flutter | BLoC + HydratedBloc | Низька | 1–2 дні |
Архітектура кошика
CartItem { productId: string variantId: string // розмір, колір quantity: number priceSnapshot: number // ціна на момент додавання currentPrice: number // актуальна ціна з сервера } variantId — обов'язкове поле, яке часто забувають. Один і той самий товар у двох розмірах — це два різних CartItem. Без цього перерахунок суми ламається при змішаних варіантах.
Персистентність: AsyncStorage + серіалізація JSON у RN, Room database в Android, CoreData або UserDefaults для невеликих кошиків на iOS. При наступному запуску відновлюємо локальний стан негайно, потім робимо фонову синхронізацію з сервером.
З практики: типова проблема Flutter + BLoC
Кошик "забував" товари при force-close. Причина — `HydratedBloc` не був ініціалізований до першого звернення до storage. Перенесли ініціалізацію `HydratedStorage` у `main()` до `runApp()` — проблема зникла.Як уникнути втрати кошика при офлайн-режимі?
Головне правило — ніколи не показувати користувачу порожній екран при відсутності мережі. Локальне сховище має бути первинним джерелом даних. Фонова синхронізація запускається лише при наявності з'єднання, з конфлікт-резолюцією на стороні сервера (last-write-wins або мерж по timestamp). У таблиці нижче — типові офлайн-сценарії та їх рішення.
| Сценарій | Проблема | Рішення |
|---|---|---|
| Користувач додав товар в офлайн | Товар не синхронізовано | Queue операція, виконати при появі мережі |
| Ціна змінилася в офлайн | Користувач бачить стару ціну | При онлайні запросити актуальні ціни, оновити UI |
| Товар закінчився в офлайн | Покупка неможлива | При онлайні позначити як недоступний, запропонувати аналоги |
| Конфлікт при синхронізації з сервера | Різні версії кошика | Сервер вирішує за timestamp, клієнт застосовує патч |
Чому важлива серверна валідація при чекауті?
Перерахунок підсумкової суми лише на сервері — критично. Клієнтський розрахунок може розходитися через застарілі ціни, невалідні промокоди або приховані знижки. Ми показуємо попередню суму, а фінальний розрахунок робимо при переході до оплати. Це запобігає розбіжностям та поверненням. Без серверної валідації втрати конверсії сягають 10–15%.
Порівняння підходів до зберігання: локальний vs серверний
| Параметр | Тільки локально | З серверною синхронізацією |
|---|---|---|
| Швидкість відгуку | Миттєво | Залежить від мережі |
| Надійність | Втрачає дані при видаленні додатку | Дані відновлюються |
| Багатокористувацький доступ | Ні | Повна підтримка |
| Конфлікти | Не виникають | Потрібна резолюція |
| Витрати на реалізацію | Низькі | Вище на 30–40% |
Що входить в роботу
- Список товарів у кошику із зображенням, назвою, варіантом, ціною
- Зміна кількості (інпут або +/– кнопки) з валідацією min/max
- Свайп для видалення з undo через snackbar (5 секунд)
- Підсумкова сума з розбивкою (товари, доставка, знижка)
- Поле для промокоду з валідацією
- Порожній стан кошика з CTA
- Синхронізація з сервером + обробка offline
- Перейти до оформлення замовлення з валідацією наявності товарів
Строки
Базова реалізація — 2–3 робочих дні. Якщо потрібна синхронізація між пристроями, інтеграція з програмою лояльності або складна логіка знижок — 3–5 днів. Вартість розраховується індивідуально. Зв'яжіться з нами для оцінки вашого проєкту — ми підготуємо пропозицію за 24 години.
Цей підхід гарантує конверсію та стабільність. Економія від скорочення покинутих кошиків може бути значною для середнього e-commerce проєкту. Отримайте консультацію — ми допоможемо підібрати оптимальне рішення для вашого бізнесу.