WooCommerce 集成

WooCommerce是WordPress平台上最受欢迎的电子商务插件，它让任何WordPress网站都能轻松转变为功能完整的在线商店。作为WordPress（全球最流行的内容管理系统，市场份额超过40%）的官方推荐电商解决方案，WooCommerce提供了产品管理、订单处理、支付集成等完整的电商功能。随着电商网站对性能和用户体验的要求不断提高，业界普遍采用Gatsby等现代静态站点生成器来优化WooCommerce网站，通过将动态内容预渲染为静态页面，在保持内容管理便利性的同时，显著提升网站性能和用户体验。
﻿
概览
本文主要介绍如何基于WordPress平台，将WooCommerce与Gatsby框架结合，构建高性能的电商网站。在这个架构中，WordPress作为内容管理系统的核心，WooCommerce提供电商功能，Gatsby负责性能优化。通过这种组合，您可以同时获得WordPress的内容管理能力、WooCommerce的电商功能以及Gatsby的性能优势，为您的客户提供更好的购物体验。本文将详细介绍如何实现WordPress + WooCommerce与Gatsby的集成，以及如何通过EdgeOne Pages进行部署和加速。
﻿
快速入门
EdgeOne提供了完整的WordPress + WooCommerce + Gatsby集成方案，您只需要下载并配置数据库即可快速部署：
WordPress + WooCommerce后端：https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git﻿
Gatsby前端模板：https://edgeone.ai/pages/templates/gatsby-woocommerce-template﻿
下载这两个模板并按照说明部署，即可快速搭建电商网站。
WooCommerce集成主要包含以下三个步骤：配置WordPress和WooCommerce、使用Gatsby生成静态页面、部署到EdgeOne Pages。您可以按照下文的步骤手动配置。
﻿
配置WordPress和WooCommerce
您可以通过以下两种方式配置WordPress和WooCommerce：
方式一：自行部署WordPress（本文推荐的方式）
EdgeOne提供了一个预配置好的WordPress + WooCommerce Docker模板，让您能够快速完成自行部署。这个模板已经集成了MySQL数据库和配置好的WooCommerce，并且预装了以下必要的插件：
Advanced Custom Fields - 用于自定义字段管理
WooCommerce - 电商功能核心
JWT Authentication for WP-API - REST API认证
WPGraphQL - GraphQL API支持
WPGraphQL for ACF - ACF的GraphQL支持
WPGraphQL for WooCommerce (WooGraphQL) - WooCommerce的GraphQL支持
WPGraphQL JWT Authentication - GraphQL API认证
首先，克隆项目到本地：
git clone https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git
cd wp-ecommerce-docker-demo
如果您需要在部署机器上进行本地验证，需要在项目根目录创建 .env 文件并配置以下环境变量：
# 数据库配置
WORDPRESS_DB_PASSWORD=wordpress123
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_PASSWORD=wordpress123
﻿
# GraphQL认证配置
GRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key
﻿
# 站点配置
WP_HOME_URL=http://localhost  # 替换为您的站点URL
WP_DOMAIN=localhost           # 替换为您的站点域名
WP_HOST=80                    # 替换为您的站点端口
配置完成后，使用Docker启动项目：
docker-compose up -d
服务启动完成后，您可以通过访问 http://your.site.ip/wp-admin/admin.php 进入WordPress管理界面。
注意：此模板已预装MySQL数据库和配置好的WooCommerce，无需额外配置。首次登录后请及时修改默认密码。
在WordPress后台，您需要创建以下三个页面：
highlight - 用于展示特色产品
promotion - 用于展示促销活动
sample-page - 用于展示示例内容
﻿
创建页面后，需要配置Advanced Custom Fields：
1. 进入WordPress后台的"自定义字段"菜单
2. 点击"Tools"标签
3. 在"Import Field Groups"部分，选择并上传acf-export-2025-02-13.json文件（该文件位于wp-ecommerce-docker-demo模板项目的wordpress-data目录下）
﻿
4. 点击"Import"按钮完成导入
5. 导入完成后，进入"Field Groups"标签
6. 将导入的字段组与对应的页面类型进行关联配置
﻿
完成ACF配置后，您需要将Field Group配置到相应的页面上，我们按名称对应上即可，这样页面才能使用这些自定义字段。
接下来，让我们配置WooCommerce的商品数据。登录WordPress管理界面后，点击左侧菜单的"WooCommerce"，进入WooCommerce管理控制台。在这里，您可以看到所有需要配置的数据项：
﻿
由于我们使用WordPress主要是为了提供数据接口，而前端页面将通过Gatsby项目来实现，因此您可以跳过"Customize your store"（自定义商店）的配置。请重点关注产品、订单、支付等基础功能的配置。如果您对WooCommerce的具体配置有疑问，可以参考WooCommerce官方文档。
这里我们不对数据配置的具体细节作详细说明，您可以根据自己的需求在WooCommerce管理界面中进行配置。
﻿
数据验证
配置完成后，我们需要验证WordPress和WooCommerce的API是否能正常提供数据。由于我们已经安装了WPGraphQL和WooGraphQL插件，这里使用GraphQL方式进行数据验证。
1. WordPress数据验证
query GetPages {
  pages(first: 1) {
    nodes {
      id
      title
      content
      acf {
        hero_title
        hero_description
        featured_products
      }
    }
  }
}
示例返回数据：
{
  "data": {
    "pages": {
      "nodes": [
        {
          "id": "cGFnZS8x",
          "title": "Highlight",
          "content": "页面内容...",
          "acf": {
            "hero_title": "Welcome to Our Store",
            "hero_description": "Discover our featured products",
            "featured_products": [1, 2, 3]
          }
        }
      ]
    }
  }
}
2. WooCommerce数据验证
query GetProducts {
  products(first: 1) {
    nodes {
      id
      name
      type
      status
      price
      regularPrice
      salePrice
      description
      images {
        nodes {
          id
          sourceUrl
          altText
        }
      }
      categories {
        nodes {
          id
          name
          slug
        }
      }
    }
  }
}
﻿
示例返回数据：
{
  "data": {
    "products": {
      "nodes": [
        {
          "id": "cHJvZHVjdC8x",
          "name": "Premium Headphones",
          "type": "SIMPLE",
          "status": "PUBLISH",
          "price": "199.99",
          "regularPrice": "249.99",
          "salePrice": "199.99",
          "description": "High-quality wireless headphones with noise cancellation.",
          "images": {
            "nodes": [
              {
                "id": "cG9zdC8y",
                "sourceUrl": "https://your-store.com/wp-content/uploads/headphones.jpg",
                "altText": "Premium Headphones"
              }
            ]
          },
          "categories": {
            "nodes": [
              {
                "id": "Y2F0ZWdvcnkvMQ==",
                "name": "Electronics",
                "slug": "electronics"
              }
            ]
          }
        }
      ]
    }
  }
}
您可以通过访问 http://your-wordpress-url/graphql 来测试GraphQL接口。如果能够正常获取上述示例中的数据，说明GraphQL接口配置正确，可以提供给外部访问。
﻿
方式二：使用WordPress.com官方托管（新手使用）
1. 访问 WordPress.com，注册并创建新站点
2. 在站点管理后台，进入"插件" > "安装插件"
3. 搜索并安装“方式一”在WordPress安装的所有插件
无论是托管部署还是自己部署，WordPress作为无头CMS时的配置流程基本类似，都是用来管理内容并提供API接口，我们只需要参考上面的“方式一”的配置即可。另外，虽然托管部署省去了服务器维护和环境搭建，但现在各大云服务对WordPress支持很好，自己部署其实也很方便。
﻿
支付回调配置
在开始生成静态文件之前，我们需要特别说明一下支付回调的配置。这是因为我们的前端是使用Gatsby生成的静态网站，而支付流程需要实时处理支付状态更新。WooCommerce支持Stripe、PayPal、Square等国际支付网关，您只需要在WooCommerce后台配置相应的支付方式，设置必要的API参数和回调地址即可。
﻿
对于前端查询支付状态，WooCommerce提供了REST API、GraphQL和Webhook三种方式。由于EdgeOne提供的Gatsby模板使用GraphQL进行数据查询，这里以GraphQL方式为例：
query GetOrderStatus($id: ID!) {
  order(id: $id) {
    status
    paymentMethod
    datePaid
  }
}
查询结果示例：
{
  "data": {
    "order": {
      "status": "completed",
      "paymentMethod": "paypal",
      "datePaid": "2024-03-20T10:30:00"
    }
  }
}
如果您需要了解更多GraphQL查询的细节，可以参考WPGraphQL文档和WooGraphQL文档。
﻿
生成静态文件
EdgeOne提供了基于Gatsby的静态站点模板，您可以通过以下命令获取：
git clone --depth 1 --single-branch https://github.com/TencentEdgeOne/pages-templates.git temp
mv temp/examples/gatsby-woocommerce-template .
rm -rf temp
cd gatsby-woocommerce-template
npm install
现在我来介绍一下项目中的关键配置点。
所有的GraphQL查询语句都位于src/queries/PagesQuery.js文件中，包括商品、订单、页面内容和ACF字段等查询。如果您需要自定义查询内容，可以在这里修改GraphQL查询语句。
﻿
支付相关的组件位于src/components/OrderSummary/OrderSummary.js文件中。在调用支付时，会配置以下关键信息：
await checkout({
  shipping: customer.shipping,
  billing: customer.billing,
  paymentMethod: 'cod',
});
这里配置了：
收货地址信息（shipping）
账单地址信息（billing）
支付方式（paymentMethod）
这个支付请求会调用src/api/api.js文件中的checkout对象，执行具体的支付操作。最终的GraphQL查询语句位于functions/common/queries/Checkout.js文件中，如果您需要修改支付逻辑，可以在这里进行更改。
﻿
如果您需要修改其他信息的接口交互，可以修改functions/common/queries目录下的其他文件中的GraphQL语句。
了解了项目的基本结构和关键配置后，让我们来看看如何启动项目。模板的启动非常简单，您只需要设置WP_URL参数指向您的WordPress站点地址即可。在部署到云端时，这个参数会作为环境变量配置。现在让我们先在本地验证项目。
在项目根目录创建 .env 文件，填入以下内容：
WP_URL=http://your-wordpress-url
GATSBY_ENV=dev
然后安装依赖并启动Gatsby项目，进入本地预览：
npm install
gatsby develop && edgeone pages dev --fePort=8000
注意：fePort参数需要与Gatsby的运行端口匹配，以确保跨域认证处理正常工作。
﻿
﻿
至此，我们已经完成了WordPress + WooCommerce内容管理系统的配置、前端模板的获取和本地环境的验证。接下来，我们只需要将代码部署到EdgeOne Pages，就可以让您的网站正式上线了。
﻿
部署到EdgeOne Pages
1、代码发布到 Git
将代码提交到git仓库即可完成部署。假设你已经创建了 gatsby-woocommerce-template 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .
git commit -m "Initial commit"
git push origin main
﻿
2、项目导入 Pages
提交完成后，如果你已经是EdgeOne Pages用户且已关联GitHub账户，访问 控制台 部署对应的项目即可。
﻿
﻿
3、添加环境变量
点击gatsby-woocommerce-template后，在准备部署界面点击"Environment Variables"，分别配置以下环境变量：
WP_URL：填入您的WordPress站点地址
GATSBY_ENV：设置为production
﻿
配置完成后，点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面：
﻿
至此，我们已经完成了WordPress + WooCommerce方案的完整部署流程。通过这个方案，你可以：
使用WordPress + WooCommerce管理内容和商品，享受其强大的CMS和电商功能
利用Gatsby生成高性能页面，获得极致的访问速度
通过EdgeOne Pages实现自动化部署，简化运维工作
获得全球CDN加速，提升用户体验
﻿
更多相关内容
查看更多WordPress集成方案：EdgeOne Pages提供的WooCommerce模板﻿
了解Gatsby更多功能：Gatsby官方文档﻿
探索WooCommerce更多功能：WooCommerce官方文档﻿
自定义网站样式：Gatsby样式指南﻿