使用NextJS和商业层演示商店建立电子商务商店
#javascript #网络开发人员 #nextjs #ecommerce

您是否曾经想过学习如何作为开发人员建立电子商务网站？别再看！在本文中，我将带您完成使用可合并的商业API，Micro-Frontends和The Commerce Lays NextJS Demo Store Project构建时尚，现代和用户友好的会议赃物数字商店的过程。借助此功能强大的工具，您将能够创建一个为成功而优化的视觉和功能性国际电子商务网站。我将向您展示如何设置商店，添加商业数据并立即部署您的网站。让我开始！

A screenshot of the final demo store

先决条件

  1. 需要一些JavaScript，命令行和API知识。
  2. 工作编程IDE（我使用VSCODE；您也可以尝试）。
  3. 稳定的互联网连接。
  4. 可选，您可以研究这些data models - 了解关键的商务层API实体，它们的相互关系和常见用法。

综合商务简介

在我们继续之前，让我们理解概念的含义。在此之前，电子商务网站是通过单片架构构建的，其中所有组件（前端，后端，内容和商业数据）都耦合到一个系统中。随着时间的流逝，这种方法构成了与速度，灵活性，可伸缩性，安全性，模块化等相关的不同弱点。最重要的是，工程团队中不同的子团队很难有效地建立开发和协作，对于糟糕的开发人员体验。所有这些弱点直接影响电子商务业务的销售和客户保留部分，情况并非如此。因此，有一种更好的方法的兴起，可以为所有团队（前端，后端，内容等）和有效的产品开发流提供独立和不可知论的设置。这种方法称为“可综合商业”，允许更好地开发人员体验，每个团队的创造力和创新空间，更多地适应新市场机会的空间，最终，客户满意度，收入增加和客户保留。

Composable commerce允许开发人员根据需要审查，选择和利用各种可用的商务解决方案，以满足工程团队不同子团队中的特定业务需求。开发人员可以通过从API-first solutions，无头解决方案，可组合微服务甚至微额定值中选择最佳的工具来组成开发堆栈。如果这些术语中的任何一个都不熟悉，则可以快速进行Google搜索以了解有关它们的更多信息。通常，可组合的商务解决方案包括：

  • 从后端逻辑解耦的前端演示层。
  • 针对特定业务需求的个人组件（自主开发，部署和管理）。
  • 连接这些单个组件的API。
  • 与可靠的API优先外部服务集成。
  • SaaS和云计算服务。
  • 与Webhooks之间共享应用程序之间的实时数据。
  • 在现有数据和可组合体系结构之上构建独立且不可知论的内部应用程序的可能性。

可组合商业架构的美感是，您可以在客户想要的任何地方分发电子商务服务（在移动，网络，智能设备，CLIS等上）。对于品牌和开发人员来说，选项很多。例如，您可以像使用dropin library购买静态HTML网站一样容易，以便使用dropin library为某些交易功能供电，或者使用商业平台和诸如Demo Store Project（我们将在此工作）构建功能齐全的电子商务网站（我们将在此方面做到这一点）文章！）。

Illustration of an ecommerce website showing components powered by commerce APIs

入门

演示商店项目是无需第三方服务的静态电子商务解决方案，因此您可以通过不同级别的自定义轻松量身定制自己的。因此，即使内容也被存储为JSON文件。演示商店附带：

  • 具有分类法和分类单元的完整产品目录管理。
  • 单产品变体管理。
  • 多语言功能，使国际上的销售更加容易。
  • 带有刻面搜索的内置搜索引擎（过滤后的搜索）。
  • 商业层API提供的一组广泛的功能（多个货币价格清单，支持多个股票位置和履行策略的库存模型，特定于市场的支付网关，交货选项，运营商帐户等）。

A screenshot of the demo store's product page

在下面的部分中，我向您展示如何使用演示商店项目设置和配置自己的电子商务商店。准备好？让我走！

获得您的API凭据

Demo Store项目由Commerce Lease供开发人员和品牌的Composos Commerce API提供动力，您可以用来构建国际电子商务网站来处理数百万个订单。所有惊人的API资源，NextJS，打字稿和其他工具都用于构建演示商店电子商务项目。您可以探索这些Postman collections来测试特定资源，并查看它们如何工作。首先，必须使用OAuth2持有人令牌对商业层API的所有请求进行身份验证。您需要使用有效的应用程序类型作为客户端执行授权流以获取访问令牌。每种应用程序类型都有其用法，身份验证流和权限。可以使用以下表中描述的可用授权赠款类型对应用程序类型进行身份验证：

