Shopify结账扩展能否检测用户所选的Shipping Rate？

完全可以实现检测用户选择的Shipping Rate及状态变化，以下是两种主流实现方式：

React 环境下的实现（基于@shopify/checkout-ui-extensions-react） #

通过官方提供的useShippingRates钩子，可实时获取当前选中的配送费率及所有可选费率列表，同时监听选中状态变化：

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

function ShippingConditionalContent() {
  const { selectedRate } = useShippingRates();

  // 监听选中费率变化，执行自定义逻辑
  React.useEffect(() => {
    if (!selectedRate) return;
    
    // 可根据费率的handle、title等属性做判断
    console.log('当前选中的配送费率:', selectedRate.title, selectedRate.handle);
  }, [selectedRate]);

  // 仅当选中指定handle的费率时展示内容
  return selectedRate?.handle === 'priority-shipping' ? (
    <div className="custom-content">
      <p>您选择了优先配送，将在24小时内发货</p>
    </div>
  ) : null;
}

render('Checkout::Dynamic::Render', () => <ShippingConditionalContent />);

Vanilla JS 环境下的实现 #

如果未使用React框架，可通过extension.subscribe方法订阅shippingRates事件，实时获取状态更新：

import { extension } from '@shopify/checkout-ui-extensions';

extension('Checkout::Dynamic::Render', (root) => {
  // 订阅配送费率变化事件
  const unsubscribe = extension.subscribe('shippingRates', (shippingRates) => {
    const selectedRate = shippingRates.selectedRate;
    
    if (!selectedRate) {
      root.innerHTML = '';
      return;
    }

    // 根据费率title判断，显示对应内容
    if (selectedRate.title.includes('特快配送')) {
      root.innerHTML = '<div>特快配送专属福利：额外赠送礼品包装</div>';
    } else {
      root.innerHTML = '';
    }
  });

  // 组件卸载时清理订阅
  return () => unsubscribe();
});

关键注意事项 #

• 权限配置：需在shopify.extension.toml中添加read_shipping_rates权限，否则无法获取配送费率数据：

  [[extensions]]
  type = "checkout_ui_extension"
  name = "My Shipping Extension"
  target = "Checkout::Dynamic::Render"
  permissions = ["read_shipping_rates"]
  

• 费率标识：建议使用handle作为判断依据（设置配送费率时可自定义），比title更稳定，避免因多语言或名称修改导致逻辑失效
• 版本要求：需使用最新版本的Checkout UI Extensions SDK，旧版Script Tag方式不支持该能力

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