Trợ giúp
Đăng nhập

Hiển thị quy tắc số lượng và giá theo số lượng trên cửa hàng

Bạn có thể hiển thị quy tắc số lượng và giá theo số lượng của danh mục B2B trên cửa hàng bằng cách 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à giá theo số lượng.

Trên trang này

Những điểm cần lưu ý khi thêm quy tắc số lượng và giá theo số lượng vào mã chủ đề

Trước khi thêm quy tắc số lượng và giá theo số lượng vào mã chủ đề, hãy xem xét những điểm cần lưu ý sau:

  • Đây là hướng dẫn nâng cao. Nếu không rành về việc đọc và chỉnh sửa mã chủ đề, bạn có thể làm việc với nhà phát triển hoặc thuê Đối tác của Shopify.
  • Trước khi cập nhật các tệp chủ đề, hãy đảm bảo bạn sao chép chủ đề để tạo bản sao lưu.
  • Các quy tắc số lượng cho danh mục B2B được hỗ trợ trên chủ đề Shopify miễn phí từ phiên bản 8.0.0 trở lên. Giá theo số lượng được hỗ trợ từ phiên bản 11.0.0 trở lên.

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

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

Thêm mã số lượng trong giỏ hàng của sản phẩm bằng Liquid

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

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

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp muốn chỉnh sửa.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.

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

Khi số lượng trong giỏ hàng của mẫu mã thay đổi, giá trị hiển thị trên trang sản phẩm hoặc phần sản phẩm nổi bật cần được cập nhậ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.

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp theme.js.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.

Quy tắc số lượng

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

Thêm mã quy tắc số lượng bằ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

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp muốn chỉnh sửa.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.

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

Mỗi mẫu mã sản phẩm có thể có bộ quy tắc số lượng riêng. Sau khi chọn mẫu mã khác, quy tắc số lượng hiển thị trên trang sản phẩm hoặc phần sản phẩm nổi bật cần được cập nhậ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

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp theme.js.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.

Giá theo số lượng

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

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

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

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp muốn chỉnh sửa.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.

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

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

  • theme.js

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp theme.js.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.

Thêm ngôn ngữ và vùng

Để đảm bảo quy tắc số lượng và giá theo số lượng hiển thị trên mọi 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ữ và vùng bằng cách thêm các chuỗi dịch JSON sau vào tệp en.default.json.

Các bước thực hiện:

  1. Từ bảng điều khiển quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào nút ... để mở menu hành động rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp en.default.json.

  4. Tạo dòng mới ở cuối tệp rồi thêm đoạn 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 Lưu.