Shopify模板中按域名控制collapsible_row-4显示状态的咨询

核心思路：用Liquid服务器端判断域名（推荐） #

前端window.location是浏览器端执行的代码，而Shopify模板是服务器端渲染后才发送给浏览器，用JS控制会出现加载闪烁、依赖JS的问题。正确做法是用Liquid在模板渲染阶段直接判断域名，控制区块是否输出。

实现步骤：

• 在对应区块的渲染代码外层包裹Liquid条件判断，用request.host获取当前访问的域名：

  {% if request.host contains '.fr' or request.host contains '.it' %}
    <!-- 放置collapsible_row-4的完整渲染代码 -->
    {% render 'collapsible-row', block: section.blocks | where: "handle", "collapsible_row-4" | first %}
  {% endif %}
  

• 如果区块是在section的blocks里循环渲染的，修改section的liquid文件：

  {% for block in section.blocks %}
    {% if block.handle == 'collapsible_row-4' %}
      {% if request.host contains '.fr' or request.host contains '.it' %}
        {% render 'collapsible-row', block: block %}
      {% endif %}
    {% else %}
      {% render 'collapsible-row', block: block %}
    {% endif %}
  {% endfor %}
  

前端JS替代方案（仅当无法修改Liquid时使用） #

如果必须用前端控制，确保在DOM加载完成后执行代码，避免找不到元素：

document.addEventListener('DOMContentLoaded', () => {
  const host = window.location.hostname;
  const targetRow = document.querySelector('.collapsible_row-4'); // 替换为你区块的实际CSS选择器
  if (targetRow) {
    targetRow.style.display = host.endsWith('.fr') || host.endsWith('.it') ? 'block' : 'none';
    // 也可用类名控制：targetRow.classList.toggle('hidden', !(host.endsWith('.fr') || host.endsWith('.it')))
  }
});

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