SuperAPI AI 工具集

enable-shopify-menus

前端与建站

查看项目

更新于 10-16 03:38

技能介绍

用途:在 Vercel Shop 店铺前端中,用 Shopify 后台管理的菜单替换导航栏(components/nav/index.tsx)与页脚(components/footer/index.tsx)里硬编码的 MenuItem 数组,并保留原内联项作为兜底。

主要能力:新增 Shopify 菜单 GraphQL 读取(lib/shopify/operations/menu/server.ts),把店铺域名或主域下的绝对链接转换为店铺路径,外部链接保持原样;新增带缓存的读取(lib/menu/server.ts,使用 cacheLife("max") 与 menus 标签);新增受保护刷新端点 app/api/revalidate/menus/route.ts,未设置 MENUS_REVALIDATE_SECRET 时返回 404,令牌错误返回 401,正确返回 200 并刷新标签。Shopify 菜单变更不会发送 webhook,因此需显式调用该端点刷新。

使用方式:先向用户确认要获取哪些菜单(导航、页脚或两者)及其 Shopify 菜单句柄,默认 main-menu 与 footer;再按步骤添加菜单操作、缓存、刷新端点,并把导航与页脚组件改为异步读取 getMenu。刷新命令:curl -X POST https://your-store.example.com/api/revalidate/menus -H "Authorization: Bearer $MENUS_REVALIDATE_SECRET"。需把 MENUS_REVALIDATE_SECRET 写入 .env.example 的 Optional 块和 turbo.json 的 globalEnv(均按字母序),并在部署环境变量中设置。

适用场景:使用 Vercel Shop 且希望菜单由 Shopify 后台统一管理的店铺;支持本地化/ Markets 店铺传入本地化 locale,但不要在缓存读取内部从请求头读取 locale。

限制:需用户提供菜单句柄;保留内联兜底以免菜单缺失或 Storefront 出错时导航空白;不要通过缩短缓存时间获取编辑,而应通过端点刷新;新增字段需先用 Shopify AI Toolkit 校验文档;空或缺失菜单会隐藏页脚列。其余细节资料未提供。