uncle-johnys-tombstones

Uncle Johny's Tombstones

Live Site: www.uncle-johny-tombstones.com

A horror-themed tombstone shop built with Astro on Wix Managed Headless. Browse the spooky catalogue, add a tombstone to your cart, and check out through a Wix-hosted checkout — complete with an ambient graveyard soundtrack and a suitably grim success/failure flow.

Technologies

• Framework: Astro 5 (server output) + React for interactive islands
• Wix Integration: Wix Managed Headless — Wix Stores (catalogue & cart) + Wix eCommerce (checkout redirects)
• Styling: Vanilla CSS with custom keyframe animations (no external CSS framework)
• Language: TypeScript
• Deployment: Wix CLI (wix build / wix release) — hosted on Wix's cloud infrastructure

Project Structure

uncle-johnys-tombstones/
├── public/              # Static assets (images, audio, SVGs)
├── src/
│   ├── components/      # Page sections: Hero, Pitch, Testimonials, Welcome, footers
│   ├── layouts/         # Shared Layout.astro (nav, cart badge, audio player)
│   ├── lib/
│   │   └── shop.ts      # Server-side helpers for Wix Stores catalogue & cart
│   └── pages/
│       ├── index.astro       # Landing page
│       ├── shop.astro        # Product listing
│       ├── product/[id].astro # Product detail
│       ├── success.astro     # Post-checkout success
│       ├── failure.astro     # Post-checkout failure / abandonment
│       └── api/
│           ├── cart.ts       # GET item count / POST add to cart
│           └── checkout.ts   # Redirect to Wix-hosted checkout
├── astro.config.mjs
└── package.json

How to Create This Yourself

Prerequisites

• Node.js v20.11.0+
• A Wix account
• Wix CLI installed globally:

  npm install -g @wix/cli

---

Option A: Download & Run This Project

Important: All commands below must be run from inside the uncle-johnys-tombstones/ folder, not the monorepo root. The Wix CLI only works inside an individual project directory.

1. Sparse-clone just this folder from the monorepo:

   git clone --filter=blob:none --sparse https://github.com/wix-incubator/headless-day.git
   cd headless-day
   git sparse-checkout set uncle-johnys-tombstones
   cd uncle-johnys-tombstones

2. Install dependencies:

   npm install

3. Log in and connect to your Wix site:

   wix login
   npm create @wix/new@latest init

   This creates a new Wix site for your account and writes wix.config.json locally. That file is site-specific and is not committed to this repo.

4. Install Wix Stores on your new site from the App Market in manage.wix.com, then add products in the Stores dashboard.

5. Run locally:

   npm run dev

   Open the local URL shown in the terminal (typically http://localhost:3000).

6. Build and deploy:

   npm run build
   npm run release

   Your site will be live on Wix's infrastructure under your site's domain.

---

Option B: Build It From Scratch

1. Create a new Wix Managed Headless project:

   npm create @wix/new@latest -- headless

   Follow the prompts for business name, folder name, and site template. For a store like this one, choose the commerce template.

2. Install Wix business solution packages:

   npm install @wix/stores @wix/ecom @wix/redirects @wix/essentials

3. Set up Wix Stores on your site:

   • Go to manage.wix.com, open your site, and install Wix Stores from the App Market.
   • Add products with images and prices in the Stores dashboard.

4. Configure Astro for server-side rendering: In astro.config.mjs, set output: "server" and add the @wix/astro and @wix/astro-pages integrations:

   import wix from "@wix/astro";
   import wixPages from "@wix/astro-pages";
   
   export default defineConfig({
     integrations: [wix(), wixPages()],
     output: "server",
   });

5. Fetch products server-side using the Wix Stores SDK (no API key needed — authentication is ambient in Managed Headless):

   import { productsV3 } from "@wix/stores";
   
   const { items } = await productsV3.queryProducts().limit(100).find();

6. Wire up cart and checkout using @wix/ecom:

   • currentCart.addToCurrentCart(...) to add items
   • currentCart.createCheckoutFromCurrentCart(...) + redirects.createRedirectSession(...) to send the buyer to Wix-hosted checkout
   • Handle /success and /failure callback pages

7. Deploy:

   npm run build
   npm run release

For full docs, see Quick Start with the Wix CLI.

---

Disclaimer

This is a Wix Headless project created for demonstration purposes only. Cloning or copying this repo is encouraged, but is done on the responsibility of the user.