此文章將講解如何在商品頁面顯示目前商品的庫存數量，路徑會分為 「Aroma 或其後發佈之佈景主題（新版主題）」和「Candy 或之前發佈之佈景主題（舊版主題）」

Aroma 或其後發佈之佈景主題

此方法適用於 Aroma 或其後發佈之佈景主題主題（新版主題）

步驟一 ： 編輯原始碼

前往編輯原始碼 → 找到 main-product.liquid 文件 → 找到 {% app_snippet 'product/button' %} → 然後在前面加上 <div id="product-stock-display"></div>



main-product.liquid 文件 → 找到 selectCallback → 在以下截圖位置新增以下代碼

document.getElementById('product-stock-display').innerHTML = '';
      if(variant.available && variant.inventory_quantity > 0){
        document.getElementById('product-stock-display').innerHTML = ' 只剩 ' + variant.inventory_quantity+' 件'; 
        if(variant.title != 'Default Title') document.getElementById('product-stock-display').innerHTML = variant.title+' '+ ' 只剩 ' + variant.inventory_quantity+' 件'; 
      }

💡 小提醒：你可自由更換代碼中的中文字眼「只剩」「件」；若更換文字位置可能會導致代碼錯誤而無法顯示在前台

步驟二：點擊儲存，完成！

設定結果：

Candy 或之前發佈之佈景主題（舊版主題）

此方法適用於 Candy 或之前佈景主題。

步驟一 ： 編輯原始碼

前往編輯原始碼 → templates/product.liquid 裡搜尋 {% app_snippet 'product/button' %} → 在下方新增這段 <div id="product-stock-display" class="h6"></div>

如果需要修改為較大的字體可以把 "h6" 換成"h3"或"h4"




接著到 assets/timber.js 裡搜尋 Select a valid variant if available 然後在上方貼上這段程式

if(variant.available && variant.inventory_quantity > 0){
$('#product-stock-display').text(' 熱賣中！只剩'+variant.inventory_quantity+'件'); if(variant.title != 'Default Title'){
$('#product-stock-display').text(' 熱賣中！'+variant.title+' 只剩 '+variant.inventory_quantity+'件');
}
}else{
$('#product-stock-display').text('');
}

小提示：你也可以自行在代碼裡更換「熱賣中」字眼！

步驟二：點擊儲存，完成！

結果如下：







若要修改商品數量的字體顏色，可以參考以下步驟：

步驟一：萬網 Theme.scss 原始碼文件

步驟二：複製以下原始碼

#product-stock-display { 
color: #000000; 
}

步驟三：粘貼在 Theme.scss 裡，顏色編號可以參考 這裡。


步驟四：點擊儲存，完成！

更新時間： 25/09/2024