Shopify技术问询：能否允许登录用户从账户页编辑客户Metafield？

嘿，我看到你在尝试让登录客户编辑自己的c_f.proxy元字段，首先得指出一个核心问题——你当前表单提交到/admin/路径是行不通的！这个端点是给店铺管理员用的，普通登录客户没有权限访问，会直接返回403禁止错误。下面我给你两套完整的可行方案，你可以根据自己的需求选择：

这是Shopify官方推荐的前端操作客户数据的方式，更灵活且兼容未来版本。

1. 先修正你的表单结构 #

去掉action和method属性，我们用AJAX来处理提交，同时确保输入框默认显示当前元字段的值：

<form id="custmeta">
  <!-- 隐藏字段存储客户ID，从Liquid变量获取 -->
  <input type="hidden" id="customer_id" value="{{ customer.id }}" />
  <!-- 元字段输入框，默认填充现有值，没有则为空 -->
  <input 
    type="text" 
    id="proxy_input" 
    name="proxy" 
    placeholder="输入你的代理地址" 
    value="{{ customer.metafields.c_f.proxy | default: '' }}"
  />
  <button type="submit">保存修改</button>
</form>

2. 编写jQuery AJAX处理代码 #

你需要先在Shopify后台创建一个Storefront API客户端，拿到公开客户端令牌（这个可以安全地放在前端代码里），然后添加以下JS代码：

$('#custmeta').on('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  
  const customerId = $('#customer_id').val();
  const proxyValue = $('#proxy_input').val().trim();
  
  // 替换成你的店铺域名
  const apiUrl = 'https://你的店铺域名.myshopify.com/api/2024-07/graphql.json';
  // 替换成你的Storefront API公开令牌
  const storefrontToken = '你的Storefront客户端令牌';
  
  // 构建GraphQL修改请求
  const mutation = `
    mutation updateCustomer($input: CustomerUpdateInput!) {
      updateCustomer(input: $input) {
        customer {
          id
          metafields(namespace: "c_f", keys: ["proxy"]) {
            key
            value
          }
        }
        userErrors {
          field
          message
        }
      }
    }
  `;
  
  const variables = {
    input: {
      id: `gid://shopify/Customer/${customerId}`,
      metafields: [
        {
          namespace: "c_f",
          key: "proxy",
          value: proxyValue,
          valueType: "STRING" // 根据你的元字段类型调整，这里是字符串
        }
      ]
    }
  };
  
  // 发送AJAX请求
  $.ajax({
    url: apiUrl,
    type: 'POST',
    contentType: 'application/json',
    headers: {
      'X-Shopify-Storefront-Access-Token': storefrontToken
    },
    data: JSON.stringify({ query: mutation, variables: variables }),
    success: function(response) {
      if (response.data.updateCustomer.userErrors.length === 0) {
        alert('代理地址修改成功！');
        // 可选：不需要刷新页面，直接更新页面显示的元字段值
        // $('#some-display-element').text(proxyValue);
      } else {
        // 收集错误信息并提示
        const errorMsg = response.data.updateCustomer.userErrors.map(err => err.message).join(', ');
        alert(`修改失败：${errorMsg}`);
      }
    },
    error: function(xhr, status, error) {
      console.error('请求出错:', error);
      alert('修改失败，请稍后重试');
    }
  });
});

3. 关键注意点 #

• 确保你创建的c_f.proxy元字段允许客户编辑，在Shopify后台配置元字段时，要确认权限设置正确。
• Storefront API令牌需要在Shopify后台的「应用和销售渠道」→「开发应用」→「创建应用」→「Storefront API」中开启并获取。

如果你不想折腾GraphQL，也可以用Shopify的/account端点来快速实现，这个方法更简洁，但未来可能会被逐步替代：

1. 表单结构和方案一一样 #

用同样的表单代码即可。

2. jQuery处理代码 #

$('#custmeta').on('submit', function(e) {
  e.preventDefault();
  
  const proxyValue = $('#proxy_input').val().trim();
  
  $.ajax({
    url: '/account',
    type: 'POST',
    data: {
      '_method': 'PUT', // 模拟PUT请求，因为HTML表单不支持PUT
      'customer[metafields][c_f][proxy]': proxyValue
    },
    success: function() {
      alert('修改成功！');
      // 刷新页面以更新元字段显示
      location.reload();
    },
    error: function() {
      alert('修改失败，请检查后重试');
    }
  });
});

这个方法利用了Shopify的客户账户更新端点，通过_method=PUT来模拟PUT请求，直接提交元字段数据即可，无需额外配置API令牌。

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