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

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

目前，我想建立类似的东西。当您点击添加购物车时，它将显示所选项目的数量。当我点击添加购物车时，我可以得到物品的数量，但需要刷新页面才能工作。我试图修改Ajaxify.js.liquid，但当我点击添加购物车按钮时，我没有找到每个商品的具体变体id

再一次，我想构建这样的东西：购物车按钮将显示已添加到购物车的商品数量

在产品收集页面中，每个产品下面都有“添加到购物车”按钮。在该按钮上方，我为每个产品添加了项目数量

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

{product.variants%中的变量为%0}
{%if variant.available%}
{{variant.title}}-{{variant.price}货币}
{%else%}
{{variant.title}}-{{'products.product.salled|t}
{%endif%}
{%endfor%}
{product.variants%中的变量为%0}
{%if variant.available%}
变量id:{{Variant.id}
{cart.items%中的项目为%s}
{%if item.variant_id==variant.id%}
项目金额：{{Item.quantity}
{%endif%}
{%endfor%}
{%endif%}
{%endfor%}
{%if settings.product\数量\启用%}
{{'products.product.quantity'|t}
{%endif%}
{{'products.product.add_-to_-cart'|t}
{%if settings.product\数量\消息%}
{%endif%}

---

我想动态更新“#物品购物车数量”，但我在Ajaxify.js.liquid中遇到问题，无法从我添加到的特定物品中获取物品的变体id。

您能告诉我们您尝试了什么吗？@Bruno question updated。

<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>