Shopify：创建自定义流程来创建客户（其他元字段）

Question

我想创建一个自定义表单供用户注册，因为我需要客户的生日。

所以我需要用户输入他的生日作为必填字段，并且我需要检查用户是否超过 18 岁。

然后在结帐时我还想再次确认用户是否已超过 18 岁。

我认为这将是为此创建自定义 Shopify 应用程序的最佳方法。

我创建了一个购物车结账验证，这样我就可以检查生日是否有效。

运行.graphql：

query RunInput {
  cart {
    buyerIdentity {
      customer {
        metafield(key: "birthday") {
          value
        }
      }
    }
  }
}

运行.ts：

export function run(input: RunInput): FunctionRunResult {
  const error = {
    localizedMessage: "Birthday not set.",
    target: "cart"
  };

  const errors: any = [];

  if (input.cart.buyerIdentity?.customer?.metafield?.value === undefined) {
    error.localizedMessage += input.cart.buyerIdentity?.customer?.metafield?.value ?? "{NO}";
    errors.push(error);
  }

  return {
    errors
  }
};

所以目前我在购物车中收到此错误消息，因为没有存入生日值。

现在我需要创建自定义表单供用户注册。我使用黎明主题中的 main-register.liquid 作为模板。我添加了生日输入并添加了一个名为

validateForm()

的验证方法。

这就是脚本的样子：

function validateForm() {
    var firstName = document.getElementById('RegisterForm-FirstName').value;
    var lastName = document.getElementById('RegisterForm-LastName').value;
    var password = document.getElementById('RegisterForm-password').value;
    var email = document.getElementById('RegisterForm-email').value;
    var birthday = document.getElementById('RegisterForm-birthday').value;

    var errorMessage = document.getElementById("error-message");

    errorMessage.hidden = true;
    
    if (!firstName.trim().length) {
      errorMessage.hidden = false;
      return false;
    }
    
    // all other checks if empty ....

    var record=birthday.trim();
    var currentdate=new Date();

    var currDay = currentdate.getDate();
    var currMonth = currentdate.getMonth() + 1;
    var currYear = currentdate.getFullYear() - 17;

    var aighteenStr = currDay + "-" + currMonth + "-" + currYear;
    var aighteen = new Date(aighteenStr);
    
    var birth = new Date(record);      

    console.log(birth);
    console.log(aighteen);

    if(birth > aighteen)
    {
        alert("Du musst über 18 Jahre sein, um einen Account erstellen zu können.");
        return false;
    }
    
    return true;
  }

我做了研究并发现了 createCustomer 函数/突变，但我不确定如何在这里实现它。

我还找到了这个教程，但是将我的凭据放入液体文件中看起来很奇怪。

关于如何调用该函数有什么建议吗？或者我需要采用不同的方法吗？

（我想到了不同的方法： 使用普通的 create_customer 表单并添加一个 ID 为 customer[note][birthday] 的新字段。 这在保存过程中有效，但如果用户年满 18 岁，则无需验证。 我也没有找到在结帐验证中检索该信息的方法，因为购物车中返回的客户模型只有元字段值，没有注释值（此处的信息））

Answer 1

创建用户注册自定义表单并将其与 Shopify 集成涉及几个步骤。以下是如何解决此问题的总体概述：

创建自定义注册表单：您已经通过修改 main-register.liquid 文件开始了此操作。确保您的表单包含名字、姓氏、电子邮件、密码和生日字段。确保生日字段在 HTML 中按要求标记。

客户端验证：您的 validateForm() 函数走在正确的轨道上。确保它检查所有必填字段均已填写、输入的生日有效且用户已年满 18 岁。

服务器端验证：虽然客户端验证对于流畅的用户体验非常重要，但验证数据服务器端以确保安全性和完整性也至关重要。您可以在提交表单时使用 Shopify 的 GraphQL API 执行服务器端验证。

集成Shopify API创建客户：验证表单数据后，您需要使用Shopify的API创建客户。您可以使用 Shopify 的 GraphQL 管理 API 中的 customerCreate 突变来创建客户帐户。这应该在服务器端完成，无论是在自定义应用程序中还是通过服务器端脚本编写。

在结账时处理年龄验证：您已经开始使用 run.ts 脚本来检查生日元字段是否存在。您可以扩展此脚本来验证客户是否年满 18 岁。如果没有，您可以在结帐过程中向用户显示错误消息。

关于 Liquid 文件中凭据的担忧，通常使用 Liquid 变量将数据从 Shopify 传递到 JavaScript 进行客户端处理。但是，API 密钥或密码等敏感信息绝不应该在客户端代码中公开。如果您需要从客户端 JavaScript 发出 API 请求，则应使用 Shopify 的 Storefront API，它允许您使用店面访问令牌对请求进行身份验证。

总之，您在创建自定义表单和客户端验证方面走在正确的轨道上。您需要与 Shopify 的 API 集成来处理服务器端验证和客户创建，然后扩展验证脚本以在结账时检查年龄。