Shopify 地理位置自动切换与重定向完全指南

用户访问流程示例：
1. 德国用户访问 yourstore.com
2. 系统检测IP地址 → 德国
3. 自动重定向到 yourstore.com/your-german-market
4. 显示德语界面和欧元价格

问题场景：
- 用户点击朋友分享的链接，却被重定向到不同页面
- 用户想要购买特定市场的产品，但被强制切换
- 出差或旅行的用户被误导到错误的市场版本

IP地理定位的局限性：
- 准确率通常只有85-95%
- VPN用户位置信息不准确
- 企业网络可能显示总部位置
- 移动网络位置可能不稳定

<!-- 系统能够检测用户地理位置 -->
{{ localization.country.iso_code }} <!-- 例如：US、DE、CN -->
{{ localization.country.name }} <!-- 例如：United States、Germany、China -->

示例横幅：
"我们检测到您来自德国，是否切换到德国版本以获得更好的购物体验？"
[切换到德国版本] [继续当前版本]

// 系统会记住用户的选择
localStorage.setItem('market_preference', 'DE');
// 下次访问时不再重复询问

<!-- 提供市场/语言选择器 -->
<select name="country_code" onchange="switchMarket(this.value)">
  {% for market in shop.markets %}
    <option value="{{ market.handle }}">{{ market.name }}</option>
  {% endfor %}
</select>

故障排查清单：
✓ 是否在Markets > Preferences中启用了自动重定向选项？
✓ 是否为目标市场正确设置了语言和区域？
✓ 测试用户是否在欧盟地区（会显示弹窗而非自动重定向）？
✓ 是否使用VPN或代理（可能影响地理检测）？
✓ 浏览器缓存是否需要清除？
✓ 是否有其他应用干扰了重定向功能？

重要限制：
• 欧盟地区：显示选择弹窗而非自动重定向（法律要求）
• VPN用户：地理检测可能不准确
• 浏览器设置：用户可能关闭了地理位置服务
• 缓存影响：首次访问可能需要清除缓存才能看到效果

