Shopify Ecommerce Starter

这是一个基于Next.js、Shopify Storefront API和EdgeOne Pages构建的水晶电商网站模板，提供了完整的产品展示、购物车、用户登录等功能。

技术栈

前端框架: Next.js (SSG)
UI组件库: 自定义组件
样式: Shadcn-ui
类型系统: TypeScript
Edge函数: EdgeOne Functions

功能特点

响应式设计，适配各种设备
产品列表和详情页面
购物车功能
博客系统
联系表单
用户认证 (登录/注册)

开始使用

Shopify 设置

根据文档进行设置

安装依赖

npm install

运行开发服务器

edgeone pages dev

项目结构

/src/app - Next.js 页面和组件
/src/components - 可重用UI组件
/src/lib - 工具函数和配置
/public - 静态资源

支付

项目接入了 shopify 提供的支付功能（测试版），如果需要测试支付效果，在点击结账按钮后需要输入密码：ohfrad

测试卡号参考文档：https://help.shopify.com/en/manual/payments/shopify-payments/testing-shopify-payments

环境变量

创建一个 .env 文件，包含以下变量:

SHOPIFY_STORE_DOMAIN=yourshop.myshopify.com
SHOPIFY_API_VERSION=2025-04
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your storefront api access token
SHOPIFY_WEBHOOK_SECRET=your-webhook-secret

按需再生（On-demand Revalidation）

本模板支持增量静态再生（ISR）— 商品页面在构建时静态生成，数据变更时自动刷新。

当 Shopify 中的商品被创建、更新或删除时，Webhook 触发 revalidatePath() 即时清除 CDN 缓存：

// src/app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(request: NextRequest) {
  // 验证 Shopify HMAC 签名
  const payload = JSON.parse(body);
  const handle = payload.handle;

  if (handle) {
    revalidatePath(`/product/${handle}`);
  }
  revalidatePath('/product/list');
  revalidatePath('/');

  return NextResponse.json({ success: true });
}

配置 Shopify Webhook：

在 Shopify 管理后台，进入 Settings → Notifications → Webhooks
为 Product creation、Product update、Product deletion 各创建一个 Webhook
URL 填写 https://你的域名/api/revalidate
复制签名密钥，设置为环境变量 SHOPIFY_WEBHOOK_SECRET

框架	Next.js
电商系统	Shopify

框架	Next.js
电商系统	Shopify