如何在结帐 Ui 扩展中获取所选的运输/交付方式

Question

我有一个文本字段结账 ui 扩展，我想修改它。我想知道如何利用 deliveryGroups API 来获取所选的运输方式。这是我当前的扩展代码。任何帮助将不胜感激！

import {
  useExtensionApi,
  render,
  TextField,
  useApplyAttributeChange,
} from '@shopify/checkout-ui-extensions-react';

render("Checkout::ShippingMethods::RenderAfter", () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [shippingAccountInfo, setShippingAccountInfo] = useState('');

  const handleShippingChange = (val) => {
    setShippingAccountInfo(val)
  }

  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    if (shippingAccountInfo) {
      // Update the checkout line item with the VAT number attribute
      async function updateShippingAttribute() {
        let res = await applyAttributeChange({
          type: 'updateAttribute',
          key: 'shipping_info',
          value: shippingAccountInfo,
        });
      }

      updateShippingAttribute()
    }
  }, [shippingAccountInfo, applyAttributeChange]);


  return (
    <>
      <TextField
        label="Shipping Account Info: (Enter your carrier and account number)"
        name="shipping_account_info"
        value={shippingAccountInfo}
        onChange={(str) => handleShippingChange(str)}
      />
    </>
  );
}

Answer 1

import {
  Banner,
  useApi,
  useTranslate,
  reactExtension,
  TextField,
  View,
  TextBlock,
  Select,
  Grid,
  GridItem,
  useDeliveryGroups
} from '@shopify/ui-extensions-react/checkout';
import React from 'react';
export default reactExtension(
  'purchase.checkout.shipping-option-list.render-after',
  () => <Extension />,
);

function Extension() {
  const translate = useTranslate();
  let shipping = useDeliveryGroups();

//here you got all the information about shipping in shipping variable 
  console.log(shipping);

  return (
    <View padding={['loose', 'none', 'none', 'none']}>
    </View>
  );
}