@wix/agent-skills 1.17.0 → 1.18.0

package/skills/wix-headless-fast/references/bookings/app-astro/layouts/SiteLayout.astro

@@ -0,0 +1,40 @@
+---
+// The site chrome for every bookings page — THIS file (header/footer/nav) plus the @theme
+// token block in src/styles/global.css are what you brand. Keep the <slot name="seo-tags" />
+// in <head> and the global.css import. (If the storefront vertical is also deployed, its
+// SiteLayout won; merge nav links there instead.)
+import "../styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <slot name="seo-tags" />
+  </head>
+  <body>
+    <header class="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
+      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>
+        <nav class="flex items-center gap-6 text-sm">
+          <a href="/services" class="text-foreground no-underline transition-colors hover:text-muted-foreground">Services</a>
+        </nav>
+      </div>
+    </header>
+    <main class="mx-auto max-w-6xl px-6 pb-24 pt-10">
+      <slot />
+    </main>
+    <footer class="border-t border-border px-6 py-10 text-center text-sm text-muted-foreground">
+      © Brand Name
+    </footer>
+  </body>
+</html>

package/skills/wix-headless-fast/references/bookings/app-astro/pages/services/[slug].astro

@@ -0,0 +1,76 @@
+---
+// Service detail + booking page.
+//
+// This is a Wix ITEM PAGE: the wixMetadata export + <SEO.Tags> below let the site owner edit
+// this page's title/description/OG in the dashboard and register the route in the sitemap.
+// Keep all three SEO pieces and this frontmatter; swap the island import to YOUR booking
+// component. The booking island is client:only — availability is timezone/session-specific.
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import ServiceBookingView from "../../components/bookings/ServiceBookingView";
+import { fetchServiceBySlug } from "../../wix/bookings/services";
+import { WIX_APPS } from "@wix/essentials";
+import { SEO } from "@wix/seo/components";
+import { loadSEOTagsServiceConfig } from "@wix/seo/services";
+import { seoTags } from "@wix/seo";
+
+export const wixMetadata = {
+  appDefId: WIX_APPS.bookings.id,
+  pageIdentifier: WIX_APPS.bookings.servicePageMetadata.pageIdentifier,
+  identifiers: {
+    slug: WIX_APPS.bookings.servicePageMetadata.identifiers.slug,
+  },
+};
+
+const slug = Astro.params.slug!;
+
+// Behind Wix's proxy the request URL is internal — the real public page URL arrives on
+// x-wix-forwarded-url; the SEO service needs the public one.
+const forwardedUrl = Astro.request.headers.get("x-wix-forwarded-url");
+const pageUrl =
+  forwardedUrl && URL.canParse(forwardedUrl) && /^https?:$/.test(new URL(forwardedUrl).protocol)
+    ? forwardedUrl
+    : Astro.url.href;
+
+let service = null;
+let seoTagsServiceConfig = null;
+try {
+  [service, seoTagsServiceConfig] = await Promise.all([
+    fetchServiceBySlug(slug),
+    loadSEOTagsServiceConfig({
+      pageUrl,
+      itemType: seoTags.ItemType.BOOKINGS_SERVICE,
+      itemData: { slug },
+    }).catch(() => null),
+  ]);
+} catch {
+  // Guarded: an unhandled SSR throw truncates the response mid-stream.
+}
+
+if (!service) {
+  return new Response(null, { status: 404 });
+}
+---
+
+<SiteLayout title={service.name}>
+  <SEO.Tags seoTagsServiceConfig={seoTagsServiceConfig} slot="seo-tags" />
+
+  <div class="grid gap-10 md:grid-cols-2">
+    <div>
+      {service.imageUrl && (
+        <div class="aspect-[4/3] overflow-hidden rounded-xl bg-secondary">
+          <img src={service.imageUrl} alt={service.name} class="h-full w-full object-cover" />
+        </div>
+      )}
+      <h1 class="mt-5 text-2xl font-semibold tracking-tight">{service.name}</h1>
+      {service.tagLine && <p class="mt-1 text-muted-foreground">{service.tagLine}</p>}
+      <p class="mt-2 text-sm text-muted-foreground">
+        {service.durationMinutes ? `${service.durationMinutes} min · ` : ""}
+        <span class="text-foreground">{service.price}</span>
+      </p>
+      {service.description && <p class="mt-4 text-sm leading-relaxed text-muted-foreground">{service.description}</p>}
+    </div>
+    <div>
+      <ServiceBookingView client:only="react" service={service} />
+    </div>
+  </div>
+</SiteLayout>

package/skills/wix-headless-fast/references/bookings/app-astro/pages/services.astro

@@ -0,0 +1,22 @@
+---
+// Services listing — data fetched SERVER-SIDE (SEO) and handed to the island as DTO props.
+// Keep this frontmatter; swap the island import to YOUR listing component.
+import SiteLayout from "../layouts/SiteLayout.astro";
+import ServicesView from "../components/bookings/ServicesView";
+import { fetchServices, fetchBookingCategories } from "../wix/bookings/services";
+import type { BookingCategory, ServiceSummary } from "../wix/bookings/types";
+
+let services: ServiceSummary[] = [];
+let categories: BookingCategory[] = [];
+try {
+  [services, categories] = await Promise.all([fetchServices(), fetchBookingCategories()]);
+} catch {
+  // An unguarded SSR throw truncates the response mid-stream; the island renders the
+  // empty state instead.
+}
+---
+
+<SiteLayout title="Services">
+  <h1 class="mb-8 text-2xl font-semibold tracking-tight">Services</h1>
+  <ServicesView client:load initialServices={services} initialCategories={categories} />
+</SiteLayout>