向 Shopify 模板中添加数量规则
用于 B2B 产品目录的数量规则仅在免费 Shopify 模板的版本 8.0.0 及更高版本中受支持。如果您不想更改或更新模板，则可以将以下代码添加到您的模板中以显示数量规则。
产品购物车数量
产品多属性的购物车数量值可能在产品页面或特色产品分区中显示。可使用 Liquid 获取该值。
添加 Liquid 产品购物车数量代码
您可以向模板中的以下文件中添加代码，以便为购物车数量提供支持：
-
main-product.liquid或等效文件 -
featured-product.liquid或等效文件
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
- 打开要编辑的文件。
- 在文件底部创建新行，然后添加以下代码：
{% 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 }}">
{%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
{{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>- 点击保存。
添加 Javascript 购物车数量代码
当多属性的购物车数量发生变化时，则必须更新产品页面或特色产品分区中显示的值。可以使用 Javascript 代码获取更新后的值。
您可以向 theme.js 文件或等效文件中添加代码。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
- 打开
theme.js文件。 - 在文件底部创建新行，然后添加以下代码：
let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
.then((response) => response.text())
.then((responseText) => {
// Replace the current HTML in DOM with the updated HTML
const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');
// Update the cart quantity
const currentCartQuantity = document.querySelector(`#CartQuantity-${sectionId}`);
const updatedCartQuantity = updatedHtml.querySelector(`#CartQuantity-${sectionId}`);
currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
});- 点击保存。
数量规则
产品多属性的数量规则可能在产品页面或特色产品分区中显示。可以使用 Liquid 提取规则。
添加 Liquid 数量规则代码
您可以向模板中的以下文件中添加代码，以便为产品购物车数量提供支持：
-
main-product.liquid或等效文件 -
featured-product.liquid或等效文件
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
- 打开要编辑的文件。
- 在文件底部创建新行，然后添加以下代码：
{% 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 }}">
{%- if product.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 -%}
{%- if product.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 -%}
{%- if product.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 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
- 打开
theme.js文件。 - 在文件底部创建新行，然后添加以下代码：
let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = 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 API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
.then((response) => response.text())
.then((responseText) => {
// Replace the current HTML in DOM with the updated HTML
const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');
// Update the quantity rules
const currentQuantityRules = document.querySelector(`#QuantityRules-${sectionId}`);
const updatedQuantityRules = updatedHtml.querySelector(`#QuantityRules-${sectionId}`);
currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
});- 点击保存。
添加区域设置
添加 JSON 翻译字符串
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
- 打开
en.default.json文件。 - 在文件底部创建新行，然后添加以下代码：
{
"products":{
"quantity":{
"minimum_of":"Minimum of ",
"maximum_of":"Maximum of ",
"multiples_of":"Increments of ",
"in_cart": " in cart"
}
}
}- 点击保存。