如何在Shopify中用JS及AJAX Shopify API实现货币转换？求适配API推荐

一、推荐的Shopify货币API #

优先选择Shopify Payments Currency API，这是官方原生集成的API，在可靠性和支持服务上是最优选择：

• 汇率数据来自权威金融数据源，更新频率稳定，准确性有保障
• 与Shopify后台深度集成，无需额外管理第三方API密钥，集成成本低
• 提供官方技术支持，可通过Shopify开发者文档、官方工单系统获取问题解决方案，可用性远高于第三方API
• 支持自动同步汇率，也允许商家手动调整汇率，适配不同业务场景

官方API支持的币种覆盖绝大多数主流市场，完全能满足常规多货币需求。

二、JS结合AJAX实现货币转换的步骤 #

前提：已在Shopify后台开启多货币功能（路径：Settings > Markets > Manage > Currencies），并配置好目标货币。

1. 获取货币与汇率数据 #

如果是前端店铺页面，可直接使用Shopify内置的Shopify.currency全局对象，它包含当前激活货币、汇率、支持的货币列表等信息：

// 查看当前激活货币及汇率
console.log('当前货币:', Shopify.currency.active);
console.log('当前汇率:', Shopify.currency.rate);
console.log('支持的货币:', Shopify.currency.available);

若需从后台动态拉取最新数据（比如Admin端应用），可调用Shopify Admin API：

fetch('/admin/api/2024-07/currencies.json', {
  headers: {
    'X-Shopify-Access-Token': '你的店铺API令牌',
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => {
  const currencies = data.currencies;
  // 处理货币数据
});

2. 前端价格转换与货币切换 #

实现一个货币选择控件，监听切换事件，完成页面价格和购物车货币的更新：

// 价格转换工具函数
function convertPrice(originalPrice, targetRate) {
  return (originalPrice * targetRate).toFixed(2);
}

// 监听货币选择框切换
document.getElementById('currency-select').addEventListener('change', function(e) {
  const targetCode = e.target.value;
  // 获取目标货币汇率（从Shopify.currency.available中匹配）
  const targetCurrency = Shopify.currency.available.find(c => c.code === targetCode);
  if (!targetCurrency) return;

  // 遍历页面所有价格元素（假设价格元素带.price类，且原始价格存在data-original-price属性）
  document.querySelectorAll('.price').forEach(el => {
    const originalPrice = parseFloat(el.dataset.originalPrice);
    const converted = convertPrice(originalPrice, targetCurrency.rate);
    el.textContent = `${targetCode} ${converted}`;
  });

  // 更新购物车货币（调用Shopify AJAX接口）
  fetch('/cart/update.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({ currency: targetCode })
  })
  .then(res => res.json())
  .then(cart => {
    // 更新购物车总价显示（假设购物车总价元素ID为cart-total）
    document.getElementById('cart-total').textContent = `${targetCode} ${(cart.total_price / 100).toFixed(2)}`;
  })
  .catch(err => {
    console.error('更新购物车货币失败:', err);
    // 错误处理：恢复原货币并提示用户
  });
});

3. 关键注意事项 #

• 页面价格元素必须存储原始基准货币价格（如data-original-price），避免多次转换导致精度误差
• 处理AJAX请求失败的情况，比如网络异常时 fallback到当前激活货币，保证用户体验
• 产品页、购物车页、结算页需统一处理价格转换，确保全流程货币显示一致
• 若需持久化用户选择的货币，可使用localStorage存储用户选择的货币代码，页面加载时自动切换

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