如何在 Shopify 購物車更新上運行 Javascript 事件？

Question

我正在嘗試在我的 Shopify 購物車頁面中添加一個代碼，它將向客戶顯示購物車中的總金額，並自動顯示客戶是否有資格獲得免費送貨，以及達到免費送貨所需的金額。

我設法找到下面的代碼，但它不工作。

我不是程序員或開發人員，我對編碼知之甚少。

如果有人可以幫助我，我將不勝感激。

HTML 代碼

Your cart total is {{ cart.total_price | money }}. You qualify for free shipping!

Your cart total is {{ cart.total_price | money }}.
Spend {{ 2500 | minus: cart.total_price | money }} more to qualify for free shipping!

Java 腳本代碼

//Change this to take in the new total
function checkprice(total) {
    var baseprice = "2500" ;
    //Does this next line work???
    //var carttotal = "{{ cart.total_price }}"; Wont need this anymore
    //If so you can set the span's innerText to the new total
    document.getElementById('spnQualifyTotal').innerText = total;
    document.getElementById('spnMoreTotal').innerText = total;
    if (Number(total) > Number(baseprice)) {
        document.getElementById("freeship").style.display = "none";
        document.getElementById("nofreeship").style.display = "block";
    } else {
        document.getElementById("freeship").style.display = "block";
        document.getElementById("nofreeship").style.display = "none";
    }
};

ProductView.prototype.updateMiniCart = function(cart) {
    var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, 
    productPrice, propertiesArray, propertyKeysArray, ref, 
    variant, newTotal; //See the newTotal variable to get the total of all items in cart
    miniCartItemsWrap = $(".mini-cart-items-wrap");
    miniCartItemsWrap.empty();
    if (cart.item_count !== 1) {
      itemText = Theme.cartItemsOther;
    } else {
      itemText = Theme.cartItemsOne;
      $(".mini-cart .options").show();
      miniCartItemsWrap.find(".no-items").hide();
    }
    $(".mini-cart-wrap label").html("<span class='item-count'>" + cart.item_count + "</span> " + itemText);
    ref = cart.items;
    for (j = 0, len = ref.length; j < len; j++) {
      item = ref[j];
      productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
      newTotal += item.line_price; //Adding each item's cost to the newTotal
      variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
      itemProperties = "";
      if (item.properties) {
        propertyKeysArray = Object.keys(item.properties);
        propertiesArray = _.values(item.properties);
        i = 0;
        while (i < propertyKeysArray.length) {
          if (propertiesArray[i].length) {
            itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
          }
          i++;
        }
      }
      miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
    };
    checkprice(newTotal); //Pass in the newTotal variable to checkprice(total);

    if (Theme.currencySwitcher) {
      return $(document.body).trigger("switch-currency");
    }
  };

Answer 1

您可以使用沒有 javascript 的液體來顯示客戶是否有資格免費送貨

{%- if cart.total_price > 2500 -%}
    Your cart total is {{ cart.total_price | money }}.             
    You qualify for free shipping!
{%- else -%}
    Your cart total is {{ cart.total_price | money }}.
    Spend {{ 2500 | minus: cart.total_price | money }} more to qualify for free shipping!
{%- endif -%}