<!-- 在theme.liquid的</body>后面添加 -->
<script>
(function() {
  // 检查是否已经处理过地理重定向
  const hasHandledGeoRedirect = localStorage.getItem('geo_redirect_handled') === 'true';
  const hasUserPreference = localStorage.getItem('user_market_preference');
 
  if (!hasHandledGeoRedirect && !hasUserPreference) {
    // 获取用户地理位置信息
    const userCountry = '{{ localization.country.iso_code }}';
    const currentLocale = '{{ request.locale.iso_code }}';
    const currentPath = window.location.pathname;
 
    // 定义市场映射规则 (请替换为你的实际路径以及实际市场)
    const marketMapping = {
      'US': { locale: 'en', path: '/en-us', name: '美国' },
      'GB': { locale: 'en', path: '/en-gb', name: '英国' },
      'DE': { locale: 'de', path: '/de', name: '德国' },
 
      'ZH': { locale: 'zh', path: '/zh-cn', name: '香港' },
      'JP': { locale: 'ja', path: '/ja', name: '日本' },
      'CN': { locale: 'zh', path: '/zh', name: '中国' }
    };
 
    // 检查是否需要切换
    const targetMarket = marketMapping[userCountry];
    if (targetMarket &&
        currentLocale !== targetMarket.locale &&
        !currentPath.startsWith(targetMarket.path)) {
 
      // 显示友好的切换建议
      showGeoRedirectSuggestion(userCountry, targetMarket);
    } else {
      // 标记已处理
      localStorage.setItem('geo_redirect_handled', 'true');
    }
  }
 
  function showGeoRedirectSuggestion(countryCode, targetMarket) {
    // 创建建议横幅
    const banner = document.createElement('div');
    banner.id = 'geo-redirect-banner';
    banner.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 16px;
      text-align: center;
      z-index: 10000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      animation: slideDown 0.3s ease-out;
    `;
 
    banner.innerHTML = `
      <style>
        @keyframes slideDown {
          from { transform: translateY(-100%); }
          to { transform: translateY(0); }
        }
        .geo-banner-content {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 16px;
        }
        .geo-banner-text {
          flex: 1;
          min-width: 200px;
        }
        .geo-banner-actions {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }
        .geo-banner-btn {
          padding: 10px 20px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.2s ease;
          white-space: nowrap;
        }
        .geo-banner-btn.primary {
          background: white;
          color: #667eea;
        }
        .geo-banner-btn.primary:hover {
          background: #f0f0f0;
          transform: translateY(-1px);
        }
        .geo-banner-btn.secondary {
          background: transparent;
          color: white;
          border: 2px solid white;
        }
        .geo-banner-btn.secondary:hover {
          background: rgba(255,255,255,0.1);
        }
        @media (max-width: 768px) {
          .geo-banner-content {
            flex-direction: column;
            text-align: center;
          }
        }
      </style>
      <div class="geo-banner-content">
        <div class="geo-banner-text">
          <strong>我们检测到您来自${targetMarket.name}</strong><br>
          切换到${targetMarket.name}版本以获得更好的购物体验？
        </div>
        <div class="geo-banner-actions">
          <button class="geo-banner-btn primary" onclick="acceptGeoRedirect('${targetMarket.path}')">
            切换到${targetMarket.name}版本
          </button>
          <button class="geo-banner-btn secondary" onclick="declineGeoRedirect()">
            继续当前版本
          </button>
        </div>
      </div>
    `;
 
    // 插入到页面顶部
    document.body.insertBefore(banner, document.body.firstChild);
 
    // 为页面内容添加上边距
    document.body.style.paddingTop = banner.offsetHeight + 'px';
  }
 
  // 接受重定向
  window.acceptGeoRedirect = function(targetPath) {
    localStorage.setItem('geo_redirect_handled', 'true');
    localStorage.setItem('user_market_preference', targetPath);
 
    // 执行重定向
    window.location.href = targetPath + window.location.pathname
  };
 
  // 拒绝重定向
  window.declineGeoRedirect = function() {
    localStorage.setItem('geo_redirect_handled', 'true');
    localStorage.setItem('user_market_preference', 'current');
 
    // 移除横幅
    const banner = document.getElementById('geo-redirect-banner');
    if (banner) {
      banner.style.animation = 'slideUp 0.3s ease-in forwards';
      setTimeout(() => {
        banner.remove();
        document.body.style.paddingTop = '';
      }, 300);
    }
  };
})();
</script>
 
<style>
@keyframes slideUp {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}
</style>

<!-- 如果确实需要自动重定向，可以使用此代码 -->
<script>
(function() {
  // 仅在首次访问时执行自动重定向
  const isFirstVisit = !localStorage.getItem('visited_before');
  const hasDeclinedRedirect = localStorage.getItem('declined_geo_redirect') === 'true';
 
  if (isFirstVisit && !hasDeclinedRedirect) {
    const userCountry = '{{ localization.country.iso_code }}';
    const currentLocale = '{{ request.locale.iso_code }}';
 
    // 自动重定向规则（仅限主要市场，请替换为你的实际路径）
    const autoRedirectRules = {
      'US': { locale: 'en', path: 'your-us-market' },
      'DE': { locale: 'de', path: 'your-de-market' },
      'FR': { locale: 'fr', path: 'your-fr-market' }
    };
 
    const targetMarket = autoRedirectRules[userCountry];
    if (targetMarket && currentLocale !== targetMarket.locale) {
      // 标记已访问
      localStorage.setItem('visited_before', 'true');
 
      // 执行重定向
      window.location.replace(window.location.pathname);
    }
  }
 
  // 标记已访问
  localStorage.setItem('visited_before', 'true');
})();
</script>

// 通过Launchpad实现服务器端重定向 (请替换为你的实际路径)
const redirectRules = {
  'DE': '/de',
  'FR': '/fr',
  'ES': '/es'
};
 
// 在服务器端检测用户地理位置并重定向
if (userCountry in redirectRules) {
  response.redirect(302, redirectRules[userCountry] + request.path);
}

Flow规则示例：
- 触发条件：新用户访问网站
- 检查条件：用户国家 = 德国
- 执行动作：重定向到 /your-german-market 版本

建议优先级：
1. 显示切换建议横幅（最推荐）
2. 在页面加载后短暂延迟显示建议
3. 仅在首次访问时自动重定向
4. 完全避免强制重定向

不同用户的需求：
- 新用户：可能需要引导和建议
- 回访用户：应该记住之前的选择
- 移动用户：重定向体验要特别流畅
- 企业用户：可能需要特殊处理

// 防止无限重定向的安全措施
const MAX_REDIRECTS = 1;
const redirectCount = parseInt(localStorage.getItem('redirect_count') || '0');
 
if (redirectCount >= MAX_REDIRECTS) {
  // 停止重定向，记录用户偏好
  localStorage.setItem('user_prefers_current_market', 'true');
  return;
}

// 处理特殊情况
const specialCases = {
  // VPN用户检测
  detectVPN: function() {
    // 检测常见VPN服务商的IP段
    return false; // 简化示例
  },
 
  // 企业网络检测
  detectCorporateNetwork: function() {
    // 检测是否为企业网络
    return false; // 简化示例
  },
 
  // 搜索引擎爬虫
  detectBot: function() {
    return /bot|crawler|spider/i.test(navigator.userAgent);
  }
};