Hiển thị quy tắc số lượng và mức giảm giá theo số lượng trong cửa hàng
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.
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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp bạn muốn chỉnh sửa.
- 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>
- 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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp
theme.js
. - 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;
});
- 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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp bạn muốn chỉnh sửa.
- 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>
-
{{- '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>
- 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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp
theme.js
. - 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;
});
- 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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp bạn muốn chỉnh sửa.
- 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 -%}
- 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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp
theme.js
. - 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');
}
}
},
);
}
- 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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- 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ã.
- Mở tệp
en.default.json
. - 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"
}
}
}
- Nhấp vào Save (Lưu).