将 WhatsApp 集成到 Shopify

作为大中型企业的 Shopify 开发者，您也明白与顾客的沟通畅通无阻非常重要。为实现这一点，您可以利用 WhatsApp Business 开放平台来帮助您向成千上万的顾客自动发送消息，并随着顾客数量的增长有效率地扩大此规模。

本教程会逐步介绍以下流程：将 WhatsApp 与 Shopify 连接，然后根据顾客在店铺内触发的事件（例如将商品加入购物车或提交订单）向其发送 WhatsApp 通知消息。在此流程中，我们会用到由 Meta 托管的云端 API。

前提条件

如要按照本教程操作，您将需要：

• 安装 Node.js 和 npm
• 在 Shopify 上创建店铺，并且设置商品和支付处理方法
• 在 Meta 开发者上注册开发者帐户、设置业务应用，并且选择 WhatsApp Business 商业帐号。

完成最后一步后，系统将提供临时访问口令。在本教程的余下部分，您将需要用到此访问口令，因此请妥善保管。

当您准备好以上事项后，便可继续按照本教程的余下部分操作。

在 WhatsApp 上创建消息模板

WhatsApp 消息模板有助您创建多种消息格式。如此一来，当顾客为您的应用授予权限，同意应用向其发送消息后，您便可重复使用这类消息模板向顾客发送消息。

请按照以下步骤，创建订单通知消息的模板：

• 登录商务管理平台并选择您的业务帐户。
• 点击页面左上角的三条线图标，然后点击 WhatsApp 管理工具。
• 将鼠标移到侧边导航栏的帐户工具图标上方，然后点击消息模板。
• 点击页面右上角的创建模板。
• 在系统随后显示的页面中，选择交易选项作为您的类别，然后为模板命名（在本例中我们将其名为“order_confirmation”）并选择语言。

• 点击继续，进入模板编辑器。

我们现在已经设置好 order_confirmation 模板，是时候敲定其大概内容了。以下是系统会向顾客显示的消息：

• 我们已收到您的订单！

• [customer’s name]，您好：

• 感谢惠顾。

• 我们正在处理您的订单（23190）。您的包裹将在接下来的 2 至 3 个工作日（假日和周末除外）内配送。

• 当包裹配送时，我们会向您发送另外一封邮件。

在模板编辑器中，为标题部分选择文本。这样“我们已收到……”这一段将成为标题，而消息余下的内容将复制到正文部分。

接着，点击“正文文本”栏下方的添加变量两次，以添加两个变量。复制并粘贴第一个变量“{{1}}”，以替换顾客姓名。接着，复制并粘贴第二个变量“{{2}}”，以替换括号内的订单编号。

完成后，您的消息应如下所示。您可以在同一页面的预览区域检查编辑结果。

点击提交以保存消息模板。

现在模板已经就绪，您可以使用 WhatsApp Business 开放平台在 Shopify 管理面板中创建 Webhooks，并指定当顾客提交订单时，由哪个应用程序自动向顾客发送消息。

使用 Webhooks 向 Express 服务器发送通知

假设您希望每当顾客通过您的 Shopify 店铺提交订单时，您都能向顾客自动发送消息。为此，您可以选择每 5 分钟左右查看一下店铺有没有新订单。然而，频繁向店铺发送 API 请求的做法非常低效，而如果发现没有收到新订单，就更显得徒劳无功。

如果能使用 Webhooks 来监听店铺的“订单创建”事件，并在顾客提交订单时通知您，这种做法的效率更高。

以下是创建“订单创建”Webhooks 并将其映射到 Express 服务器的基本步骤。

创建 Node.js 项目

首先，为您的项目创建一个名为“whatsapp-demo”的文件夹。

接着，在“whatsapp-demo”中启动命令终端 cd，并执行以下命令以初始化 Node.js 项目：

npm init -y

运行以下命令以安装 express（用于在 Node.js 上创建网站服务器的数据库）：

npm i express

现在您已设置好开发环境，接下来便是创建 Express 服务器。

创建 Express 服务器

在 whatsapp-demo 文件夹中创建一个文件并将其命名为“test.js”。使用您喜欢的源代码编辑器来打开此文件，然后在当中复制并粘贴以下代码：

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

通过上述代码，您便可设置好基本的 Express 服务器，以便在 Webhooks 发送“订单创建”通知时，于服务器终端显示相关消息。