：

A screenshot of the application types table comparison

请创建一个商业层帐户here，按照入门教程来创建组织，然后阅读this guide以学习如何创建sales_channel和integration应用程序类型。创建它们后，保存组织slug，基本端点以及生成的CLIENT_ID和clientSecret凭据â€，我们将使用它来配置演示存储并播种一些演示数据。

安装和配置演示商店

演示存储项目是一个使用demo-store-core存储库作为git submodule的GitHub模板。这将保留默认演示商店的功能，外观和感觉。因此，您不必关心整个源代码，而是关注您的数据/内容，并且仅通过运行git submodule update --remote && npm install命令即可轻松获得免费更新，而几乎没有风险。请按照以下步骤开始：

单击github上demo-store主页的“使用此模板”按钮，如下屏幕截图所示。

A screenshot of the "use template" button on GitHub

运行以下命令将叉子存储库克隆到您的本地计算机并安装所需的依赖项：

git clone <your-repository-url> my-new-demo-store
cd my-new-demo-store
git submodule update --init
npm install

运行以下命令将所有必需的环境变量和数据文件复制到您的演示存储中：

cp -r ./demo-store-core/packages/website/data/json ./data/json

cp -r ./demo-store-core/packages/website/locales ./data/locales

cp -r ./demo-store-core/packages/website/config ./config

创建一个.env.local文件并添加以下变量，包括您先前创建的sales_channel应用程序凭据（客户端ID和基本端点）：

SITE_URL=http://localhost:3000
NEXT_PUBLIC_CL_CLIENT_ID=coF7ofOKxTlbYfN...
NEXT_PUBLIC_CL_ENDPOINT=https://your-demo-store.commercelayer.io

NEXT_PUBLIC_JSON_DATA_FOLDER=../../../data/json/
NEXT_PUBLIC_LOCALES_DATA_FOLDER=../../../data/locales/
NEXT_PUBLIC_CONFIG_FOLDER=../../../config/

带有演示数据的种子组织

要创建一个电子商务商店，您需要向组织添加一些商业资源。假设这是您第一次这样做。在这种情况下，您可以轻松地使用演示数据自动播种组织，并使用它来了解所需的关键商业资源。准备好后，您可以为您的电子商务商店添加实际数据。请按照以下步骤进行播种，以播种您新创建的商业层组织：

使用命令安装Commerce Layer CLI（这将使您访问cl命令）：

npm install -g @commercelayer/cli

or

yarn global add @commercelayer/cli

使用命令安装seeder plugin和imports plugin：

cl plugins:install seeder
cl plugins:install imports

使用您先前创建的integration应用程序凭据登录CLI，例如：

cl applications:login \
  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... \
  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... \
  --organization your-demo-store \
  --alias cli-admin

运行下面的命令，以使用商务层建立多​​市场电子商务所需的所有资源（包括市场，SKUS，价格，价格，库存，股票位置等）：

npm run seeder:seed -ws --if-present

如果以上命令失败了错误（通常是由于Internet不稳定），则可以使用命令将组织播种（但是此过程将需要更多时间）：

cl seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/

data/json/countries.json文件包含您的电子商务商店可用国家 /地区的列表。选择您想开始的国家，并用组织的有效市场范围替换了"market": xxxxx的所有发现（您可以在您之前创建的sales_channel应用程序中找到这些发现）。

现在，您可以启动开发服务器并访问http://localhost:3000，以便像这样预览您的电子商务商店：

npm run dev

A screenshot of the demo store's search page

访问主页时，您必须首先选择一个国家。例如，当您选择美国时，您将被重定向到koude13 Path，该路径将通过英语内容翻译从美国市场上返回美国市场上的购物体验。例如，将语言更改为法语，将重定向到http://localhost:3000/fr-US页面。将该国更改为意大利将从欧洲市场上的商业层返回购物体验，并将其重定向到http://localhost:3000/fr-IT页面。您可以为其他国家和语言玩耍。

这是一个功能齐全的国际电子商务网站，在短短几分钟内，开发工作就有多市场设置，刻痕搜索，购物车和结帐。另外，如果您已经有具有内容的现有CMS，则仍然可以使用它来生成所需的内容JSON文件（我们将向您展示如何在后续教程中显示）。现在，您可以继续进行商务层中每个市场的交易更改，您的演示商店将向您的用户返回正确的体验。这很酷吗？

在下一节中，您将通过自定义商店并添加更多翻译，页面，国家和其他商业资源来学习如何做更多的事情。

定制您的演示商店

Demo Store项目围绕着三个主要的数据元素构建，该数据元素存储在JSON文件中，以使其与您可能想添加的任何第三方服务相解配。要自定义您的商店，您必须创建和管理这些文件。

  1. content JSON文件位于data/json/目录中，带有不同的结构化文本和图像内容（这是完成代码的a sample）。

  2. locale JSON文件位于data/locales/目录中，带有一系列语言翻译文件（这是带有法语和意大利翻译的成品代码中的a sample。

    <）。 /li>

  3. 配置文件位于config/目录中skus）。

完成任何更改后，请始终确保通过运行命令来检查所有内容是否正确：

npm run test:data

您可以查看the finished code，以查看Demo Conference Swag电子商务网站中添加的所有额外页面和翻译更改。另外，如果您需要完全自定义您的商店（行为，UI，UX等），那么您要做的就是分叉包含源代码的demo-store-core存储库，请遵循指令以本地设置内容并配置它如前所述。

部署演示商店

在使用自己喜欢的托管平台部署商店之前，您需要做两件事（例如，Netlify，vercel，github页面，Cloudflare页面等）：

  1. 将您当前在.env.local中的所有环境变量添加到运行构建的部署服务中。

  2. 决定是否要在生产中使用静态站点生成（SSG）或服务器端渲染（SSR）。

下一个部分将概述每个选项所需的步骤。

静态站点生成（SSG）

除了在env文件中的其他变量外，添加此内容：

NEXT_PUBLIC_DATA_FETCHING=ssg

运行npm run export以创建应用程序的静态优化生产构建。

将demo-store-core/packages/website/out中的文件夹复制到您首选的静态托管。

服务器端渲染（SSR）

除了在env文件中的其他变量外，添加此内容：

NEXT_PUBLIC_DATA_FETCHING=ssr

将部署服务中的输出目录设置为demo-store-core/packages/website/.next。

设置npm run build作为您的构建命令，以创建应用程序的优化生产。

CI/CD部署

如果直接从GitHub或GitLab存储库设置CI/CD部署，则可以使用相同的步骤和选项。例如，您可以使用SSG这样的NetLify创建一个netlify.toml文件：

[build]
  command="npm run export"
  publish="demo-store-core/packages/website/out"

[build.processing]
  skip_processing = true

[build.environment]
  NEXT_PUBLIC_JSON_DATA_FOLDER="../../../data/json/"
  NEXT_PUBLIC_LOCALES_DATA_FOLDER="../../../data/locales/"
  NEXT_PUBLIC_CONFIG_FOLDER="../../../config/"

[template.environment]
  SITE_URL="https://your-demo-store.netlify.app"
  NEXT_PUBLIC_CL_CLIENT_ID="coF7ofOKxTlbYfNNe..."
  NEXT_PUBLIC_CL_ENDPOINT="https://your-demo-store.commercelayer.io"

或vercel.json for vercel for ssr喜欢的文件：

{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "demo-store-core/packages/website/.next",
  "build": {
    "env": {
      "ENABLE_EXPERIMENTAL_COREPACK": "1",
      "NEXT_PUBLIC_DATA_FETCHING": "ssr",
      "NEXT_PUBLIC_JSON_DATA_FOLDER": "../../../data/json/",
      "NEXT_PUBLIC_LOCALES_DATA_FOLDER": "../../../data/locales/",
      "NEXT_PUBLIC_CONFIG_FOLDER": "../../../config/",
      "SITE_URL": "https://conf-swag-demo-store.vercel.app",
      "NEXT_PUBLIC_CL_CLIENT_ID": "coF7ofOKxTlbYfNNe...",
      "NEXT_PUBLIC_CL_ENDPOINT": "https://your-demo-store.commercelayer.io"
    }
  }
}

ps：如果您使用此选项，请确保您的商务层API凭据是私有的。 netlify.toml或vercel.json文件中的API凭据仅应添加到私有存储库中。您应始终将API凭据直接添加到您的部署服务中。我仅出于教育目的将我的存储库添加到存储库中。

结论

那是一个包裹！

我希望您发现该教程有用，并了解了可组合商业和国际网站的工作方式。通过进行更多研究，自定义电子商务商店，与其他第三方服务集成，为您的商务层组织添加更多的商务数据，并探索商务层的其他developer tools套件，从而随意扩展知识。您可以继续使用该项目开始销售会议赃物或任何产品，并免费接收订单（由商业层提供免费的Developer plan）ð。

。

我也很喜欢看到您的构建，因此请随时分享您的构建的内容，并让我知道您对评论部分或Commerce Layer's Slack community中的教程的看法！