用于 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"}}} 点击保存。
