Shopify 2.0中自定义JS与HTML/CSS关联异常的解决咨询

问题描述 #

我为店铺制作了一个独立页面的SVG地图，HTML和CSS功能正常——鼠标悬停州/地区时会高亮，移开后取消高亮。但在Shopify 2.0中，之前在旧版主题正常运行的自定义弹窗JS失效了：鼠标悬停时弹窗不再平滑显示在地图上方，反而导致整个地图下移，弹窗出现在屏幕顶部。

请问在Shopify 2.0中，如何正确关联该自定义JS与页面的HTML/CSS？

现有JS代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
$("path, circle").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() { 
    var link = $(this).attr('href');   
    window.open(link,'_blank');
    return false;
  });
}
</script>

已尝试的解决方法 #

• 将JS代码与HTML/CSS绑定在产品信息页
• 在主题assets目录下创建单独的js.liquid文件
• 给jQuery引用添加defer='defer'属性

问题根源与解决步骤 #

1. 修复弹窗定位逻辑（核心问题） #

Shopify 2.0主题普遍使用position: relative做父容器布局控制，弹窗#info-box若未设置正确定位，会触发文档流重排导致地图下移。给弹窗添加以下CSS：

#info-box {
  position: fixed; /* 脱离文档流，避免干扰地图布局 */
  pointer-events: none; /* 防止弹窗遮挡鼠标悬停事件 */
  z-index: 9999; /* 确保弹窗显示在地图上方层级 */
}

2. 确保JS在DOM加载完成后执行 #

Shopify 2.0的DOM加载机制与旧版不同，直接插入的JS可能在地图元素未渲染时执行，导致事件绑定失效。将JS包裹在DOM就绪回调中：

$(document).ready(function() {
  $("path, circle").hover(function(e) {
    $('#info-box').css('display','block');
    $('#info-box').html($(this).data('info'));
  });

  $("path, circle").mouseleave(function(e) {
    $('#info-box').css('display','none');
  });

  $(document).mousemove(function(e) {
    // 改用clientX/clientY适配fixed定位，避免页面滚动时弹窗偏移
    $('#info-box').css('top', e.clientY - $('#info-box').height() - 30);
    $('#info-box').css('left', e.clientX - ($('#info-box').width())/2);
  });

  var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if(ios) {
    $('a').on('click touchend', function() { 
      var link = $(this).attr('href');   
      window.open(link,'_blank');
      return false;
    });
  }
});

3. 优化JS加载方式 #

• 移除单独引入的jQuery：Shopify 2.0主题大多已内置jQuery，重复引入易引发版本冲突，直接使用主题自带的即可。
• 将JS代码放在theme.liquid的</body>标签前，确保DOM已完全渲染。
• 若使用单独assets文件，需在对应页面模板中通过{{ 'your-custom-js.js' | asset_url | script_tag: defer: true }}引入，确保异步加载不阻塞DOM。

4. 验证页面模板关联 #

确认SVG地图所在的页面模板（如page.map.liquid）中存在#info-box元素，结构如下：

<div id="info-box" style="display:none;">
  <!-- 弹窗内容将通过JS动态填充 -->
</div>

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