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

Уявіть: ваш інтернет-магазин втрачає до 70% кошиків. Половина цих втрат — технічні та UX-проблеми, які вирішуються на рівні розробки. Наприклад, магазин електроніки із середнім чеком $72–100. після впровадження калькулятора доставки та abandoned cart листів знизив показник з 75% до 52%, отримавши додатково $3.6k–5.2k. виручки на місяць. За даними 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. Гарантуємо сумісність рішень з вашою архітектурою. Всі зміни проходять навантажувальне тестування.

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