用于 B2B 產品目錄的數量規則在免費 Shopify 模板的版本 8.0.0 及更高版本中受支持，批量定價在版本 11.0.0 及更高版本中受支持。如果您想在商店中顯示數量規則和批量定價，則可將商店模板更新為最新版本。
如果您不想更改或更新模板，則可以將以下代碼添加到您的模板中以顯示數量規則和批量定價。在更新您的模板文件之前，請確保復制您的模板以創建備份副本。
拓展您的業務這屬于高級教程。如果您不擅長查閱和編輯模板代碼，則您可以與開發人員合作或聘請 Shopify 專家。
產品多屬性的購物車數量值可能在產品頁面或特色產品分區中顯示。可使用 Liquid 獲取該值。
添加 Liquid 產品購物車數量代碼您可以向模板中的以下文件中添加代碼，以便為購物車數量提供支持：
main-product.liquid 或等效文件 featured-product.liquid 或等效文件
步驟：
在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開要編輯的文件。 在文件底部創建新行，然后添加以下代碼： {%comment%}Cart quantity{%endcomment%}<span id="CartQuantity-{{section.id}}" data-product-url="{{product.url}}" data-section-id="{{section.id}}" data-variant-id="{{product.selected_or_first_available_variant.id}}">{{cart|line_items_for:product|sum:'quantity'}}{{-'products.product.quantity.in_cart'|t:quantity:cart_qty-}}</span> 點擊保存。
添加 Javascript 購物車數量代碼
當多屬性的購物車數量發生變化時，則必須更新產品頁面或特色產品分區中顯示的值。可以使用 Javascript 代碼獲取更新后的值。
您可以向 theme.js 文件或等效文件中添加代碼。
步驟：
在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 theme.js 文件。 在文件底部創建新行，然后添加以下代碼： letproductUrl=document.querySelector('[data-product-url]').dataset.productUrl;letsectionId=document.querySelector('[data-section-id]').dataset.sectionId;letvariantId=document.querySelector('[data-variant-id]').dataset.variantId;// Fetch updated HTML from Section Rendering APIfetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`).then((response)=>response.text()).then((responseText)=>{// Replace the current HTML in DOM with the updated HTMLconstupdatedHtml=newDOMParser().parseFromString(responseText,'text/html');// Update the cart quantityconstcurrentCartQuantity=document.querySelector(`#CartQuantity-${sectionId}`);constupdatedCartQuantity=updatedHtml.querySelector(`#CartQuantity-${sectionId}`);currentCartQuantity.innerHTML=updatedCartQuantity.innerHTML;}); 點擊保存。
數量規則
產品多屬性的數量規則可能在產品頁面或特色產品分區中顯示。可以使用 Liquid 提取規則。
添加 Liquid 數量規則代碼您可以向模板中的以下文件中添加代碼，以便為數量規則提供支持：
main-product.liquid 或等效文件 featured-product.liquid 或等效文件 步驟： 在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開要編輯的文件。 在文件底部創建新行，然后添加以下代碼： {%comment%}Quantity rules{%endcomment%}<div id="QuantityRules-{{section.id}}" data-product-url="{{product.url}}" data-section-id="{{section.id}}" data-variant-id="{{product.selected_or_first_available_variant.id}}">{%-ifproduct.selected_or_first_available_variant.quantity_rule.increment>1-%}<span>{{-'products.product.quantity.multiples_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.increment-}}</span>{%-endif-%}{%-ifproduct.selected_or_first_available_variant.quantity_rule.min>1-%}<span> - {{-'products.product.quantity.minimum_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.min-}}</span>{%-endif-%}{%-ifproduct.selected_or_first_available_variant.quantity_rule.max!=null-%}<span> - {{-'products.product.quantity.maximum_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.max-}}</span>{%-endif-%}</div> 點擊保存。
添加 Javascript 數量規則代碼
產品的每個多屬性都可以有其自己的一組數量規則。選擇不同的多屬性后，則需要更新產品頁面或特色產品分區中顯示的數量規則。可以使用 Javascript 代碼獲取更新后的值。
theme.js 或等效項 en.default.json
步驟：
在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 theme.js 文件。 在文件底部創建新行，然后添加以下代碼： letproductUrl=document.querySelector('[data-product-url]').dataset.productUrl;letsectionId=document.querySelector('[data-section-id]').dataset.sectionId;letvariantId=document.querySelector('[data-variant-id]').dataset.variantId;// `variantId` is set to the current variant's id. Replace this value with the updated variant's id// Fetch updated HTML from Section Rendering APIfetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`).then((response)=>response.text()).then((responseText)=>{// Replace the current HTML in DOM with the updated HTMLconstupdatedHtml=newDOMParser().parseFromString(responseText,'text/html');// Update the quantity rulesconstcurrentQuantityRules=document.querySelector(`#QuantityRules-${sectionId}`);constupdatedQuantityRules=updatedHtml.querySelector(`#QuantityRules-${sectionId}`);currentQuantityRules.innerHTML=updatedQuantityRules.innerHTML;}); 點擊保存。
數量定價
添加 Liquid 批量定價代碼
您可以向模板中的以下文件中添加代碼，以顯示批量定價：
main-product.liquid 或等效文件 featured-product.liquid 或等效文件
步驟：
在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開要編輯的文件。 在文件底部創建新行，然后添加以下代碼： {%-ifproduct.quantity_price_breaks_configured?-%}<div class="volume-pricing-note"> <span>{{'products.product.volume_pricing.note'|t}}</span> </div> <volume-pricing class="parent-display" id="Volume-{{section.id}}">{%-ifproduct.selected_or_first_available_variant.quantity_price_breaks.size>0-%}<span class="caption-large">{{'products.product.volume_pricing.title'|t}}</span> <ul class="list-unstyled no-js-hidden"> <li> <span>{{product.selected_or_first_available_variant.quantity_rule.min}}+</span>{%-assignprice=product.selected_or_first_available_variant.price|money_with_currency-%}<span data-text="{{'products.product.volume_pricing.price_at_each'|t:price:variant_price}}">{{'sections.quick_order_list.each'|t:money:price-}}</span> </li>{%-forprice_breakinproduct.selected_or_first_available_variant.quantity_price_breaks-%}{%-assignprice_break_price=price_break.price|money_with_currency-%}<li class="{%-ifforloop.index>=3-%}show-more-item hidden{%-endif-%}"> <span>{{-price_break.minimum_quantity-}}<span aria-hidden="true">+</span></span >{%-assignprice=price_break.price|money_with_currency-%}<span data-text="{{'products.product.volume_pricing.price_at_each'|t:price:price_break_price}}">{{'sections.quick_order_list.each'|t:money:price-}}</span> </li>{%-endfor-%}</ul>{%-ifproduct.selected_or_first_available_variant.quantity_price_breaks.size>=3-%}<show-more-button> <button class="button-show-more link underlined-link no-js-hidden" id="Show-More-{{section.id}}" type="button" > <span class="label-show-more label-text" ><span aria-hidden="true">+ </span>{{'products.facets.show_more'|t}}</span> </button> </show-more-button>{%-endif-%}{%-endif-%}</volume-pricing> 點擊保存。
添加 Javascript 批量定價代碼
您可以向模板中的以下文件中添加代碼，以顯示批量定價：
theme.js
步驟：
在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 theme.js 文件。 在文件底部創建新行，然后添加以下代碼： if(!customElements.get('show-more-button')){customElements.define('show-more-button',classShowMoreButtonextendsHTMLElement{constructor(){super();constbutton=this.querySelector('button');button.addEventListener('click',(event)=>{this.expandShowMore(event);constnextElementToFocus=event.target.closest('.parent-display').querySelector('.show-more-item');if(nextElementToFocus&&!nextElementToFocus.classList.contains('hidden')&&nextElementToFocus.querySelector('input')){nextElementToFocus.querySelector('input').focus();}});}expandShowMore(event){constparentDisplay=event.target.closest('[id^="Show-More-"]').closest('.parent-display');constparentWrap=parentDisplay.querySelector('.parent-wrap');this.querySelectorAll('.label-text').forEach((element)=>element.classList.toggle('hidden'));parentDisplay.querySelectorAll('.show-more-item').forEach((item)=>item.classList.toggle('hidden'));if(!this.querySelector('.label-show-less')){this.classList.add('hidden');}}});} 點擊保存。
添加區域設置
若要確保所有已翻譯的在線商店版本中都顯示數量規則和批量定價，您可以通過向 en.default.json 文件中添加以下 JSON 翻譯字符串來添加區域設置。
步驟：
在 Shopify 后臺中，轉至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 en.default.json 文件。 在文件底部創建新行，然后添加以下代碼： "products":{"product":{"volume_pricing":{"title":"Volume Pricing","note":"Volume pricing available","price_at_each":"at /ea",}"facets":{"show_more":"Show more"}}} 點擊保存。
