Woocommerce访问商品页面时自动将商品加入购物车的实现方法

基础实现逻辑 #

核心流程都是先获取当前商品的唯一标识，再调用加购接口完成操作，你可以根据自己的技术栈选择前端或前后端配合的方案实现：

• 前端实现（单页/服务端渲染页面都适用）
  1. 页面加载完成后，先从URL路径中提取商品ID，例如示例链接http://www.example.com/product/abc中的abc就是对应商品的唯一标识，提取代码示例：

  // 路径分割提取商品ID
  const pathArr = window.location.pathname.split('/')
  const productId = pathArr[pathArr.length - 1]
  

  2. 先判断用户登录状态：未登录用户可以先将加购信息存在localStorage，登录后再同步到服务端；已登录用户直接调用后端加购接口即可
  3. 调用加购接口，接口请求成功后可以弹轻提示告知用户已加购，避免用户产生疑惑：

  // 页面DOM加载完成后触发逻辑
  document.addEventListener('DOMContentLoaded', async () => {
    const productId = window.location.pathname.split('/').pop()
    // 替换为你自己业务的加购接口地址即可
    const res = await fetch('/api/cart/add', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ productId: productId, quantity: 1 })
    })
    if (res.ok) {
      // 可自行添加toast提示逻辑
      console.log('商品已自动加入购物车')
    }
  })
  

• 后端实现（服务端渲染场景适用）
  1. 服务端接收到商品页访问请求时，直接从路由参数中解析出商品ID
  2. 从请求Cookie中获取用户登录态，验证通过后直接调用内部加购逻辑，把对应商品添加到该用户的购物车中
  3. 渲染商品页时直接把「已加购」状态返回给前端展示，不需要额外发起异步请求

注意事项 #

• 自动加购逻辑要做好重复请求拦截，避免用户刷新页面就重复加购多次，可在加购前先调用购物车查询接口，确认该商品还未加购再触发操作
• 建议给用户提供可关闭自动加购功能的入口，避免干扰正常用户的使用习惯，降低投诉率
• 有多SKU、多规格可选的复杂商品，建议默认选中第一个规格再加购，提前做好参数校验避免加购失败

内容的提问来源于stack exchange，提问作者NaFi