Shopify通过JavaScript根据URL域名切换货币的实现问询

核心问题点 #

• 1. 选择器不匹配：你写的JS中使用$("#localization_form")定位表单元素，但Shopify通过{% form 'localization' %}生成的表单默认没有id="localization_form"属性，实际生成的select选择器应该是.shopify-localization-form select[name="country_code"]，原代码找不到对应元素，自然无法触发切换。
• 2. 缺少DOM加载判断：如果你的JS代码放在页面头部执行，此时DOM还未渲染完成，同样找不到表单元素，执行逻辑直接失效。
• 3. 无重复提交拦截逻辑：如果不判断当前选中的国家是否和目标一致，每次页面加载都会触发表单提交，会导致页面无限刷新。
• 4. 后台配置未校验：需先确认Shopify后台「市场」配置中，对应英国、荷兰市场已正常启用，且英国市场绑定货币为GBP、荷兰市场绑定货币为EUR，同时「允许客户切换国家/货币」的开关已开启，否则表单提交后也不会生效。

修正后代码 #

1. 域名判断触发切换JS #

// 等待DOM全部加载完成后再执行逻辑
$(document).ready(function() {
  // 根据域名确定目标国家编码
  const targetCountry = window.location.host === 'nl.puroxx.net' ? 'NL' : 'GB';
  // 正确定位本地化表单的下拉选择框
  const $localizationSelect = $('.shopify-localization-form select[name="country_code"]');
  // 元素存在且当前值和目标值不一致时才触发切换
  if ($localizationSelect.length && $localizationSelect.val() !== targetCountry) {
    $localizationSelect.val(targetCountry).change();
  }
});

2. 原有change事件提交代码无需修改，注意保证绑定逻辑在自动触发change的代码之前执行即可 #

$('.shopify-localization-form select').on('change', function() {
  $(this).parents('form').submit();
});

3. 表单代码无需修改，可正常使用 #

额外校验点 #

• 测试时请清空浏览器缓存和Shopify CDN缓存，建议使用浏览器无痕模式测试
• 如果主题是动态异步加载footer内容，可在上述逻辑中加100-300ms的延迟执行，确保表单元素已渲染完成

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