如何修复Shopify购物车页面关联异常的h1标签问题？

问题描述 #

• 两个H1标签关联异常，无法修改第一个H1的文本内容
• 删除第一个H1后，第二个H1仅在页面刷新时才会显示

问题根源 #

1. 代码存在两个独立的{% if cart.items != blank %}判断块，导致H1渲染逻辑分散，主题AJAX购物车脚本因选择器冲突或DOM更新范围不全，无法正确处理H1的动态显示。
2. 删除第一个H1后，AJAX更新购物车时未同步刷新第二个H1的显示状态，仅页面刷新时Liquid模板重新渲染才会显示。

修复步骤 #

1. 重构Liquid代码，统一H1渲染逻辑 #

将主购物车内容包裹在独立容器中，给H1添加唯一类名，避免逻辑分散引发的冲突。修改后的完整代码如下：

<div class="cart_holder">
  {% if cart.items != blank %}
    <div class="item_holder">
      {% for item in cart.items %}
        <a class="cart_item" href="{{ item.product.url }}">
          <img class="item_image" src="{{ item.product.image | product_image_url | constrain: 240, 240 }}" alt="Image of {{ item.product.name | escape }}">
          <div class="item_info">
            {{ item.product.name }}
            {% unless item.product.has_default_option %}
              <span>{{ item.option.name }}</span>
            {% endunless %}
            <div class="item_price">{{ item.unit_price | money: theme.money_format }}</div>
          </div>
        </a>
      {% endfor %}
    </div>
    <div class="cart_footer">
      <div class="item_subtotal">
        <span style="float:left">Ár:</span> <span style="float:right">{{ cart.total | money: theme.money_format }}</span>
      </div>
      <a class="button view_bag" href="/cart">Tovább a fizetéshez!</a>
    </div>
  {% else %}
    <div>
      A kosara üres
    </div>
    <a class="button view_bag" href="/products">Vásároljon Most!</a>
  {% endif %}
</div>

<!-- 主购物车内容容器，统一渲染逻辑 -->
<div class="cart_main_content">
  {% if cart.items != blank %}
    <h1 class="cart_main_title">A kosara</h1>
    <form method="post" action="/cart" id="cart_form" class="cart_form">
      {% if errors != blank %}
        <ul class="errors">
          {% for error in errors %}
            <li>{{ error }}</li>
          {% endfor %}
        </ul>
      {% endif %}
      <ul class="cart_items">
        {% for item in cart.items %}
          <li class="cart_item" data-cart-id="{{ item.id }}">
            <a href="{{ item.product.url }}" class="item_image" title="View {{ item.product.name }}">
              <img src="{{ item.product.image | product_image_url | constrain: 576 }}">
            </a>
            <div class="item_details">
              <a href="{{ item.product.url }}">
                {{ item.product.name }}
                {% unless item.product.has_default_option %}
                  <span>{{ item.option.name }}</span>
                {% endunless %}
                <span class="price">{{ item.unit_price | money: theme.money_format }}</span>
              </a>
              <div class="qty_holder" data-cart-id="{{ item.id }}">
                <button class="qty" type="button" data-func="minus"><svg viewBox="0 0 20 20"><path d="M5 9h10v2H5z"/><path d="M5 9h10v2H5z"/></svg></button>
                {{ item | item_quantity_input, 'quantity', 'quantity' }}
                <button class="qty" type="button" data-func="plus"><svg viewBox="0 0 20 20"><path d="M11 5H9v4H5v2h4v4h2v-4h4V9h-4z"/></svg></button>
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>
      <div class="cart_info sticky">
        <h3>Ár:<span>{{ cart.total | money: theme.money_format }}</span></h3>
        <button type="submit" name="checkout" title="Tovább a fizetéshez!" class="checkout_btn">Tovább a fizetéshez!</button>
        <a class="button continue_shopping" href="/products">Folytassa a vásárlást</a>
      </div>
    </form>
    <div class="cart_empty_message" style="display: none;">
      <p><svg viewBox="0 0 30 30"><path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z"/></svg></p>
      <p><a class="button" href="/products">Vásároljon Most!</a></p>
    </div>
  {% else %}
    <h1 class="cart_main_title">A kosara üres</h1>
    <div class="cart_empty_message">
      <p><svg viewBox="0 0 30 30"><path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z"/></svg></p>
      <p><a class="button" href="/products">Vásároljon Most!</a></p>
    </div>
  {% endif %}
</div>

2. 调整AJAX购物车脚本 #

找到主题中处理购物车动态更新的JS文件（通常位于assets/cart.js或类似路径），修改DOM更新逻辑，确保购物车状态变化时同步更新.cart_main_content容器的内容：

• 若脚本通过AJAX获取购物车数据并渲染HTML，需将.cart_main_content纳入更新范围
• 若脚本使用选择器操作H1，将选择器改为.cart_main_title，确保正确定位目标元素

示例JS代码片段：

// 购物车更新后同步刷新主内容区域
fetch('/cart.js')
  .then(res => res.json())
  .then(cart => {
    // 更新迷你购物车
    document.querySelector('.cart_holder').innerHTML = renderMiniCart(cart);
    // 更新主购物车内容（包含H1）
    document.querySelector('.cart_main_content').innerHTML = renderMainCart(cart);
  });

3. 验证修复效果 #

• 修改.cart_main_title对应的文本，确认能正常显示修改后的内容
• 添加/删除购物车商品，确认H1标签即时更新，无需页面刷新
• 清空购物车，确认空状态的H1即时显示

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