Ecommerce for Astro that ships no framework

A typed catalogue with content collections

Astro will validate product data at build time if you let it, which catches a missing price or a mistyped id before it reaches a page rather than after a customer finds it.

import { defineCollection, z } from 'astro:content';

const shop = defineCollection({
  schema: z.object({
    name: z.string(),
    itemId: z.string().uuid(),
    price: z.number().positive(),
  }),
});

export const collections = { shop };

One component, and no hydration directive

The button is an ordinary Astro component. Notice what is absent: no client:load, no client:visible, nothing to hydrate. It renders to HTML at build time and the shared script finds it in the browser.

---
interface Props { id: string; name: string; price: number }
const { id, name, price } = Astro.props;
---
<button
  class="commerce-add"
  data-item-id={id}
  data-item-name={name}
  data-item-price={price}
>
  Add to Cart
</button>

The one detail that catches people: is:inline

Astro processes and bundles script tags by default. That is usually what you want and it is not what you want here. is:inline tells it to leave the tag exactly as written, so the file loads from our domain and stays cached across your pages.

<div id="suitestatic-cart"
     data-public-key="pk_live_..."></div>
<script is:inline
        src="https://suitestatic.com/widget.js"></script>

Miss it and Astro will try to bundle a file it cannot see, which fails quietly. It is the only Astro-specific thing on this page.

What it costs you in bytes

One script tag at the end of the document, on the pages where you put it. It does not block rendering, it pulls in no framework, and the cart interface is not constructed until a shopper adds something to it. Pages nobody shops on pay almost nothing.

• Your islands stay yours. Nothing here competes for hydration.
• Works with output: 'static'. There is no adapter to install.
• Checkout runs on our infrastructure, so none of your serverless functions ends up holding a Stripe key.

Behind the button

Inventory, live carrier rates priced on the real dimensions of the parcel, postage bought at cost, tracking email, refunds and receipts all run on our side. How shipping is calculated, or what it costs.