Order History for E-Commerce

Developing Order History for E-commerce

Order history — most requested cabinet section. User returns here to repeat order, find receipt, check status, initiate return. Takes 2–3 business days as cabinet component.

Order List

Page /account/orders — paginated order list with filters:

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

Each row shows: number, date, item count, first 3 product thumbnails, status badge, total amount, action buttons.

Order Detail Page

Page /account/orders/{id} assembles everything:

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} />
    </div>
    {order.tracking_number && <ShippingTracker order={order} />}
    <OrderActions order={order} />
  </div>
);

Reorder Button

"Repeat order" adds old order items to current cart with availability check:

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

If some unavailable — notify user but add available ones.

Download Receipt

PDF generation via 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");
}

Template includes: store credentials, buyer data, items table, totals, QR code.

Filtering and Search

Filters on list page:

• By status: All / Processing / Shipped / Delivered / Cancelled / Returns
• By period: last 30 days / 3 months / 6 months / year / custom range
• Search: by number or product name

Product name search requires join:

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

Pagination and Infinite Scroll

Mobile — infinite scroll instead of pagination buttons:

const { data, fetchNextPage, hasNextPage } = 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);
useEffect(() => {
  if (observer?.isIntersecting && hasNextPage) fetchNextPage();
}, [observer?.isIntersecting]);

Quick Actions

Direct from order history:

• "Leave review" — appears 3 days after delivery
• "Request return" — active during return window (14–30 days)
• "Contact support" — pre-fills order number

Reduces user path and lowers support inquiries.