在商店中顯示數量規則和批發價

此頁面列印時間為 Sep 18, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/b2b/theme-code/quantity-pricing。

8.0.0 版或以上版本的免費 Shopify 佈景主題可支援 B2B 目錄的數量規則，而 11.0.0 版或以上版本支援批發價。如果您想在商店中顯示數量規則和批發價，您可以將商店的的佈景主題更新至最新版本。

如果您不想變更或更新佈景主題，可將下列程式碼新增至佈景主題以顯示數量規則和批發價。更新佈景主題檔案之前，請務必複製您的佈景主題以建立備份。

此頁面上

商品購物車數量
數量規則
批量購買定價
新增語言代碼

商品購物車數量

商品子類的購物車數量值會顯示在商品頁面或精選商品區段。您可使用 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 檔案。
在檔案最下方建立新的一行，然後新增下列程式碼：

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 管理介面中，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，點擊「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
開啟要編輯的檔案。
在檔案最下方建立新的一行，然後新增下列程式碼：

{% 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>
        &nbsp;-&nbsp;
        {{- '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>
        &nbsp;-&nbsp;
        {{- '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 檔案。
在檔案最下方建立新的一行，然後新增下列程式碼：

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;
  });

點擊「儲存」。

批量購買定價

新增 Liquid 批發價程式碼

您可以將程式碼新增到佈景主題中的下列檔案，以顯示數量規則：

main-product.liquid 或其他同等檔案
featured-product.liquid 或其他同等檔案

步驟如下：

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，點擊「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
開啟要編輯的檔案。
在檔案最下方建立新的一行，然後新增下列程式碼：

{%- if product.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 }}">
    {%- if product.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>
          {%- assign price = 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>
        {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
          {%- assign price_break_price = price_break.price | money_with_currency -%}
          <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
            <span>
              {{- price_break.minimum_quantity -}}
              <span aria-hidden="true">+</span></span
            >
            {%- assign price = 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>
      {%- if product.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>
{%- endif -%}

點擊「儲存」。

新增 JAVAscript 批發價程式碼

只要將程式碼新增到您佈景主題中的下列檔案，即可顯示批發價：

theme.js

步驟如下：

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，點擊「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
開啟 theme.js 檔案。
在檔案最下方建立新的一行，然後新增下列程式碼：

if (!customElements.get('show-more-button')) {
  customElements.define(
    'show-more-button',
    class ShowMoreButton extends HTMLElement {
      constructor() {
        super();
        const button = this.querySelector('button');
        button.addEventListener('click', (event) => {
          this.expandShowMore(event);
          const nextElementToFocus = event.target
            .closest('.parent-display')
            .querySelector('.show-more-item');
          if (
            nextElementToFocus &&
            !nextElementToFocus.classList.contains('hidden') &&
            nextElementToFocus.querySelector('input')
          ) {
            nextElementToFocus.querySelector('input').focus();
          }
        });
      }
      expandShowMore(event) {
        const parentDisplay = event.target
          .closest('[id^="Show-More-"]')
          .closest('.parent-display');
        const parentWrap = 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"
    }
  }
}

點擊「儲存」。

在商店中顯示數量規則和批發價

此頁面上

商品購物車數量

新增 Liquid 商品購物車數量程式碼

步驟如下：

新增 Javascript 購物車數量程式碼

步驟如下：

數量規則

新增 Liquid 數量規則程式碼

步驟如下：

新增 Javascript 數量規則程式碼

步驟如下：

批量購買定價

新增 Liquid 批發價程式碼

步驟如下：

新增 JAVAscript 批發價程式碼

步驟如下：

新增語言代碼

步驟如下：

準備好開始透過 Shopify 銷售商品了嗎？