了解 BigCommerce 结帐表格何时加载的可靠方式
Reliable way of knowing when BigCommerce checkout form has loaded
我正在尝试监听表单何时加载到 BigCommerce 结帐页面上。
我们需要向页面添加地址验证（+ 禁用除第一个地址字段以外的所有字段，以便我们使用的地址验证服务自动填充它）。
地址验证服务的 JavaScript 在表单元素存在之前触发，因为 BigCommerce 结帐页面通过动态添加 HTML 到带有 JavaScript 链接的页面然后加载表单.
我正在考虑使用其中之一
- 轮询，以 200 毫秒为单位重复设置超时，直到某个已知元素存在为止
- 使用 MutationObserver 似乎可以做我想做的事情 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - 我可以控制 div 在其中加载表单，因此使用 mutation ovbserver 来侦听“子树”事件但阅读 MDN文档很清楚子树在触发时真正意味着什么 and/or
有什么建议吗？
如果您使用的是优化单页结帐，您肯定会想要使用 Mutation Listener。
BC 团队的博客 Post 包含一些非常方便的 Mutation Listener 代码，我在多个结帐自定义中使用了这些代码：
警告词 - OPC 校验是一个外部应用程序 - 根本不包含在基础 Cornerstone Repo 源代码中。我相信这是一个 React App。如果您熟悉 React 和其他框架如何处理条件渲染，它们通常会卸载和重新装载 components/HTML 元素以响应其内部状态。
例如，当您在结帐时从“运输详细信息”步骤移动到“账单详细信息”步骤时，运输详细信息 DOM 节点完全从页面上卸载。
这意味着您通过 JS/JQuery 附加到它们的任何内容（例如事件侦听器）都将消失。您需要配置突变侦听器以侦听您需要处理的每个部分的安装，而不仅仅是整个结帐应用程序。这使得结帐自定义处理起来相当棘手。
另一个问题 - 如果您想覆盖输入字段的值，您将再次与 React 应用程序作斗争。正如我所提到的，React 包含一个控制地址输入值的内部状态。您可以尝试使用 JS 更改这些输入的 value，但与这些字段对应的 React 应用程序内部状态不会更新。您将需要使用 checkout storefrontAPI 来更新这些值，或者您需要使用 hacky 解决方案在使用您的 JS 代码更新 values 后手动触发 React 的内部合成事件发射器，我已经使用了这个库取得一些成功：
这根本不是一个理想的解决方案。
https://github.com/vitalyq/react-trigger-change
最好，如果您需要严格控制结帐，您可以使用 BC 提供的 checkout-sdk 开发定制的结帐解决方案，但这不是一项轻松的任务，因为它更像是一组用于构建自定义的构建块结帐流程而不是您可以立即开始定制的东西。
我正在尝试监听表单何时加载到 BigCommerce 结帐页面上。 我们需要向页面添加地址验证（+ 禁用除第一个地址字段以外的所有字段，以便我们使用的地址验证服务自动填充它）。
地址验证服务的 JavaScript 在表单元素存在之前触发，因为 BigCommerce 结帐页面通过动态添加 HTML 到带有 JavaScript 链接的页面然后加载表单.
我正在考虑使用其中之一
- 轮询，以 200 毫秒为单位重复设置超时，直到某个已知元素存在为止
- 使用 MutationObserver 似乎可以做我想做的事情 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - 我可以控制 div 在其中加载表单，因此使用 mutation ovbserver 来侦听“子树”事件但阅读 MDN文档很清楚子树在触发时真正意味着什么 and/or
有什么建议吗？
如果您使用的是优化单页结帐，您肯定会想要使用 Mutation Listener。
BC 团队的博客 Post 包含一些非常方便的 Mutation Listener 代码，我在多个结帐自定义中使用了这些代码：
警告词 - OPC 校验是一个外部应用程序 - 根本不包含在基础 Cornerstone Repo 源代码中。我相信这是一个 React App。如果您熟悉 React 和其他框架如何处理条件渲染，它们通常会卸载和重新装载 components/HTML 元素以响应其内部状态。
例如，当您在结帐时从“运输详细信息”步骤移动到“账单详细信息”步骤时，运输详细信息 DOM 节点完全从页面上卸载。
这意味着您通过 JS/JQuery 附加到它们的任何内容（例如事件侦听器）都将消失。您需要配置突变侦听器以侦听您需要处理的每个部分的安装，而不仅仅是整个结帐应用程序。这使得结帐自定义处理起来相当棘手。
另一个问题 - 如果您想覆盖输入字段的值，您将再次与 React 应用程序作斗争。正如我所提到的，React 包含一个控制地址输入值的内部状态。您可以尝试使用 JS 更改这些输入的 value，但与这些字段对应的 React 应用程序内部状态不会更新。您将需要使用 checkout storefrontAPI 来更新这些值，或者您需要使用 hacky 解决方案在使用您的 JS 代码更新 values 后手动触发 React 的内部合成事件发射器，我已经使用了这个库取得一些成功：
这根本不是一个理想的解决方案。 https://github.com/vitalyq/react-trigger-change
最好，如果您需要严格控制结帐，您可以使用 BC 提供的 checkout-sdk 开发定制的结帐解决方案，但这不是一项轻松的任务，因为它更像是一组用于构建自定义的构建块结帐流程而不是您可以立即开始定制的东西。