使用 Astro 和 Storefront API 构建 Shopify 商店的模板

[rubinaruma]

有这么多新技术可以尝试，但时间却太少！当我们看到 Shopify 扩展了他们的Storefront API时，Netlify 的开发人员体验团队立即开始尝试各种不同的购物网站构建方法。

我决定尝试使用Astro和 React 来构建一个！

如果你对我如何构建它感兴趣，请继续阅读。如果你想看看团队其他成员如何构建他们的，这里有一些很棒的帖子可以帮助你入门：
Astro x Shopify 模板的主要功能
我们整个团队从一些无服务器函数开始，这些函数在我们的项目之间共享，用于查询 Shopify API。这些函数具有以下功能：

获取产品获取产品列表将产品添加到购物车（如果不存在则创建一个新的购物车对象）
获取一辆载有产品的购物车从购物车中移除产品我们还在各个项目中共享相同的风格，以便向所有人展示同一站点的近似复制品，只是以不同的方式构建！如果您想查看这些功能，您可以访问我们的任何演示项目，或者它们就在我们今天要讨论的项目中。设置Shopify在进行任何操作之前您首先必须先创一个帐户！如果您没有Shopify 合作伙伴帐户，请创建一个。登录您的合作伙伴帐户并创建Shopify 发商店来测试您的实施。生成您的 API 凭证以向 Storefront API 发出经过身份验证的请求在您的商店中创建产品和产品变体。这可能是您从 API 获得的虚拟产品，我们使用肉类和奶酪，因为我们总是饿。
在您的 Shopify 管理仪表板上创建一个私人应用。这将代表您将从中发出请求的客户端应用程序。
现在，我们可以用所有钥匙开始行动了！

设置 Astro您需要创建一个 Astro 项目来填充您的数据！如果您以前 美国电报号码数据库 没有使用过 Astro，我强烈建议您查看这篇介绍性博客文章，其中我解释了 Astro 项目的结构以及.astro文件的工作原理！克隆启动器并填充环境变量愿意，您可以克隆并复制我现有的 Shopify 网站项目，否则您可以从这个启动项目重新开始：

部署到 Netlify如果您使用我现有的站点项目，此构建将立即失败。您需要设置环境变量和Netlify CLI才能继续！继续创建一个.env文件（无论您克隆了哪个项目），并使用从 Shopify 获取的密钥和端点填充它：

现在，如果您使用我现有的项目，您的网站在运行时应该可以正常工作npm start！您可能需要更改一些副本，但您已经大功告成了。哇哦！继续进行自定义吧！