Разработка истории заказов для интернет-магазина

Разработка истории заказов для интернет-магазина

История заказов — один из наиболее востребованных разделов личного кабинета. Пользователь возвращается сюда, чтобы повторить заказ, найти чек, проверить статус или инициировать возврат. Разработка занимает 2–3 рабочих дня и реализуется как составная часть личного кабинета.

Список заказов

Страница /account/orders — пагинированный список заказов пользователя с фильтрами:

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'),
    ]);
}

Каждая строка списка показывает: номер заказа, дату, количество позиций, превью первых 3 товаров (миниатюры), статус-бейдж, итоговую сумму и кнопки действий.

Детальная страница заказа

Страница /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>
);

Повторить заказ (reorder)

Кнопка «Повторить заказ» добавляет позиции из старого заказа в текущую корзину с проверкой наличия:

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(),
    ]);
}

Если часть товаров недоступна — уведомляем пользователя, но добавляем доступные.

Скачать чек / инвойс

Генерация 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-код для проверки.

Фильтрация и поиск

Фильтры на странице списка:

• По статусу: Все / Обрабатываются / Отправлены / Доставлены / Отменены / Возвраты
• По периоду: последние 30 дней / 3 месяца / 6 месяцев / год / произвольный диапазон
• Поиск: по номеру заказа или названию товара

Поиск по названию товара требует join:

->when($request->search, function ($q, $search) {
    $q->where('number', 'like', "%{$search}%")
      ->orWhereHas('items', fn($q2) =>
          $q2->where('product_name', 'ilike', "%{$search}%")
      );
})

Пагинация и бесконечная прокрутка

Для мобильных — infinite scroll вместо кнопок пагинации:

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]);

Связь с отзывами и возвратами

Прямо из истории заказов доступны быстрые действия:

• «Оставить отзыв» — появляется через 3 дня после доставки
• «Оформить возврат» — активна в течение периода возврата (14–30 дней)
• «Связаться с поддержкой» — pre-fill формы с номером заказа

Это сокращает путь пользователя и снижает количество обращений с вопросом «как мне вернуть товар».