如何在不刷新页面的情况下动态更新文本？

Question

我正在使用Shopify模板。在Ajaxify.js.liquid下，我根据this solution修改了代码，以防止在添加产品后打开购物车模式ajax。

目前我想构建像redmart这样的东西。当您点击添加购物车时，它会显示所选项目的数量。当我点击添加购物车时，我可以调用项目数量，但需要刷新页面才能工作。我尝试修改Ajaxify.js.liquid，但没有运气，当我点击添加购物车按钮时，我找不到每个项目的特定variant_id。

我想再次构建类似redmart的内容，购物车按钮会显示已添加到购物车中的商品数量。

在产品收集页面中，每个产品都有＆＃34;添加到购物车＆＃34;按钮如下。在该按钮上方，我添加了每种产品的物品数量。

Product-grid-item.liquid（添加购物车按钮）

<form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm">
        <select name="id" id="productSelect" class="product-variants">
          {% for variant in product.variants %}
            {% if variant.available %}

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

 {% for variant in product.variants %}
    {% if variant.available %}

        Variant id: {{ variant.id }}

        {% for item in cart.items %}
          {% if item.variant_id == variant.id %}
                Item amount: <span id="item-cart-quantity">{{ item.quantity }}</span>
          {% endif %}
        {% endfor %}
    {% endif %}
{% endfor %}  

        {% if settings.product_quantity_enable %}
          <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
        {% endif %}

        <button type="submit" name="add" id="addToCart" class="btn">
          <span class="icon icon-cart"></span>
          <span id="addToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if settings.product_quantity_message %}
          <span id="variantQuantity" class="variant-quantity"></span>
        {% endif %}
</form>  

我想更新＆＃34;＃item-cart-quantity＆＃34;动态，但我在Ajaxify.js.liquid中遇到问题，我无法从我添加的特定项目中获取项目的变体ID。