在 Shopify 佈景主題中新增數量規則

此頁面列印時間為 May 28, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/b2b/catalogs/code。

僅 8.0.0 版或以上版本的免費 Shopify 佈景主題支援 B2B 目錄的數量規則。如果您不想變更或更新佈景主題，可將下列程式碼新增至佈景主題以顯示數量規則。

此頁面上

商品購物車數量

商品子類的購物車數量值會顯示在商品頁面或精選商品區段。您可使用 Liquid 程式碼擷取這個值。

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

您可以將程式碼新增到佈景主題中的下列檔案，以支援購物車數量規則：

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

步驟：

  1. 在 Shopify 管理介面 ，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 開啟要編輯的檔案。
  2. 在檔案最下方建立新的一行，然後新增下列程式碼： 
{% 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>
  1. 點擊「儲存」。

新增 Javascript 購物車數量程式碼

子類的購物車數量有所變更時，商品頁面或精選商品區段顯示的值必須更新。您可使用 Javascript 程式碼擷取更新值。

您可以將程式碼新增至 theme.js 或其他同等檔案。

步驟：

  1. 在 Shopify 管理介面 ，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 開啟 theme.js 檔案。
  2. 在檔案最下方建立新的一行，然後新增下列程式碼： 
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;
    });
  1. 點擊「儲存」。

數量規則

商品子類的數量會顯示在商品頁面或精選商品區段。您可使用 Liquid 程式碼擷取這些規則。

新增 Liquid 數量規則程式碼

您可以將程式碼新增到佈景主題中的下列檔案，以支援商品購物車數量規則：

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

步驟：

  1. 在 Shopify 管理介面 ，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 開啟要編輯的檔案。
  2. 在檔案最下方建立新的一行，然後新增下列程式碼： 
{% 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>
  1. 點擊「儲存」。

新增 Javascript 數量規則程式碼

商品的每個子類都有各自的數量規則組合。若選取了其他子類，商品頁面或精選商品區段顯示的數量規則必須更新。您可使用 Javascript 程式碼擷取更新值。

  • theme.js 或其他同等檔案
  • en.default.json

步驟：

  1. 在 Shopify 管理介面 ，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 開啟 theme.js 檔案。
  2. 在檔案最下方建立新的一行，然後新增下列程式碼： 
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;
    });
  1. 點擊「儲存」。

新增語言代碼

新增 JSON 翻譯字串

步驟：

  1. 在 Shopify 管理介面 ，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

  1. 開啟 en.default.json 檔案。
  2. 在檔案最下方建立新的一行，然後新增下列程式碼： 
{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}
  1. 點擊「儲存」。

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

免費試用