如何在多个Shopify Checkout UI Extension组件间共享乘数变量？

针对你需要在Banner.tsx、LineItems.tsx、Calculator.tsx三个扩展组件间共享积分乘数的需求，以下是两种可行的实现方案，兼顾React Context的本地共享和跨扩展实例的全局同步需求：

方案一：React Context实现组件内共享（单扩展实例） #

如果你的组件仅需要在单个扩展实例内共享状态，或者暂时不需要跨独立扩展同步，可以用React Context快速实现：

1. 创建共享Context文件 #

在项目中新建src/contexts/PointsMultiplierContext.tsx，定义Context和Provider：

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义Context类型
type PointsMultiplierContextType = {
  multiplier: number;
  setMultiplier: (value: number) => void;
};

// 初始化Context
const PointsMultiplierContext = createContext<PointsMultiplierContextType>({
  multiplier: 40,
  setMultiplier: () => {},
});

// 创建Provider组件，管理状态
export function PointsMultiplierProvider({ children }: { children: ReactNode }) {
  const [multiplier, setMultiplier] = useState<number>(40);

  return (
    <PointsMultiplierContext.Provider value={{ multiplier, setMultiplier }}>
      {children}
    </PointsMultiplierContext.Provider>
  );
}

// 自定义Hook，简化组件调用
export function usePointsMultiplier() {
  return useContext(PointsMultiplierContext);
}

2. 在扩展组件中使用Context #

以你的Calculator.tsx为例，修改代码引入并使用Context：

import { useEffect, useState } from 'react';
import {
  Heading,
  useApi,
  InlineLayout,
  Text,
  View,
  useDiscountCodes,
  useAppMetafields,
  reactExtension,
} from '@shopify/ui-extensions-react/checkout';
import { PointsMultiplierProvider, usePointsMultiplier } from '../contexts/PointsMultiplierContext';

export default reactExtension(
  'purchase.checkout.reductions.render-after',
  () => (
    // 用Provider包裹根组件
    <PointsMultiplierProvider>
      <Extension />
    </PointsMultiplierProvider>
  ),
);

function Extension() {
  // 从Context获取共享的乘数
  const { multiplier } = usePointsMultiplier();
  const { extension, lines } = useApi();

  const productMetaDatas = useAppMetafields({
    type: "product",
    namespace: "custom",
    key: "entry_override_arbitrary_value"
  });

  let [messageHeader, setMessageHeader] = useState('Total Entries');
  let [message, setMessage] = useState(`You will receive ${multiplier} entries for every $1 spent!`);

  const discountCodes = useDiscountCodes();

  useEffect(() => {
    let tempEntries = 0;

    lines.current.forEach(function (cartLineTarget) {
      const productId = cartLineTarget?.merchandise?.product?.id;
      if (!productId) return;

      const productMetaData = productMetaDatas.find(({ target }) => {
        return `gid://shopify/Product/${target.id}` === productId;
      });

      if (productMetaData?.metafield.value) {
        tempEntries += parseInt(productMetaData.metafield.value) * cartLineTarget.quantity;
      } else {
        // 使用共享的乘数计算积分
        tempEntries += Math.floor(cartLineTarget.cost.totalAmount.amount) * cartLineTarget.quantity * multiplier;
      }
    });

    const bonusDiscountCodes = [
      { 'FREESHIPPING2024': 50 },
      { 'CLOWNSHOES': 20 },
    ];

    if (discountCodes.length > 0) {
      const isActiveDiscountCodeInBonus = bonusDiscountCodes.some(discountCodeObj =>
        Object.keys(discountCodeObj).includes(discountCodes[0].code)
      );

      if (isActiveDiscountCodeInBonus) {
        tempEntries += 50;
      }
    }

    setMessage(tempEntries.toString());
    // 乘数变化时更新提示文本
    setMessage(`You will receive ${multiplier} entries for every $1 spent!`);

  }, [lines, productMetaDatas, discountCodes, multiplier]); // 将乘数加入依赖数组

  return (
    <InlineLayout columns={['fill', '20%']}>
      <View>
        <Heading level="2">{messageHeader}</Heading>
      </View>
      <View inlineAlignment="end">
        <Text appearance="info">{message}</Text>
      </View>
    </InlineLayout>
  );
}

3. 在其他组件中复用 #

Banner.tsx和LineItems.tsx只需重复上述步骤：导入usePointsMultiplier Hook，替换原有硬编码的乘数即可。

方案二：跨独立扩展实例同步状态 #

由于Shopify Checkout UI Extensions的每个target对应独立的React根实例，React Context无法直接跨扩展同步。如果需要在三个独立扩展间共享乘数，可结合localStorage和自定义事件实现：

修改PointsMultiplierContext.tsx的Provider代码：

export function PointsMultiplierProvider({ children }: { children: ReactNode }) {
  // 从localStorage读取初始值，无则用默认40
  const [multiplier, setMultiplier] = useState<number>(() => {
    const saved = localStorage.getItem('pointsMultiplier');
    return saved ? parseInt(saved) : 40;
  });

  // 乘数变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('pointsMultiplier', multiplier.toString());
  }, [multiplier]);

  // 自定义更新函数，触发全局事件通知其他扩展
  const updateMultiplier = (value: number) => {
    setMultiplier(value);
    window.dispatchEvent(new CustomEvent('multiplierUpdated', { detail: value }));
  };

  // 监听其他扩展触发的更新事件
  useEffect(() => {
    const handleUpdate = (e: CustomEvent) => {
      setMultiplier(e.detail);
    };

    window.addEventListener('multiplierUpdated', handleUpdate as EventListener);
    return () => {
      window.removeEventListener('multiplierUpdated', handleUpdate as EventListener);
    };
  }, []);

  return (
    <PointsMultiplierContext.Provider value={{ multiplier, setMultiplier: updateMultiplier }}>
      {children}
    </PointsMultiplierContext.Provider>
  );
}

更优方案：用Shopify Metafield统一管理乘数 #

如果需要频繁调整促销乘数，建议将值存储在店铺级Metafield中，无需修改代码即可在Shopify后台更新：

1. 在Shopify后台创建店铺级Metafield：

   • 命名空间：custom
   • 键：points_multiplier
   • 类型：整数

2. 在组件中通过useAppMetafields获取：

const shopMeta = useAppMetafields({
  type: "shop",
  namespace: "custom",
  key: "points_multiplier"
});

// 获取乘数，无则用默认值40
const multiplier = shopMeta[0]?.metafield.value ? parseInt(shopMeta[0].metafield.value) : 40;

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