---
// The site chrome for every storefront page — THIS file (header/footer/nav) plus the @theme
// token block in src/styles/global.css are what you brand. Keep:
// - the in (the product page's owner-editable SEO lands there,
// including the — which is why ours is printed only when the slot is empty)
// - the global.css import (Tailwind + the design tokens every shipped component reads)
// - one <CartButton> in the header and one <CartDrawer> per page (both client:only —
// they read browser cart state and must not server-render)
// - category links in the nav (or your own menu/footer) — every category page reachable by
// a real link (`/category/<slug>`), from the live tree, so a category the owner adds later
// shows up with no code change
import CartButton from "../components/storefront/CartButton";
import CartDrawer from "../components/storefront/CartDrawer";
import { fetchCategories } from "../wix/storefront/catalog";
import type { Category } from "../wix/storefront/types";
import "../styles/global.css";
interface Props {
title: string;
description?: string;
}
const { title, description } = Astro.props;
// Non-fatal: the chrome renders without the links if the read fails. Six in the header keeps a
// large tree from crowding it — put the rest in a menu or the footer, but keep them linked.
let navCategories: Category[] = [];
try {
navCategories = (await fetchCategories()).slice(0, 6);
} catch {
/* the shop link still reaches everything */
}
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* The product page's <SEO.Tags> renders the <title>; print ours only when no page filled the slot — two titles otherwise. */}
{!Astro.slots.has("seo-tags") && <title>{title}}
{description && }