如果購物車總價低於 10 美元，請在 Shopify 中隱藏結帳按鈕

Question

當購物車的總價低於 10 美元時，我可以隱藏結帳按鈕並顯示提醒文本。 但是...當購物車總價超過10美元時，購物車抽屜如何在不刷新頁面的情況下自動更新？

這是我的代碼：

{% if cart.total_price < 1000 %}
  Over $10 to checkout!

  {% else %}

  <div class="button">
    <a class="btn-checkout" href="/cart">checkout</a>
  </div>
{% endif %}

Answer 1

Shopify 以美分來處理錢，因此您應該更改它以使一切正常：

{% if cart.total_price < 1000 %}

    Over $10 to checkout!
    
    {% else %}
    
    <div class="button">
      <a class="btn-checkout" href="/cart">checkout</a>
    </div>
    
    {% endif %}

Answer 2

使用 Shopify 站點時首先要記住的是 Liquid 是一種模板語言，而不是腳本語言。 當訪問者請求您商店的頁面時，Shopify 的服務器解釋 Liquid 命令以組裝最終文檔，該文檔通過 inte.net 發送到客戶的瀏覽器，其中沒有任何模板標記 - 最終結果只是一個普通頁面 HTML , Javascript 或 CSS。

因此，在 Liquid 中用 if...else 包裝結帳按鈕對於 static 網站來說效果很好，在該網站上，任何購物車操作都會導致頁面重新加載 - 但不適用於動態網站，因為頁面只能准確到服務器將其組合在一起的那一刻。

對於已加載頁面的動態更改，您將需要一種腳本語言 - 特別是 Javascript。要進行所需的編輯，您將需要找到負責呈現主題的 Javascript 代碼抽屜購物車並更新代碼，可以在那里切換結帳按鈕。 不幸的是，由於主題可以（並且可以）go 以主題開發人員當時的任何方式進行處理，因此我無法與您分享唯一一種正確的方法來進行此更新，而無需查看相關代碼。

如果你幸運的話，你有一個主題，你需要的 JS 文件布局合理，很容易在assets文件夾中找到，通常有一個像theme.js或shop.js這樣的名字。 如果您在找到正確的文件時遇到困難，但對瀏覽器的開發人員工具有一定的了解，一種追蹤更新購物車的 Javascript function 的方法是：

• 打開你的開發工具到“網絡”選項卡
• 導航到產品頁面
• 頁面完全加載后清除 .network 日志以減少混亂
• 將商品添加到購物車。 您應該會看到一堆 .network 調用發生了。
• 添加項目並且抽屜式購物車在視覺上更新后，在 .network 流量中查找對/cart.js的調用 - 這將被您的主題用於獲取購物車最新 state 的任何代碼調用，因此可以更新項目、小計等。 （如果您在列表中找不到/cart.js ，請查找/cart/add.js作為第二最佳選項）
• Your.network 選項卡應該有一個名為“Initiator”的列。 Hover 將鼠標 cursor 放在該行的條目上，以查看導致 .network 請求的函數的“調用堆棧”，最近的在最上面。 單擊 function 名稱中的任何一個，您將轉到關聯的 javascript 文件中的該行。
  • 如果你遇到了一些看起來像亂碼的東西，你可能會遇到一些位於你想要查找的代碼和實際請求之間的幫助程序庫 - go 回到調用堆棧並嘗試下一個 function 直到你找到看起來應該由真人閱讀的東西。
  • 我們希望找到一個 function，它具有與購物車更新相關的描述性名稱，例如drawCart 、 doCartUpdate 、 onProductAdded等。

一旦找到有問題的 function，如何進行更新以實際呈現您想要的更改將在很大程度上取決於主題如何更新側推車。 對於某些主題，所有Javascript 文件（而不僅僅是幫助程序庫）都被縮小到難以辨認的名稱並擠在一行中，您可能會盡可能地 go 而無需真正了解主題的具體細節代碼。 其他主題可能使用 Javascript 的模板庫（例如 Handlebars）來呈現更新，因此您的更改將更容易更新到隱藏在主題文件中某處的某個模板文件。 當然，您的主題可以介於兩者之間 - 但如果您至少可以找到您的主題在哪里以及如何生成購物車抽屜，那么您就可以自定義它了，如果您設法做到這一點但是您需要進行的更改對您來說並不明顯。 這肯定需要在這里提出后續問題。