astro-shopify

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

使用 Astro 启动主题来构建一个无头的 Shopify 电子商务网站

该主题是用 Svelte 构建的，但由于 Astro 的支持，你可以使用任何你喜欢的框架（React、Vue、Solid 等）。设计中使用了 Tailwind UI 免费组件。

🧑‍🚀 从哪里开始

1. 根据 .env.example 创建一个 .env 文件，使用您的 Shopify 商店 URL 以及您的公开和私密访问令牌
2. 这些凭证在 /utils/config.ts 文件中使用，您可以在那里更新 API 版本
3. 运行 npm install 或 yarn 或 pnpm install
4. 运行 npm run dev 或 yarn run dev 或 pnpm run dev

Shopify 配置指南

• 创建一个新账户或使用现有账户。https://accounts.shopify.com/store-login
• 将 Shopify Headless channel 添加到您的商店
• Click on Add Storefront
• 将您的 public 和 private 访问令牌复制/粘贴到您的 .env 文件中
• 接下来，检查 Storefront API 访问权限范围
  • unauthenticated_read_product_listings 和 unauthenticated_read_product_inventory 的访问权限应该足够让您入门。
  • 如果需要更多权限，请添加更多权限范围。

Shopify Troubleshooting

• 如果遇到像 error code 401 这样的错误，很可能是您设置不正确。请重新检查您的权限范围，并确保至少添加一个测试产品。同时确保您使用的是 Storefront API，而不是 Admin API，因为端点和权限范围不同。
• 如果您没有看到结账侧边栏，或者在添加产品后侧边栏为空，您需要为测试产品添加一张图片。

🚀 项目结构

在项目内部，你会看到以下文件夹和文件：

/
├── public/
├── src/
│   └── components/
│       └── Header.astro
│   └── layouts/
│       └── BaseLayout.astro
│   └── pages/
│       └── index.astro
│   └── stores/
│       └── cart.ts
│   └── styles/
│       └── global.css
│   └── utils/
│       └── shopify.ts
└── package.json

Astro 会在 src/pages/ 目录中查找 .astro 或 .md 文件。每个页面都会根据其文件名以路由的形式暴露。

src/components/ 没有什么特别的，但我们喜欢将任何 Astro/React/Vue/Svelte/Preact 组件放在这里。

任何静态资源，例如图片，都可以放在 public/ 目录中。

🧞 命令

所有命令都在项目根目录的终端中运行：

⚡️ 灯塔