Оптимізація сторінки кошика для зниження покинутих кошиків

Уявіть: ваш інтернет-магазин втрачає до 70% кошиків. Половина цих втрат — технічні та UX-проблеми, які вирішуються на рівні розробки. Наприклад, магазин електроніки із середнім чеком 8000 руб. після впровадження калькулятора доставки та abandoned cart листів знизив показник з 75% до 52%, отримавши додатково 400 000 руб. виручки на місяць. За даними Baymard Institute, середній показник покинутих кошиків — 70.19%. Основна причина — неочікувані витрати. Наш підхід — прибрати кожну перешкоду на шляху до покупки: приховані вартості, відсутність збереження кошика, складний checkout. За більш ніж 5 років досвіду ми оптимізували кошики 50+ e-commerce проєктів, досягаючи зниження покинутих кошиків на 20–40%.

Основні причини покинутих кошиків і роль доставки

Перший пункт — найважливіший. Приховані вартості доставки — головний вбивця конверсії.

Чому вартість доставки критична?

Доставка має розраховуватися прямо в кошику, до переходу на checkout. Віджет «Розрахувати доставку» з полем міста/індексу:

const ShippingCalculator: React.FC<{ cartTotal: number }> = ({ cartTotal }) => { const [zip, setZip] = useState(''); const [rates, setRates] = useState<ShippingRate[]>([]); const calculate = async () => { const result = await api.post('/shipping/rates', { zip, items: cartItems, total: cartTotal, }); setRates(result.data); }; return ( <div className="shipping-calculator"> <input placeholder="Введіть індекс або місто" value={zip} onChange={e => setZip(e.target.value)} onBlur={calculate} /> {rates.map(rate => ( <ShippingOption key={rate.id} rate={rate} /> ))} {cartTotal >= FREE_SHIPPING_THRESHOLD && ( <FreeShippingBadge /> )} </div> ); }; 

Безкоштовна доставка при сумі X — потужний стимул докупити. Прогрес-бар до порогу:

const threshold = 5000; // рублів const remaining = threshold - cartTotal; <div className="free-shipping-progress"> <progress value={cartTotal} max={threshold} /> {remaining > 0 ? <span>До безкоштовної доставки залишилося {remaining} ₽</span> : <span>Безкоштовна доставка!</span> } </div> 

Такий прогрес-бар збільшує середній чек на 10–30% у користувачів, які спочатку планували купити менше порогу.

Збереження кошика та abandoned cart листи

Збереження кошика між сесіями

Кошик має зберігатися. Для авторизованих — у базі даних, для гостей — у localStorage із синхронізацією під час логіну. При вході відбувається злиття гостьового кошика з серверним через updateOrCreate по product_id та variant_id.

Як налаштувати abandoned cart листи?

Лист через 1 годину після виходу з кошиком — один із найбільш конверсійних email-тригерів (recovery rate 5–15%).

Тригер: при додаванні в кошик створюємо запис з abandoned_at = NULL. Якщо користувач не завершив замовлення протягом 60 хвилин і остання активність була > 60 хвилин тому — помічаємо кошик як покинутий.

// Scheduled Job (кожні 15 хвилин) Cart::query() ->where('updated_at', '<', now()->subMinutes(60)) ->whereNull('order_id') ->whereNull('abandoned_email_sent_at') ->with('user', 'items.product') ->chunk(100, function ($carts) { foreach ($carts as $cart) { SendAbandonedCartEmail::dispatch($cart); $cart->update(['abandoned_email_sent_at' => now()]); } }); 

Лист містить: список товарів із фото та цінами, кнопку «Повернутися до замовлення» (посилання з UTM-міткою), соціальний доказ (відгуки на товари з кошика). Серія листів: через 1 годину, через 24 години, через 72 години. Третій лист може містити знижку — але тільки якщо перші два не спрацювали.

Щоб налаштувати abandoned cart листи, виконайте кроки:

1. Створіть у базі поле abandoned_email_sent_at в таблиці carts.
2. Реалізуйте scheduled job, який кожні 15 хвилин знаходить кошики старші 60 хвилин без замовлення.
3. Відправте лист через email-сервіс (SendGrid, Mailgun) або вбудовану пошту.
4. Заплануйте другий лист через 24 години, третій через 72 години.

Upsell і cross-sell: збільшення середнього чека

Рекомендації мають бути релевантними. Алгоритми: «Часто купують разом» — based on co-occurrence в історичних замовленнях:

SELECT oi2.product_id, COUNT(*) AS together_count FROM order_items oi1 JOIN order_items oi2 ON oi1.order_id = oi2.order_id AND oi1.product_id != oi2.product_id WHERE oi1.product_id = $current_product_id GROUP BY oi2.product_id ORDER BY together_count DESC LIMIT 5; 

«Покращ комплект» — якщо в кошику бюджетний варіант, пропонуємо premium із різницею в ціні. Конверсія в апгрейд — 8–15%.

Технічні оптимізації кошика

Оптимістичний UI

Optimistic UI при зміні кількості. Користувач клікає «+» — кількість змінюється миттєво в UI, запит до API йде у фоні. Якщо запит падає — відкочуємо:

const updateQuantity = async (itemId: number, newQty: number) => { const prevQty = item.quantity; setItems(prev => prev.map(i => i.id === itemId ? {...i, quantity: newQty} : i)); try { await api.patch(`/cart/items/${itemId}`, { quantity: newQty }); } catch { setItems(prev => prev.map(i => i.id === itemId ? {...i, quantity: prevQty} : i)); toast.error('Не вдалося оновити кількість'); } }; 

Цей підхід скорочує час відгуку інтерфейсу до 150 мс, що в 4 рази швидше синхронного перезавантаження сторінки.

Мінімізація кроків до checkout

Кнопка «Оформити замовлення» має бути видна без скролу. На мобільних кнопка оформлення фіксується внизу екрана за допомогою CSS position: fixed та z-index: 100.

Індикатори наявності

Якщо товару залишилося <= 5, показуємо попередження «Залишилося N шт.». Це створює м'який тиск, не виглядаючи як маніпуляція, — просто корисна інформація.

Процес роботи та терміни

Етапи робіт

• Аудит поточної реалізації кошика та checkout (аналіз UX, продуктивності, помилок)
• Впровадження калькулятора доставки з прогрес-баром безкоштовної доставки
• Налаштування abandoned cart листів (тригери, шаблони, серії)
• Інтеграція рекомендаційних алгоритмів (cross-sell, upsell)
• Документування змін та навчання вашої команди
• Підтримка після впровадження протягом 30 днів

Терміни

Разом: 3–5 робочих днів.

Чому обирають нас?

Ми спеціалізуємося на оптимізації e-commerce більше 5 років. Наш досвід включає проєкти з навантаженням до 10 000 запитів на хвилину. Використовуємо сучасний стек: React 18, Next.js, Laravel 11, PHP 8.3, PostgreSQL, Redis. Гарантуємо сумісність рішень з вашою архітектурою. Всі зміни проходять навантажувальне тестування.

Отримайте консультацію з оптимізації вашого кошика. Зв'яжіться з нами для розрахунку вартості та плану робіт.