ecommerce-template — Nuxt 电商模板

SHA-256: f34445e623aaf9529ae520406cdd547e6283fa1271d3252c44a6786e4b48735b

2026-10-04T21:30:48.675Z

# Ember & Oak: E-commerce Store Template

A complete online store for a specialty coffee roaster, built with [Nuxt](https://nuxt.com) (Vue) and generated as a fast static site. Product pages, options, subscriptions, a slide-out cart and a validated checkout flow, ready to connect to Stripe or Shopify.

![Ember & Oak home page](docs/screenshot.png)

> **Ember & Oak is a fictional business and this is a demo store.** No payments are taken and no orders are placed. Products, prices and copy are sample content. Product images (coffee bags and brewing gear) are illustrations; lifestyle photos are from Unsplash.

## Features

- **Shop** with filters (type, roast) and sorting.
- **Product pages** with size, grind and quantity options, plus **subscribe & save** pricing.
- **Coffee finder**: two questions, one recommendation.
- **Cart drawer** and cart page with quantity controls, free-shipping progress bar and totals. The cart is saved in the browser, so it survives page reloads.
- **Checkout** with inline validation (including Canadian postal codes) and an order confirmation page. No card fields: in production this step hands off to Stripe Checkout or Shopify.
- **Illustrated product art**: each coffee gets a bag in its own colour, generated from the product data, and brewing gear is drawn in the same style, so the catalogue always looks consistent.
- **Accessible**: keyboard-friendly options, a focus-trapped cart drawer (native `<dialog>`), visible focus, WCAG AA contrast, reduced-motion support.
- **Fast**: static HTML, self-hosted fonts, pre-sized WebP images, small Vue bundle.

## Run it locally

Requires Node.js 22.19 or later.

```bash
npm install
npm run dev
```

Open http://localhost:3000.

## Customise

| What | Where |
|---|---|
| Products, prices, sizes, grinds, shipping rules | `app/utils/products.ts` |
| Currency | `formatPrice` in `app/utils/products.ts` (CAD by default) |
| Colours, fonts, spacing | CSS variables at the top of `app/assets/css/main.css`, font files in `public/fonts/` |
| Coffee finder answers | `PICKS` in `app/components/CoffeeFinder.vue` |
| Home page sections | `app/pages/index.vue` |
| Cart logic (saved in localStorage) | `app/composables/useCart.ts` |
| Site title, meta tags, pre-rendered routes | `nuxt.config.ts` |

### Going live with payments

The cart already holds everything a checkout needs (product, size, grind, subscription, quantity). Two common routes:

1. **Stripe Checkout**: add a small serverless function (for example a Cloudflare Worker) that creates a Checkout Session from the cart lines, and redirect to it from `app/pages/checkout/index.vue`.
2. **Shopify Storefront API**: keep this front end and create the cart and checkout through Shopify.

To preview the built site locally: `npm run build` then `npm run preview`.

## Deploy to Cloudflare Pages

`npm run build` runs `nuxt generate`, which pre-renders every page into a plain static site in `.output/public/`.

- **Dashboard:** Workers & Pages → Create → Pages → Connect to Git → pick this repo. Build command: `npm run build`. Output directory: `.output/public`.
- **CLI:**
  ```bash
  npm run build
  npx wrangler pages deploy .output/public --project-name ember-and-oak
  ```

## Credits

- Typefaces: [Bricolage Grotesque](https://fonts.google.com/specimen/Bricolage+Grotesque) and [Figtree](https://fonts.google.com/specimen/Figtree), SIL Open Font License.
- Photos from [Unsplash](https://unsplash.com) (Unsplash License):

  | File | Photographer | Source |
  |---|---|---|
  | `public/images/hero.webp` | Beau Carpenter | https://images.unsplash.com/photo-1729277133095-bff46b56c29a |
  | `public/images/brewing.webp` | kayla phaneuf | https://images.unsplash.com/photo-1548818251-53e9da6f0655 |
  | `public/images/farm.webp` | Faris Ristiansyah | https://images.unsplash.com/photo-1782974501096-90a2249b417a |
  | `public/images/roastery.webp` | Yanapi Senaud | https://images.unsplash.com/photo-1511537190424-bbbab87ac5eb |

- Built by **NC Atelier**.

---

### Want a store like this for your business?

NC Atelier designs and builds fast, accessible websites for businesses in the UK, US and Canada.

**Get in touch:** [ncatelier.com](https://ncatelier.com) · [LinkedIn](https://www.linkedin.com/in/cadetnicolas)