如何基于Shopify店铺语言配置Gorgias Livechat加载规则

核心规则说明 #

• 组件显示语言完全由加载参数applicationId控制，是唯一需要动态调整的参数
• 英文版本对应applicationId=17634，法语版本对应applicationId=17741
• 语言判断优先级：优先读取Shopify原生模板变量shop.locale，读取失败时自动解析URL路径中的语言标识（如/fr/xxx、/en/xxx格式），无匹配项时默认加载英文版本

可直接部署的代码 #

将原有固定加载的Gorgias组件代码替换为以下代码即可：

<!--Gorgias Chat Widget Start-->
<script id="gorgias-chat-shopify-install">
!function(_){
  _.SHOPIFY_PERMANENT_DOMAIN="{{shop.permanent_domain}}",
  _.SHOPIFY_CUSTOMER_ID="{{customer.id}}",
  _.SHOPIFY_CUSTOMER_EMAIL="{{customer.email}}"
}(window||{});

// 语言与applicationId映射配置
const APP_ID_MAP = {
  en: 17634,
  fr: 17741
};

// 优先读取Shopify原生店铺语言配置
let currentLang = '{{ shop.locale }}'.split('-')[0];
// 兜底从URL路径解析语言标识
if (!APP_ID_MAP[currentLang]) {
  const pathLangMatch = window.location.pathname.match(/^\/(fr|en)\//i);
  currentLang = pathLangMatch ? pathLangMatch[1].toLowerCase() : 'en';
}
// 最终未匹配时默认使用英文ID
const targetAppId = APP_ID_MAP[currentLang] || APP_ID_MAP.en;

// 动态加载对应语言的组件脚本
const chatScript = document.createElement('script');
chatScript.id = 'gorgias-chat-widget-install-v2';
chatScript.src = `https://config.gorgias.chat/gorgias-chat-bundle-loader.js?applicationId=${targetAppId}`;
document.body.appendChild(chatScript);
</script>
<!--Gorgias Chat Widget End-->

扩展说明 #

后续如果需要新增其他语言支持，只需要在APP_ID_MAP对象中新增对应语言缩写和匹配的applicationId键值对即可，不需要改动其他判断逻辑。

内容的提问来源于stack exchange，提问作者Cassiopé Morin