Shopify - 结账时未选中复选框

Question

我对 Shopify Checkout 扩展性有疑问。

目标很简单 - 在结账页面添加一个复选框。

我使用 REACT 应用来执行此操作，并且我可以使用 Checkout UI 扩展相对轻松地添加复选框。

问题在于，每次重新计算运费时，结帐都被取消选中。

有很多关于如何解决这个问题的教程，但说实话，没有一个能在我这边解决这个问题。

请参阅下面的代码，如果您有任何想法，我将非常感激。

import {
  reactExtension,
  Checkbox,
  useApplyMetafieldsChange,
  useMetafield
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.reductions.render-after',
  () => <Extension />,
);

function Extension() { 
  const checkedValue = useMetafield({
    namespace: "checkoutcustomizer",
    key: "adddirectsignature_v1"
  })

  const setChange = useApplyMetafieldsChange();

  return (
    <Checkbox 
      checked={checkedValue?.value}
      onChange={ (value) => {
        setChange({
          type: "updateMetafield",
          namespace: "checkoutcustomizer",
          key: "adddirectsignature_v1",
          valueType: "string",
          value
        })
      }}>
      Add Direct Signature
    </Checkbox>
  );
}

Answer 1

我刚刚注册来回答这个问题：D 我遇到了同样的问题，由于某种原因，复选框值无法存储在元字段中。因此，您可以使用属性来存储值（以便它出现在“其他详细信息”下。希望这对您有帮助！

import React, { useState } from "react";
import {
  reactExtension,
  Checkbox,
  useApplyAttributeChange,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.delivery-address.render-after',
  () => <Extension />,
);

function Extension() {
  const [checked, setChecked] = useState(false);
  const applyAttributeChange = useApplyAttributeChange();

  return (
    <Checkbox
      checked={checked}
      onChange={onCheckboxChange}
      id="gift_present_checkbox"
      name="checkbox">
      Do you want your order to arrive in gift packaging?
    </Checkbox>
  );

  //Call API methods to modify the checkout
  async function onCheckboxChange(isChecked) {
    setChecked(!checked);
    const result = await applyAttributeChange({
      key: 'gift_present',
      type: 'updateAttribute',
      value: isChecked ? 'yes' : 'no',
    });
    console.log(
      'applyAttributeChange result',
      result,
    );
  }
}