用于 B2B 產(chǎn)品目錄的數(shù)量規(guī)則在免費 Shopify 模板的版本 8.0.0 及更高版本中受支持，批量定價在版本 11.0.0 及更高版本中受支持。如果您想在商店中顯示數(shù)量規(guī)則和批量定價，則可將商店模板更新為最新版本。

如果您不想更改或更新模板，則可以將以下代碼添加到您的模板中以顯示數(shù)量規(guī)則和批量定價。在更新您的模板文件之前，請確保復(fù)制您的模板以創(chuàng)建備份副本。

這屬于高級教程。如果您不擅長查閱和編輯模板代碼，則您可以與開發(fā)人員合作或聘請 Shopify 專家。

產(chǎn)品多屬性的購物車數(shù)量值可能在產(chǎn)品頁面或特色產(chǎn)品分區(qū)中顯示。可使用 Liquid 獲取該值。

您可以向模板中的以下文件中添加代碼，以便為購物車數(shù)量提供支持：

main-product.liquid 或等效文件 featured-product.liquid 或等效文件

步驟：

在 Shopify 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開要編輯的文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： {%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 購物車數(shù)量代碼

當多屬性的購物車數(shù)量發(fā)生變化時，則必須更新產(chǎn)品頁面或特色產(chǎn)品分區(qū)中顯示的值?？梢允褂?Javascript 代碼獲取更新后的值。

您可以向 theme.js 文件或等效文件中添加代碼。

步驟：

在 Shopify 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 theme.js 文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： 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;}); 點擊保存。

數(shù)量規(guī)則

產(chǎn)品多屬性的數(shù)量規(guī)則可能在產(chǎn)品頁面或特色產(chǎn)品分區(qū)中顯示?？梢允褂?Liquid 提取規(guī)則。

您可以向模板中的以下文件中添加代碼，以便為數(shù)量規(guī)則提供支持：

main-product.liquid 或等效文件 featured-product.liquid 或等效文件 步驟： 在 Shopify 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開要編輯的文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： {%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> &nbsp;-&nbsp;{{-'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> &nbsp;-&nbsp;{{-'products.product.quantity.maximum_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.max-}}</span>{%-endif-%}</div> 點擊保存。

添加 Javascript 數(shù)量規(guī)則代碼

產(chǎn)品的每個多屬性都可以有其自己的一組數(shù)量規(guī)則。選擇不同的多屬性后，則需要更新產(chǎn)品頁面或特色產(chǎn)品分區(qū)中顯示的數(shù)量規(guī)則。可以使用 Javascript 代碼獲取更新后的值。

theme.js 或等效項 en.default.json

步驟：

在 Shopify 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 theme.js 文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： 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;}); 點擊保存。

數(shù)量定價

添加 Liquid 批量定價代碼

您可以向模板中的以下文件中添加代碼，以顯示批量定價：

main-product.liquid 或等效文件 featured-product.liquid 或等效文件

步驟：

在 Shopify 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開要編輯的文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： {%-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 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 theme.js 文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： 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');}}});} 點擊保存。

添加區(qū)域設(shè)置

若要確保所有已翻譯的在線商店版本中都顯示數(shù)量規(guī)則和批量定價，您可以通過向 en.default.json 文件中添加以下 JSON 翻譯字符串來添加區(qū)域設(shè)置。

步驟：

在 Shopify 后臺中，轉(zhuǎn)至在線商店 > 模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 打開 en.default.json 文件。 在文件底部創(chuàng)建新行，然后添加以下代碼： "products":{"product":{"volume_pricing":{"title":"Volume Pricing","note":"Volume pricing available","price_at_each":"at /ea",}"facets":{"show_more":"Show more"}}} 點擊保存。