Subchapter 7.131

Site Layout

references/storefront/app-astro/layouts/SiteLayout.astro

ASTRO65 lines3 KB

1---
2// The site chrome for every storefront page — THIS file (header/footer/nav) plus the @theme
3// token block in src/styles/global.css are what you brand. Keep:
4//   - the <slot name="seo-tags" /> in <head> (the product page's owner-editable SEO lands there,
5//     including the <title> — which is why ours is printed only when the slot is empty)
6//   - the global.css import (Tailwind + the design tokens every shipped component reads)
7//   - one <CartButton> in the header and one <CartDrawer> per page (both client:only —
8//     they read browser cart state and must not server-render)
9//   - category links in the nav (or your own menu/footer) — every category page reachable by
10//     a real link (`/category/<slug>`), from the live tree, so a category the owner adds later
11//     shows up with no code change
12import CartButton from "../components/storefront/CartButton";
13import CartDrawer from "../components/storefront/CartDrawer";
14import { fetchCategories } from "../wix/storefront/catalog";
15import type { Category } from "../wix/storefront/types";
16

SiteLayout.astro on GitHub

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>

<head>

{/* 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}</title>}

{description && <meta name="description" content={description} />}

</head>

<body>

<a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>

{navCategories.map((c) => (

))}

</nav>

</div>

</header>

</main>

</footer>

</body>

</html>