Hiển thị quy tắc số lượng và mức giảm giá theo số lượng trong cửa hàng

Trang này được in vào Apr 19, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/b2b/theme-code/quantity-pricing.

Quy tắc số lượng cho danh mục B2B được hỗ trợ trong các chủ đề Shopify miễn phí, phiên bản 8.0.0 trở lên, còn giảm giá theo số lượng được hỗ trợ trong phiên bản 11.0.0 trở lên. Nếu muốn hiển thị quy tắc số lượng và mức giảm giá theo số lượng trong cửa hàng, bạn có thể cập nhật chủ đề của cửa hàng lên phiên bản mới nhất.

Nếu không muốn thay đổi hay cập nhật chủ đề, bạn có thể thêm mã sau vào chủ đề để hiển thị quy tắc số lượng và mức giảm giá theo số lượng. Trước khi cập nhật các tệp chủ đề, đảm bảo rằng bạn nhân bản chủ đề để tạo bản sao lưu.

Trên trang này

Số lượng giỏ hàng sản phẩm

Bạn có thể hiển thị giá trị số lượng giỏ hàng của mẫu mã sản phẩm trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp giá trị bằng Liquid.

Thêm mã số lượng giỏ hàng sản phẩm Liquid

Bạn có thể thêm mã vào các tệp sau trong chủ đề để hỗ trợ số lượng giỏ hàng:

  • main-product.liquid hoặc tương đương
  • featured-product.liquid hoặc tương đương

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp bạn muốn chỉnh sửa.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
{% 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>
  1. Nhấp vào Save (Lưu).

Thêm mã số lượng giỏ hàng Javascript

Khi số lượng giỏ hàng của mẫu mã thay đổi, bạn phải cập nhật giá trị hiển thị trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp giá trị cập nhật bằng mã Javascript.

Bạn có thể thêm mã vào tệp theme.js hoặc tương đương.

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp theme.js.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
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. Nhấp vào Save (Lưu).

Quy tắc số lượng

Bạn có thể hiển thị quy tắc số lượng của mẫu mã sản phẩm trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp quy tắc bằng Liquid.

Thêm mã quy tắc số lượng Liquid

Bạn có thể thêm mã vào các tệp sau trong chủ đề để hỗ trợ quy tắc số lượng:

  • main-product.liquid hoặc tương đương
  • featured-product.liquid hoặc tương đương

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp bạn muốn chỉnh sửa.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
{% 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. Nhấp vào Save (Lưu).

Thêm mã quy tắc số lượng Javascript

Mỗi mẫu mã sản phẩm đều có thể có bộ quy tắc số lượng riêng. Sau khi chọn mẫu mã khác, bạn cần cập nhật quy tắc số lượng hiển thị trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp giá trị cập nhật bằng mã Javascript.

  • theme.js hoặc tương đương
  • en.default.json

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp theme.js.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
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. Nhấp vào Save (Lưu).

Định giá theo số lượng

Thêm mã giảm giá theo số lượng Liquid

Bạn có thể thêm mã vào các tệp sau trong chủ đề để hiển thị định giá theo số lượng:

  • main-product.liquid hoặc tương đương
  • featured-product.liquid hoặc tương đương

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp bạn muốn chỉnh sửa.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
{%- 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 -%}
  1. Nhấp vào Save (Lưu).

Thêm mã giảm giá theo số lượng Javascript

Bạn có thể thêm mã vào tệp sau trong chủ đề để hiển thị mức giảm giá theo số lượng:

  • theme.js

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp theme.js.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
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');
        }
      }
    },
  );
}
  1. Nhấp vào Save (Lưu).

Thêm ngôn ngữ

Để đảm bảo quy tắc số lượng và giảm giá theo số lượng hiển thị trên tất cả các phiên bản đã dịch của cửa hàng trực tuyến, bạn có thể thêm ngôn ngữ bằng cách thêm các chuỗi bản dịch JSON sau vào tệp en.default.json.

Bước:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Mở tệp en.default.json.
  4. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí