以WooGraphQL建造无头商店:第五章

banner

抬头: 此教程涵盖较早的 WooGraphQL 发布, 并且不再更新 。 重写版本正在展开,

https://www.youtube.com/embed/nhlexP-KtSo (中文(简体) ).

目录

  1. 为您的无头电子商务应用程序设置文字通讯
  2. 创建和设置您的电子商务应用促进发展
  3. 使用 WooGraphQL 创建商店列表页面
  4. 创建用户登录和导航
  5. 创建产品页面和墨盒选项

欢迎来到我们关于创建无头电子商业应用程序的教程系列的第一部分! 这个系列是针对有兴趣设计一个强大的eCommerce应用程序的开发者设计的,辅以一个 伍商 使用 WPGraphQL 数据WPGraphQL 伍商号 (WooGraphQL) (中文(简体) ).。本章将引导您完成设置 WordPress 安装的进程,以准备这项工作。

为您的无头电子商务应用程序设置文字通讯

在我们潜入之前,有一些假设是有序的。 我们假设你们会跟随我们的向导 转动你们的WordPress环境 和我们一样 /backend 目录 演示仓库 从GitHub。 如果您已经准备了本地 WordPress 安装, 并配备了必要的依赖性和插件, 您可以提前跳过标题的段落 配置 WooGraphQL 设备。 。 。 。

我们要做的

  • 切开 wp-graphql-demo 还原
  • 启动嵌入器网络
  • 安装 + 激活 伍商
  • 出产出品.
  • 生成拖车页面、 退出和账户页面 。
  • 安装 + 激活 WPGraphQL 数据
  • 安装 + 激活 WPGraphQL 伍商号

列入示范存储库的WP环境的前提条件

  • 前一頁
  • 作曲家
  • Docker + Docker 组合

安装依赖关系并启动 Docker

要开始,打开一个终端到您选择的目录, 克隆寄存器并导航到 /backend 目录

git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backend

在拉出仓库后 我们应该在 /backend 目录。 这个教程我们不用 /frontend 目录可以忽略它。 现在从终点站出发 /backend 目录,运行以下命令:

composer install

依赖性安装后, 使用 Docker Compose 创建并启动 Docker 网络 :

docker-compose up

一旦Docker成功启动,您可以通过导航完成WordPress安装 http://localhost:8080/wp/wp-admin。 。 。 。

遵循提供的指示完成您的安装并登录到您的 WordPress 网站 。

激活插件和设置存储

现在WordPress网站已经启动运行,让我们启动必要的插件,建立我们的商店. 从您的 WordPress Dashboard 导航到插件页面并激活以下内容: 伍商, (中文(简体) ). WPGraphQL 数据,以及 WPGraphQL 伍商号。 。 。 。

如果这是新安装,WooCommerce应该自动生成 a Cart, (中文(简体) ). Shop,以及 Checkout 页面。

随着您的插件被激活,是时候为您的商店生成一些产品了. 为此,打开一个新的终端窗口(确保您的多克网络仍在另一个终端窗口运行)并导航到 /backend 演示的目录。 从这里运行以下命令:

composer generate-products 100

这个命令会自动为您的商店生产100个产品。 虽然这些产品的质量不是顶级的,但它们很适合测试和开发你的店面.

配置 WooGraphQL 设备

我们为我们的无头eCommerce应用程序设置WordPress的最后一步是配置WooGraphQL. 导航到 WordPress Dashboard 并进入 GraphQL > 设置 。 从这里选择 WooGraphQL 选项卡。

内部 WooGraphQL 设置, 查找 Enable User Session transferring URLs 设置和检查 Cart URL, (中文(简体) ). Checkout URL,以及 Account URL 选项。

启用此选项可以让 WooGraphQL 注册会话 将我们检查过的 URL 丢入 GraphQL 计划, 并打开会话 丢出结束点 。 默认此端点位于 https://our-site/transfer-session

别忘了点击“ 保存更改” 按钮来最终设定 !

拿着! 您的 WordPress 安装现已准备好, 用于开发您的无头电子商业应用程序 。 在下一期的这一系列辅导中, 我们将潜入设置我们的前端 反应下一个.js祝你编码愉快!

继续下一章



Leave a Reply

Your email address will not be published. Required fields are marked *