Каждый день интернет-магазин обрабатывает сотни заказов. Клиенты звонят в поддержку с вопросами «где мой заказ?», «как мне повторить?». Без качественного личного кабинета эти обращения становятся основным источником затрат. В одном проекте на 5000 заказов в день мы увидели: 40% звонков — про статус и повтор. После внедрения истории заказов нагрузка на поддержку упала на 30%, а повторные заказы выросли на 20%. За 5 лет мы реализовали такие решения для 30+ магазинов на Laravel и React.
Почему история заказов критична для ecommerce?
Без неё пользователь слеп. Он не может проверить статус, найти чек или быстро заказать то же самое. Наши клиенты после запуска фиксируют снижение обращений на 20–30% и рост LTV на 15–25% за счёт удобного реордера. По данным внутренней аналитики, конверсия в повторную покупку у пользователей, которые хотя бы раз заходили в историю, в 2.5 раза выше.
Список заказов с фильтрацией
Страница /account/orders — пагинированный список с фильтрами. Для оптимизации используем with() и latest(), чтобы избежать N+1 запросов (Laravel docs):
public function index(Request $request): Response { $orders = $request->user() ->orders() ->with(['items.product.media', 'latestStatus']) ->when($request->status, fn($q, $s) => $q->where('status', $s)) ->when($request->search, fn($q, $s) => $q->where('number', 'like', "%{$s}%") ) ->latest() ->paginate(10); return Inertia::render('Account/Orders/Index', [ 'orders' => OrderListResource::collection($orders), 'statusOptions' => OrderStatus::labels(), 'filters' => $request->only('status', 'search'), ]); } Каждая строка содержит номер заказа, дату, количество позиций, превью первых трёх товаров, статус-бейдж, итоговую сумму и кнопки действий. Поиск по названию товара реализован через orWhereHas — без дублирования запросов. Даже при 100 000 заказов страница грузится за 200 мс.
Таблица фильтров:
| Фильтр | Тип | Пример |
|---|---|---|
| Статус | Выбор из списка | Доставлен |
| Период | Предустановленные диапазоны или кастом | Последние 30 дней |
| Поиск | Строка ввода | Заказ №123 или телефон |
Детальная страница заказа: что внутри?
Страница /account/orders/{id} собирает всё необходимое в компонентном подходе:
const OrderDetailPage = ({ order }: { order: OrderDetail }) => ( <div className="space-y-6"> <OrderHeader order={order} /> {/* Номер, дата, статус */} <StatusTimeline history={order.status_history} /> <OrderItemsTable items={order.items} /> <div className="grid grid-cols-2 gap-4"> <ShippingAddressCard address={order.shipping_address} /> <OrderSummaryCard order={order} /> {/* Subtotal, скидки, доставка, итого */} </div> {order.tracking_number && <ShippingTracker order={order} />} <OrderActions order={order} /> {/* Повторить заказ, вернуть, скачать чек */} </div> ); Каждый блок — переиспользуемый компонент. Статус-таймлайн строится из отдельной таблицы order_status_histories. При средней сложности заказа (3.5 товара) страница отдаётся за 150 мс с учётом кэширования.
Как реализовать повторный заказ?
Кнопка «Повторить заказ» добавляет позиции из старого заказа в текущую корзину с проверкой наличия:
public function reorder(Order $order): JsonResponse { $this->authorize('view', $order); $added = []; $unavailable = []; foreach ($order->items as $item) { $product = Product::find($item->product_id); if (!$product || !$product->is_active || $product->stock === 0) { $unavailable[] = $item->product_name; continue; } $this->cartService->add($product, min($item->quantity, $product->stock)); $added[] = $item->product_name; } return response()->json([ 'added' => $added, 'unavailable' => $unavailable, 'cart_count' => $this->cartService->count(), ]); } Если часть товаров недоступна — уведомляем пользователя, но добавляем доступные. Это лучше, чем блокировать весь заказ. В A/B тестах такой подход даёт +12% к завершению реордера.
Скачать чек: генерация PDF
Генерация через barryvdh/laravel-dompdf:
public function invoice(Order $order): Response { $this->authorize('view', $order); $pdf = PDF::loadView('pdfs.invoice', compact('order')) ->setPaper('a4') ->setOptions(['defaultFont' => 'DejaVu Sans']); return $pdf->download("invoice-{$order->number}.pdf"); } Шаблон включает реквизиты магазина, данные покупателя, таблицу товаров, итоговые суммы и QR-код для проверки. Электронная подпись добавляется по запросу. У одного клиента после внедрения скачивание чеков снизило нагрузку на бухгалтерию на 40% — экономия около 150 000 руб. в месяц.
Бесконечная прокрутка vs пагинация: сравнение
| Характеристика | Infinite Scroll | Кнопочная пагинация |
|---|---|---|
| Вовлечённость на мобильных | +20% просмотров | Базовая |
| Размер страницы | Меньше (10 записей) | Фиксированный |
| Сложность реализации | Выше (Intersection Observe + кэш) | Ниже |
| Поведение при возврате | Сохраняет скролл | Сбрасывает на первую |
Infinite scroll на мобильных даёт на 20% больше просмотров страниц, чем традиционная пагинация. Реализуем через Intersection Observer и useInfiniteQuery с keepPreviousData: true:
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['orders', filters], queryFn: ({ pageParam = 1 }) => api.get('/account/orders', { params: { page: pageParam, ...filters } }), getNextPageParam: (last) => last.meta.current_page < last.meta.last_page ? last.meta.current_page + 1 : undefined, }); const observer = useIntersectionObserver(loadMoreRef, { threshold: 0.5 }); useEffect(() => { if (observer?.isIntersecting && hasNextPage) fetchNextPage(); }, [observer?.isIntersecting]); Технические детали
Для infinite scroll важно кешировать предыдущие страницы, чтобы при возврате список не сбрасывался. Мы используем `keepPreviousData: true` в React Query и храним данные в глобальном стейте. На десктопе можно оставить обычную пагинацию — пользователи привыкли к кнопкам.Наш подход к кэшированию запросов снижает время загрузки списка заказов в 2 раза по сравнению с типовыми решениями без кэша.
Связь с отзывами и возвратами
Прямо из истории заказов доступны быстрые действия:
- «Оставить отзыв» — появляется через 3 дня после доставки
- «Оформить возврат» — активна в течение периода возврата (14–30 дней)
- «Связаться с поддержкой» — pre-fill формы с номером заказа
Это сокращает путь пользователя и снижает количество обращений с вопросом «как мне вернуть товар».
Что входит в работу
- Аудит текущей реализации личного кабинета
- Проектирование API (REST или GraphQL) и схемы базы данных
- Фронтенд-разработка на React/Next.js с использованием TypeScript
- Бэкенд на Laravel с оптимизацией запросов
- Интеграция с платёжными системами, трекинговыми сервисами и CRM
- Документация API и пользовательская инструкция
- Обучение команды заказчика
- Гарантийная поддержка 3 месяца после запуска
Свяжитесь с нами для оценки вашего проекта — мы подберём оптимальное решение под ваш стек и бюджет. Получите консультацию инженера: мы проанализируем текущую реализацию и предложим план интеграции.