Next.js Commerce商店，一键式部署到Netlify

使用Commerce.js SDK和Next.js构建的高保真，成熟的电子商务演示商店，并实时部署到Netlify。

该自述文件将指导您使用成熟的电子商务模板起步并运行。我们已经为您配置了此模板，以便您一键式直接部署到Netlify。另外，您可以手动部署到您选择的托管平台。

有关构建此JAMstack电子商务应用程序的完整详细教程，请转到此处。

现在，您已经在全球范围内安装了Chec CLI，您将可以访问chec [COMMANDS]列表，其中之一是注册Chec帐户。让我们继续进行设置！

按照其余的演练来设置您的商人详细信息。或者，您可以在这里注册Chec帐户。

一键式部署允许您将Netlify连接到GitHub帐户，以克隆commercejs-nextjs-demo-store存储库并自动部署它。在单击部署按钮之前，请确保进入Netlify并注册一个帐户。

点击上面的按钮，您将导航到Netlify的直接部署页面，其中项目的资源库作为参数传递到url中。单击“连接到GitHub”按钮，命名您的存储库，然后在“ Chec公钥”输入中输入此公钥。请注意，为了使您能够启动并运行演示商店的实时部署预览，我们为您提供了来自演示商人帐户的公钥。现在，保存并部署您的网站。

请注意，如果您输入公用密钥而不是提供的演示商人密钥，则初始构建将失败。一键式部署旨在用于演示目的，以加快快速部署。使用商家帐户意味着您需要拥有适当的数据，例如与您的产品相关联的多个资产和类别。如果您想使用您的商家帐户，请按照以下手动设置步骤进行。

手动设置涉及将存储库克隆到您的本地环境中，将提供的示例数据播种到您的Chec帐户中，然后部署到Netlify。

＃在本地克隆存储库，可以选择重命名仓库，进入目录git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store＃进入目录并安装依赖项cd chec-store &&纱线

将示例.env.example dotenv文件替换为项目根目录，以存储Chec public_key和secret_key。

您可以在Chec仪表板设置下访问您的API密钥，然后导航到“开发”选项卡以复制您的公共密钥和秘密密钥。将您提供的NEXT_PUBLIC_CHEC_PUBLIC_KEY替换为您自己的NEXT_PUBLIC_CHEC_PUBLIC_KEY，然后在.env文件中填写您的CHEC_SECRET_KEY。种子脚本必须具有私钥才能获得适当的许可，才能将/ seeds中的样本数据播种到您的Chec帐户中。播种数据后，请删除密钥。

＃.env＃填写您的公共密钥和秘密密钥NEXT_PUBLIC_CHEC_PUBLIC_KEY = CHEC_API_URL = https：//api.chec.io#秘密密钥与chec / seeder一起使用以访问您的Chec帐户，并使用示例数据作为种子种子

该文件不应提交给源代码管理，也将在文件浏览器中隐藏。

第3步。播种为Chec商店供电并启动开发环境所需的数据（初始设置必需）。

＃将/ seeds中的数据种子放入您的Chec accountyarn种子＃在http：// localhost：3000yarn dev上运行开发环境

现在，开始开发后，请转到http：// localhost：3000，您的网站现在应该填充示例数据！

如果要替换示例产品，请确保在仪表板中添加新类别，将您的产品与它们相关联，最后在此处替换条形和链接值。

步骤5.进行所需的任何必要更改，并将代码推送到Github或您选择的平台上的存储库中。

确保注册一个Netlify帐户并登录。单击“从Git新建站点”按钮，并授予访问权限以选择您的仓库。您的构建设置会自动从模板中的netlify.toml中填写。要输入环境变量，请单击“显示高级”，然后单击“新建变量”，然后将密钥输入填写为NEXT_PUBLIC_CHEC_PUBLIC_KEY，并使用公共密钥输入值。您可以在Chec仪表板的“设置”下访问API密钥，然后导航到“开发人员”标签以复制公共密钥

该命令将从GitHub下载此示例项目，并在您的计算机上对其进行初始化。您可以自由编辑下载的代码，然后再使用Commerce.js。

当提示您从列表中选择演示商店时，选择“ commercejs-nextjs-demo-store”。该命令还将一些示例数据注入您的Chec帐户。有关更多信息，请参见Chec CLI文档。

由于该项目是一个完全成熟的店面，展示了自定义设计和用户流程，因此，如果您在Chec Dashboard中自定义数据，则会遇到某些警告。 UI中的类别数据是一个难题：此处添加了其他集合数据，并与API中的类别数据合并。如果添加新的或编辑种子样本类别数据，请确保匹配集合数据文件中的段/永久链接值。该应用将期望使用以下广告资源设置来进行构建，因此，如果您想在后端使用广告资源进行自定义，请确保：

用关联的标签替换收藏数据，并链接到您创建的类别的路径（这可确保通过匹配标签将收藏图像合并到收藏数据中）。

如果您想要类似于演示商店的产品中有多个资产，则可以创建资产并将其分配给您的产品。本指南介绍了如何实现此目标。

该演示商店使用由Commerce.js提供并由Chec Dashboard支持的一系列功能。

购物车使用Commerce.js购物车API。购物车最多可以保留30天，而Commerce.js会自动为访问者记住购物车。

Commerce.js提供了许多工具来简化结帐实现。该演示商店中的结帐使用：

Commerce.js提供了内置功能，无需任何服务器端代码即可支持客户登录。该演示商店具有现有客户登录页面的功能，并提供有关先前订单的详细信息。客户信息还用于用已知的客户详细信息预先填充结帐。

此演示商店配置了开箱即用的Chec“测试网关”，可在测试店面时提供方便的付款选项。此外，如果在ChecDashboard上配置了Stripe，则包括对Stripe Elements的支持。

您必须按照提供的说明在Chec仪表板中启用Stripe。您可以为Stripe添加您的sandboxkey，并使用Sandbox Chec公共API密钥对Stripe进行测试。在.env文件中配置了Chec公共API密钥和Stripe“可发布”密钥。请参阅“手动设置和Netlify部署”的第二步

分叉此项目以根据需要自定义和扩展演示。以下是您可以做些什么以及可以采用电子商务的方向的一些想法。