Services

1---
2// Services listing — the first page fetched SERVER-SIDE (SEO) with the URL's filter (`?category=`,
3// `?location=`) and handed to the island as DTO props; the island pages and re-filters from there.
4// Keep this frontmatter; swap the island import to YOUR listing component.
5import SiteLayout from "../layouts/SiteLayout.astro";
6import ServicesView from "../components/bookings/ServicesView";
7import { fetchServices, fetchBookingCategories, fetchLocations } from "../wix/bookings/services";
8import type { BookingCategory, LocationOption, ServiceSummary } from "../wix/bookings/types";
9
10const categoryId = Astro.url.searchParams.get("category") || null;
11const locationId = Astro.url.searchParams.get("location") || null;
12
13let services: ServiceSummary[] = [];
14let hasMore = false;
15let categories: BookingCategory[] = [];
16let locations: { locations: LocationOption[]; hasOtherLocations: boolean } = { locations: [], hasOtherLocations: false };
17try {
18  const [page, cats, locs] = await Promise.all([fetchServices({ categoryId, locationId }), fetchBookingCategories(), fetchLocations()]);
19  services = page.items;
20  hasMore = page.hasMore;
21  categories = cats;
22  locations = locs;
23} catch {
24  // An unguarded SSR throw truncates the response mid-stream; the island renders the
25  // empty state instead.
26}
27---
28
29<SiteLayout title="Services">
30  <h1 class="mb-8 text-2xl font-semibold tracking-tight">Services</h1>
31  <ServicesView
32    client:load
33    initialServices={services}
34    initialHasMore={hasMore}
35    initialCategories={categories}
36    initialLocations={locations}
37    initialCategoryId={categoryId}
38    initialLocationId={locationId}
39  />
40</SiteLayout>