在将此服务器映射到 Shopify Webhooks 前，您必须先设置隧道。

创建 HTTPS 流量隧道

在设置 Webhooks 时，Shopify 会要求您提供一个公开网址，以便作为所发送通知的目标地址。

如果您是在公开服务器上按照本教程操作，请使用此服务器的网址。但如果您是在本地服务器上按照本教程操作，则需使用支持公开访问的 HTTPS 网址创建隧道。

首先，执行以下命令以安装 ngrok：

npm install -g ngrok

接着，启动另外一个终端窗口并运行以下命令，以获取本地服务器的隧道网址：

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

您将需要在后续步骤中使用此网址，因此请将其记下。请注意，如果您重新开启此客户端，便会获得新的网址，并且需要更新对该网址的所有引用内容。

在 Shopify 中创建 Webhooks

进入 Shopify 店铺的管理面板，前往 Settings（设置）> Notifications（通知）。进入相应页面后，向下滚动到 Webhooks 并点击 Create webhook（创建 Webhooks）。

添加用于“订单创建”的 Webhooks，并且指定您在上一部分中创建的隧道网址或公开网址。

使用 index.js 节点在另一个终端上运行您的本地服务器，然后点击 Send test notification（发送测试通知）。

如果一切正常，您将在服务器终端收到以下消息：“太好了，我们收到了订单。”

现在，您已在 Shopify 店铺与 Express 服务器之间创建了可运作的连接。接下来，您将完成以下设置：在顾客提交订单后向其发送 WhatsApp 消息模板。

以“order_notification”模板发送自定义消息

首先，在您的终端上运行以下命令以安装 Axios：

npm i axios

您要使用 Axios 发出 POST 请求，以向顾客发送 WhatsApp 消息。

安装 Axios 后，在名为“customMessage.js”的项目文件夹内创建另外一个文件，然后通过以下代码将 Axios 和 Express 导入该文件：

const axios = require('axios').default
const express = require('express')
const app = express()

接下来创建路径，以通过运行以下命令来处理由 Shopify 发出的订单创建通知：

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

当 Shopify 收到订单并据此调用 /webhooks/orders/create 时，系统会将订单详情发送到 res（async 回调函数的第二个参数，属于 JavaScript 对象）中的路径。

然后，从订单详情中获取顾客的手机号、名字和订单编号，并使用这些信息来构建 API 请求参数：

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

上述对象包含完成请求所需的所有参数。确保在此对象中指定的模板名称与您之前在 WhatsApp 商务管理平台中创建的模板名称相符。

接着，创建包含嵌套的 headers 对象的 config 对象。在 headers 对象中，将 WhatsApp 访问口令设为 Authorization 的值（将 ACCESS_TOKEN 替换为访问口令），并将 application/json 设为 Content-Type 的值：

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

接下来，使用 Axios 创建 POST 请求，并以参数形式传递 config 对象和 data 对象。嵌套 then 和 catch 方法以显示结果（如果承诺失败，则会显示错误消息）：

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

使用 WhatsApp 应用面板内的 WhatsApp Business 编号替换 YOUR_WABA_ID，并使用兼容的云端 API 版本（默认版本为 v15.0）替换 API_VERSION

应用设置完成！

如要测试应用设置，您应该继续运行 ngrok 隧道，而且需要在另外一个终端内启动 Express 服务器：

node customMessages.js

其他 Shopify 事件

除了订单提交外，Shopify 还提供用于不同事件的超过 50 种 Webhooks。您可以订阅购物车创建和更新、商品收藏夹创建和更新、付费操作成功和失败等各种其他事件。

如要使用任何这些 Webhooks，请按照与上述类似的模式，在 Shopify 管理面板中新建 Webhooks，并在 Express 服务器中将有关主题注册为路径。

如各位所见，WhatsApp Business 开放平台可基于您 Shopify 店铺上的事件，帮助您以手动或编程的方式与顾客顺畅沟通。

Shopify 的 WhatsApp 集成让您可以实时批量地向顾客发送消息。您可以自动（例如基于事件）或手动发送消息。此功能不仅易于设置，而且可以轻松扩展。通过将 WhatsApp 与 Shopify 连接，您可以与顾客保持一致且有效的沟通，带来理想效果。

如需进一步了解如何将 WhatsApp 集成到应用和项目中，请参阅我们其他的开发者教程。