commercejs nextjs demo store
1.0.0
一个由Commercer.js SDK和Next.js实时部署的高保真型充分的电子商务演示商店，以netlify。
笔记
此读书我将指导您使用成熟的电子商务模板来启动和运行。我们已经为您配置了此模板，以直接部署一键式部署以进行NetLify。另外，您可以手动部署到您选择的托管平台。
有关构建此Jamstack电子商务应用程序的完整详细教程，请前往这里。
yarn global add @chec/cli 现在，您已经在全球安装了CHEC CLI，您将能够访问chec [COMMANDS]的列表，其中一个正在注册CHEC帐户。让我们继续进行设置！
# Open the Chec registration page in your browser
chec register遵循其余的演练设置您的商人详细信息。另外，您可以在这里注册CHEC帐户。
一单击的部署使您可以将NetLify连接到您的GitHub帐户，以克隆commercejs-nextjs-demo-store存储库并自动部署它。在单击部署按钮之前，请务必去NetLify并注册帐户。
通过单击上面的按钮，您将被导航到NetLify的直接部署页面，并将项目存储库传递为URL中的参数。单击连接到GitHub按钮，命名您的存储库，然后在CHEC公共密钥输入中输入此公共密钥。请注意，为了使您启动和运行演示商店的实时部署预览，我们向您提供了Demo Merchant帐户中的公钥。现在，保存和部署您的网站。
请注意，如果您输入公共密钥而不是提供的演示商人密钥，则初始构建将失败。一单击的部署旨在用于演示目的，以旋转快速部署。使用您的商家帐户意味着您需要拥有适当的数据，例如与产品相关的多个资产和类别。如果您想使用您的商家帐户，请按照下面的手动设置步骤操作。
手动设置涉及将存储库克隆到您的本地环境中，将提供的样本数据播种到您的CHEC帐户中并部署以Netlify。
步骤1。克隆回购并安装依赖项
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarn步骤2。设置您的环境变量
替换项目根部的示例.env.example dotenv文件，以存储您的chec public_key和secret_key 。
# Copy from source file to destination file .env
cp .env.example .env您可以在CHEC仪表板设置中访问您的API键，然后导航到“开发”选项卡以复制您的公共密钥和秘密键。用自己的NEXT_PUBLIC_CHEC_PUBLIC_KEY ，然后在.env文件中填写CHEC_SECRET_KEY 。秘密键是种子脚本需要适当许可将样本数据/seeds播种到您的CHEC帐户中的必要权限。数据播种后，删除秘密密钥。
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =该文件旨在不承诺源控制，并且还将隐藏在文件浏览器中。
步骤3。种子播种为CHEC商店提供动力并开始开发环境所需的数据（初始设置所需的）。
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn dev现在前往http：// localhost：启动开发后的3000，现在应该使用示例数据填充您的网站！
如果要替换示例产品或类别，则可以在“公共/图像/收集”下自定义自己的类别图像。请参阅下面有关数据自定义的更多信息。
步骤5。进行所需的任何必要更改，然后将代码推向GitHub上的存储库或您选择的平台。
步骤6。部署您的网站
请确保注册一个Netlify帐户并登录到该帐户。从Git按钮中单击新站点，并访问以选择您的存储库。您的构建设置会自动从模板中的netlify.toml填写。要输入您的环境变量，请单击“显示为高级” ，然后单击新变量，然后填充键输入为NEXT_PUBLIC_CHEC_PUBLIC_KEY ，并使用您的公共密钥输入值输入。您可以在设置下的CHEC仪表板中访问您的API键，然后导航到开发人员选项卡以复制公共密钥
现在继续单击“部署站点”以查看您的实时网站！
此命令将从github下载此示例项目，并在您的计算机上初始化。之后，您将免费编辑下载的代码并与Commerce.js一起玩。
步骤1。安装CHEC CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cli步骤2。创建一个演示商店
chec demo-store
当提示从列表中选择演示存储时，请选择“ Commercejs-Nextjs-Demo商店”。此命令还将某些示例数据播种到您的CHEC帐户。有关更多信息，请参阅CHEC CLI文档。
由于该项目是一个完全露面的店面，展示了自定义设计和用户流，因此，如果您在Chec仪表板上自定义数据，您会遇到某些警告。一个gotcha与UI中的类别数据：类别特征图像在CHEC API中添加为元数据。如果添加新的或编辑种子样本类别数据，则可以通过在public/images/collection下替换图像资产来自定义类别特征图像。文件名需要保持不变。如果您打算更改文件名或添加新类别，则需要添加新的元数据。该应用程序将期望以下库存设置以构建和渲染组件，因此，如果您想在后端中自定义库存，请确保您：
public/images/collection下替换图像特征图像该演示商店使用Commerce.js提供的一系列功能，并由Chec仪表板提供动力。
购物车使用Commerce.js Cart API。购物车持续长达30天，而Commerce.js会自动记住访客的购物车。
Commerce.js提供了许多用于简化结帐实现的工具。此演示商店中的结帐使用：
Commerce.js提供了内置功能，用于支持客户登录，而无需任何服务器端代码。该演示商店具有现有的客户登录页面，并提供有关以前订单的详细信息。客户信息还用于预先填充结帐，并提供已知的客户详细信息。
该演示存储盒配置为CHEC“测试网关”，该店里在测试您的店面时提供了方便的付款选项。此外，如果在Chec仪表板上配置条纹，则包括条纹元素支持。
commerce.js <>条纹集成文档
您必须按照提供的说明在Chec仪表板中启用条纹。您可以添加沙盒键以进行条纹，并使用Sandbox Chec公共API密钥来测试条纹。 CHEC公共API密钥和条纹“可发布”键均在.env文件中配置。请参阅“手动设置和NetLify部署”的第二步
分叉此项目以根据需要自定义和扩展演示。以下是您可以做什么的一些想法和可以采用电子商务的方向。
