Hiển thị đơn giá
Nếu bán sản phẩm theo số lượng hoặc kích thước, có thể bạn sẽ cần hiển thị giá cho mỗi đơn vị của một số sản phẩm nhất định. Khi bạn nhập đơn giá cho sản phẩm, đơn giá được hiển thị trên trang sản phẩm, trang bộ sưu tập, trang giỏ hàng, trang thanh toán và thông báo xác nhận đơn hàng.
Trên trang này
Thêm đơn giá cho sản phẩm
Trong trang quản trị Shopify, vào mục Sản phẩm.
Nhấp vào sản phẩm bạn muốn chỉnh sửa.
Không bắt buộc: Nếu sản phẩm có nhiều mẫu mã thì trong mục Mẫu mã, nhấp vào mẫu mã bạn muốn chỉnh sửa.
Trong mục Định giá, chọn Hiển thị đơn giá cho sản phẩm này.
Trong trường Tổng kích thước sản phẩm, nhập tổng kích thước của sản phẩm, sau đó chọn đơn vị đo lường.
Không bắt buộc: Trong trường Phép đo cơ sở, thêm phép đo cơ sở, sau đó chọn đơn vị đo. Ví dụ: Đối với sản phẩm nặng 1 kg, bạn có thể chọn đơn vị cơ sở là 100 g.
Nhấp vào Save (Lưu).
- Trong Ứng dụng Shopify, vào mục Sản phẩm > All products (Tất cả sản phẩm).
- Chạm vào sản phẩm bạn muốn chỉnh sửa.
- Chạm vào khu vực giá sản phẩm.
- Chọn Hiển thị đơn giá.
- Trong trường Tổng kích thước sản phẩm, nhập tổng kích thước của sản phẩm, sau đó chọn đơn vị đo lường.
- Không bắt buộc: Trong trường Phép đo cơ sở, thêm phép đo cơ sở, sau đó chọn đơn vị đo. Ví dụ: Đối với sản phẩm nặng 1 kg, bạn có thể chọn đơn vị cơ sở là 100 g.
- Chạm vào Save (Lưu).
- Trong Ứng dụng Shopify, vào mục Sản phẩm > All products (Tất cả sản phẩm).
- Chạm vào sản phẩm bạn muốn chỉnh sửa.
- Chạm vào khu vực giá sản phẩm.
- Chọn Hiển thị đơn giá.
- Trong trường Tổng kích thước sản phẩm, nhập tổng kích thước của sản phẩm, sau đó chọn đơn vị đo lường.
- Không bắt buộc: Trong trường Phép đo cơ sở, thêm phép đo cơ sở, sau đó chọn đơn vị đo. Ví dụ: Đối với sản phẩm nặng 1 kg, bạn có thể chọn đơn vị cơ sở là 100 g.
- Chạm vào ✓.
Hiển thị đơn giá trên cửa hàng trực tuyến
Tất cả chủ đề Online Store 2.0 đều có tính năng đơn giá. Không cần thực hiện thao tác nào để hiển thị đơn giá trên cửa hàng trực tuyến.
Nếu có chủ đề cổ điển và không thể cập nhật lên phiên bản hỗ trợ tính năng đơn giá, bạn có thể tùy chỉnh mã chủ đề theo cách thủ công để hiển thị đơn giá.
Hiển thị đơn giá trên chủ đề cũ
Có nhiều bước tùy chỉnh khác nhau phụ thuộc vào chủ đề bạn chọn. Nhấp vào nút chủ đề của bạn trước khi thực hiện theo hướng dẫn dưới đây:
Các bước thực hiện dành cho chủ đề Khai trương
Có thể sử dụng đơn giá trong chủ đề Khai trương cho các phiên bản từ 12.1.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất, bạn có thể thêm tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Khai trương.
Sửa đoạn mã giá sản phẩm
Trong thư mục Đoạn mã, nhấp vào tệp
product-price.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
data-price
:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>
- Thay thế mã bằng đoạn mã sau:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
price__sale
:
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
</dd>
</div>
- Thêm mã sau vào phía dưới thẻ có kết thúc là
</div>
:
{% if variant.unit_price_measurement %}
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
{% endif %}
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Sửa trang giỏ hàng
Trong thư mục Sections, nhấp vào tập tin
cart-template.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
cart__price-wrapper
:
{%- if item.original_price != item.final_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}
- Thay thế mã bằng đoạn mã sau:
<dl>
{%- if item.original_price != item.final_price -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_price | money }}</span>
</dd>
{%- else -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{{ item.original_price | money }}
</dd>
{%- endif -%}
{%- if item.unit_price_measurement -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd>
<span class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</dd>
{%- endif -%}
</dl>
Sau khi chỉnh sửa, tệp cart-template.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa trang bộ sưu tập
Trong thư mục Sections, nhấp vào tập tin
collection.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
grid-view-item__title
:
{% include 'product-price' %}
- Thay thế mã bằng đoạn mã sau:
{% include 'product-price', variant: nil %}
Sau khi chỉnh sửa, tệp collection.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Sửa lưới thẻ sản phẩm
Trong thư mục Đoạn mã, nhấp vào tệp
product-card-grid.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
grid-view-item__title
:
{% include 'product-price', variant: product %}
- Thay thế mã bằng đoạn mã sau:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Sau khi chỉnh sửa, tệp product-card-grid.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa danh sách thẻ sản phẩm
Trong thư mục Đoạn mã, nhấp vào tệp
product-card-list.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm
{% if product.available %}
:
{% include 'product-price', variant: product %}
- Thay thế mã bằng đoạn mã sau:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Sau khi chỉnh sửa, tệp product-card-list.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa trang đơn hàng
Trong thư mục Templates, nhấp vào tập tin
customers/order.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm
data-label="{{ 'customer.order.price' | t }}"
:
{%- if line_item.original_price != line_item.final_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ line_item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ line_item.final_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- Thay thế mã bằng đoạn mã sau:
<dl>
{%- if line_item.original_price != line_item.final_price -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ line_item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ line_item.final_price | money }}</span>
</dd>
{%- else -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{{ line_item.original_price | money }}
</dd>
{%- endif -%}
{%- if line_item.unit_price_measurement -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd>
<span class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</dd>
{%- endif -%}
</dl>
Sau khi chỉnh sửa, tệp customers/order.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa kiểu chủ đề
Trong thư mục Tài sản, nhấp vào tệp
theme.scss.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
.price__vendor {
:
.price__vendor {
color: $color-body-text;
font-size: 0.9em;
font-weight: $font-weight-body;
text-transform: uppercase;
letter-spacing: 1px;
margin: 5px 0 10px;
width: 100%;
@include flex-basis(100%);
}
- Thêm đoạn mã sau vào phía dưới mã ở bước 2:
.price__unit {
@include flex-basis(100%);
display: none;
.price--unit-available & {
display: block;
}
}
.price-unit-price {
color: $color-body-text;
font-size: 0.8em;
}
Sau khi chỉnh sửa, tệp theme.scss.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Sửa mã chủ đề javascript
Trong thư mục Tài sản, nhấp vào tệp
theme.js
.Dùng phím tắt tìm kiếm để tìm mã sau:
salePrice: '[data-sale-price]'
- Thêm đoạn mã sau vào phía trên mã ở bước 2:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
productOnSale: 'price--on-sale',
- Thêm đoạn mã sau vào phía sau mã ở bước 4:
productUnitAvailable: 'price--unit-available',
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- Thay thế mã bằng đoạn mã sau:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- Dùng phím tắt tìm kiếm để tìm mã sau:
var salePrice = '';
- Thêm đoạn mã sau vào phía dưới mã ở bước 8:
var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
unitLabel = theme.strings.unitPrice;
unitPrice =
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
' ' +
theme.strings.unitPriceSeparator +
' ' +
this._getBaseUnit(variant);
}
- Dùng phím tắt tìm kiếm để tìm mã sau:
.replace('[$]', salePrice)
- Thêm đoạn mã sau vào phía dưới mã ở bước 10:
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
_updatePrice: function(evt) {
- Thêm đoạn mã sau vào phía trước mã ở bước 12:
_getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
- Dùng phím tắt tìm kiếm để tìm mã sau:
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- Thêm đoạn mã sau vào phía dưới mã ở bước 14:
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- Dùng phím tắt tìm kiếm để tìm mã sau:
.removeClass(this.classes.productOnSale)
- Thêm đoạn mã sau vào phía dưới mã ở bước 16:
.removeClass(this.classes.productUnitAvailable)
- Dùng phím tắt tìm kiếm để tìm mã sau:
else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
}
- Thêm đoạn mã sau vào phía dưới mã ở bước 18:
// Unit price
if (variant.unit_price_measurement) {
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
);
$unitPriceBaseUnit.html(this._getBaseUnit(variant));
$priceContainer.addClass(this.classes.productUnitAvailable);
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa bản dịch tiếng Anh
Trong thư mục Locales, nhấp vào tập tin
en.default.json
.Dùng phím tắt tìm kiếm để tìm mã sau:
"selection_help": "press the space key then arrow keys to make a selection"
- Thêm đoạn mã sau vào phía trên mã ở bước 2:
"unit_price_separator": "per",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
"include_taxes": "Tax included.",
- Thêm đoạn mã sau vào phía dưới mã ở bước 4:
"unit_price_label": "Unit price",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa bố cục chủ đề
Trong thư mục Layout, nhấp vào tập tin
theme.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau:
regularPrice: {{ 'products.product.regular_price' | t | json }},
- Thêm đoạn mã sau vào phía dưới mã ở bước 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Sau khi chỉnh sửa, tệp theme.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác
Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.
Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.
Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.
Nhập
Unit Price
vào trường tìm kiếm.Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.
Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.
Nhấp vào Save (Lưu).
Các bước dành cho chủ đề Brooklyn
Có thể sử dụng đơn giá trong chủ đề Brooklyn cho các phiên bản từ 13.1.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất thì bạn có thể thêm tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Brooklyn.
Thêm đoạn mã giá sản phẩm
Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.
Nhập
product-price
vào trường tên.Sao chép và dán mã sau vào tập tin.
<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
{%- if variant.compare_at_price > variant.price -%}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ variant.compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{%- endif -%}
<span id="ProductPrice"
class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
itemprop="price"
content="{{ variant.price | divided_by: 100.00 }}">
{{ variant.price | money }}
</span>
<div class="product-single__unit">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa trang sản phẩm nổi bật
Trong thư mục Sections (Phần), nhấp vào tập tin
featured-product.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
itemprop="offers"
:
<div data-price-container>
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if compare_at_price > price %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
itemprop="price"
content="{{ price | divided_by: 100.00 }}"
{% unless current_variant.available %}aria-hidden="true"{% endunless %}>
{{ price | money }}
</span>
</div>
- Thay thế mã bằng đoạn mã sau:
{% include 'product-price', variant: current_variant %}
Sau khi chỉnh sửa, tệp featured-product.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa trang sản phẩm
Trong thư mục Sections (Phần), nhấp vào tập tin
product-template.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
itemprop="offers"
:
<div data-price-container>
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if current_variant.compare_at_price > current_variant.price %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ current_variant.compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
itemprop="price"
content="{{ current_variant.price | divided_by: 100.00 }}"
{% unless current_variant.available %}aria-hidden="true"{% endunless %}>
{{ current_variant.price | money }}
</span>
</div>
- Thay thế mã bằng đoạn mã sau:
{% include 'product-price', variant: current_variant %}
Sau khi chỉnh sửa, tệp product-template.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa giỏ hàng ajax
Trong thư mục Đoạn mã, nhấp vào tệp
ajax-cart-template.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm
<span class="ajaxcart__price">{{{price}}}</span>
:
{{#if discountsApplied}}
<span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
<del class="ajaxcart__price">{{{price}}}</del>
<span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
<span class="ajaxcart__price">{{{discountedPrice}}}</span>
{{else}}
<span class="ajaxcart__price">{{{price}}}</span>
{{/if}}
- Thêm mã sau vào bên dưới
{{/if}}
ở bước 2:
{{#if unitPrice}}
<span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
<span class="cart__unit-price">
{% endraw %}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{'general.accessibility.unit_price_separator' | t}} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Sau khi chỉnh sửa, tệp ajax-cart-template.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa mục của lưới sản phẩm
Trong thư mục Đoạn mã, nhấp vào tệp
product-grid-template.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
capture img_id_class
:
{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
- Thêm đoạn mã sau vào phía trước mã ở bước 2:
{%- assign variant = product.selected_or_first_available_variant -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm
{{ product.price | money_without_trailing_zeros }}
:
<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>
- Thêm mã sau vào bên dưới
</span>
:
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa trang giỏ hàng
Trong thư mục Templates, nhấp vào tập tin
cart.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
<span class="cart__price">
:
{%- if item.original_line_price != item.final_line_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del class="cart__price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}
- Thêm đoạn mã sau vào phía dưới mã ở bước 2:
{%- if item.unit_price_measurement -%}
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span class="cart__unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Sau khi chỉnh sửa, tệp cart.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa trang đơn hàng
Trong thư mục Templates, nhấp vào tập tin
customers/order.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm
{{ line_item.original_price | money }}
:
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</td>
- Thêm đoạn mã sau đây vào phía trước
</td>
ở bước 2:
{%- if line_item.unit_price_measurement -%}
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span class="product-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Sau khi chỉnh sửa, tệp customers/order.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa kiểu chủ đề - Phần 1
Trong thư mục Tài sản, nhấp vào tệp
theme.scss.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
.ajaxcart__price {
:
.ajaxcart__price {
font-size: em(13px);
display: block;
}
- Thêm đoạn mã sau vào phía dưới mã ở bước 2:
.cart__unit-price {
display: block;
}
Sau khi chỉnh sửa, tệp theme.scss.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa kiểu chủ đề - Phần 2
Trong thư mục Tài sản, nhấp vào tệp
timber.scss.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
.product-single__policies {
:
.product-single__policies {
margin: 15px 0 25px 0;
}
- Thêm đoạn mã sau vào phía trên mã ở bước 2:
.product-single__unit {
display: none;
.price-container--unit-available & {
display: block;
}
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Đi đến cuối tệp và thêm mã sau:
.product-unit-price {
color: $colorTextBody;
display: block;
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa mã chủ đề JavaScript
Trong thư mục Tài sản, nhấp vào tệp
theme.js.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau:
var prodImg;
- Thêm đoạn mã sau vào phía dưới mã ở bước 2:
var unitPrice = null;
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
// Create item's data object and add to 'items' array
- Thêm đoạn mã sau vào phía trên mã ở bước 4:
if (cartItem.unit_price_measurement) {
unitPrice = {
addRefererenceValue:
cartItem.unit_price_measurement.reference_value !== 1,
price: theme.Currency.formatMoney(
cartItem.unit_price,
settings.moneyFormat
),
reference_value: cartItem.unit_price_measurement.reference_value,
reference_unit: cartItem.unit_price_measurement.reference_unit
};
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
vendor: cartItem.vendor
- Thêm đoạn mã sau vào phía trên mã ở bước 6:
unitPrice: unitPrice,
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
productPrice: '#ProductPrice',
- Thêm đoạn mã sau vào phía dưới mã ở bước 8:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
$(this.selectors.priceContainer, this.$container).removeClass(
:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden'
);
- Thay thế mã bằng đoạn mã sau:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
$(this.selectors.SKU).html(variant.sku);
- Thêm đoạn mã sau vào phía trên mã ở bước 12:
if (variant.unit_price_measurement) {
var $unitPrice = $(this.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
this.$container
);
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, moneyFormat)
);
$unitPriceBaseUnit.html(this.getBaseUnit(variant));
$(this.selectors.priceContainer, this.$container).addClass(
'price-container--unit-available'
);
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm
this.destroyImageCarousel();
:
onUnload: function() {
this.$container.off(this.settings.namespace);
this.destroyImageCarousel();
}
- Thêm đoạn mã sau vào phía trên mã ở bước 14:
getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa bản dịch tiếng Anh
Trong thư mục Locales (Ngôn ngữ), nhấp vào tập tin
en.default.json
.Dùng phím tắt tìm kiếm để tìm mã sau:
"refresh_page": "choosing a selection results in a full page refresh"
- Thêm đoạn mã sau vào phía trên mã ở bước 2:
"unit_price_separator": "per",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
"include_taxes": "Tax included.",
- Thêm đoạn mã sau vào phía dưới mã ở bước 4:
"unit_price": "Unit price",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác
Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.
Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định
Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.
Nhập
Unit Price
vào trường tìm kiếm.Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.
Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Cài đặt chung.
Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Minimal
Có thể sử dụng đơn giá trong chủ đề Minimal cho các phiên bản từ 12.1.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất thì bạn có thể thêm tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Minimal.
Cập nhật Đoạn mã
Tìm và mở thư mục Snippets.
Chọn Thêm đoạn mã mới.
Nhập tên
product-unit-price
.Sao chép và dán mã sau vào
product-unit-price.liquid
.
{%- unless available -%}
{%- if variant.title -%}
{%- assign available = variant.available -%}
{%- else -%}
{%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
Nhấp vào Save (Lưu).
Tìm và chỉnh sửa tập tin
product-grid-item.liquid
.Thay dòng sau:
{% capture price %}{{ featured.price | money }}{% endcapture %}
Bằng dòng sau:
{%- assign price = featured.price | money -%}
- Dùng phím tắt tìm kiếm để tìm
{{ price }}
và thêm mã sau vào phía dưới:
{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}
Sau khi chỉnh sửa, tệp product-grid-item.liquid
sẽ có dạng như sau:
Nhấp vào Save (Lưu) để xác nhận thay đổi.
Tìm và sửa tệp
search-result.liquid
Dùng phím tắt tìm kiếm để tìm
{% if item.object_type == 'product' %}
và thêm mã sau vào dòng bên dưới:
{%- assign variant = item.selected_or_first_available_variant -%}
- Bây giờ, dùng phím tắt tìm kiếm để tìm hai đoạn mã sau:
<s><small>{{ item.compare_at_price_max | money }}</small></s>
Và
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
{{ item.price | money }}
</span>
- Thêm khối mã sau vào phía dưới cả hai đoạn mã được liệt kê trong bước trước.
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
Sau khi chỉnh sửa, tệp search-result.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật kiểu
Tìm và mở thư mục Assets.
Chỉnh sửa tập tin
theme.scss.liquid
.Dùng phím tắt tìm kiếm để tìm khối mã sau:
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
font-family: $headerFontStack;
- Dùng phím tắt tìm kiếm để tìm đoạn mã sau:
.grid-link__sale_price {
opacity: 0.95;
filter: alpha(opacity=95);
}
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
.grid-link__unit-price {
font-size: 1em;
}
- Dùng phím tắt tìm kiếm để tìm đoạn mã sau:
.order-discount--list {
margin: 0.8em 0 0.6em 1.3em;
list-style: none;
padding: 0;
}
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
.order-discount--price {
margin-bottom: 0;
}
- Dùng phím tắt tìm kiếm để tìm đoạn mã sau:
.cart__product-title {
display: inline-block;
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
font-weight: $bodyFontWeightBold;
Sau khi chỉnh sửa, tệp theme.scss.liquid
sẽ có dạng như sau:
Nhấp vào Save (Lưu) để xác nhận thay đổi.
Tìm và sửa tệp
timber.scss.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau:
.quantity-selector {
display: inline-block;
}
}
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
.product-single__title {
font-weight: $bodyFontWeightBold;
}
- Chèn mã sau vào cuối tập tin:
.product-unit-price {
color: rgba($colorTextBody, 0.6);
display: block;
font-family: $headerFontStack;
font-size: em(12px);
}
Sau khi chỉnh sửa, tệp timber.scss.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật mẫu
Tìm và mở thư mục Templates.
Tìm và sửa tệp
customers/order.liquid
.Dùng phím tắt tìm kiếm để tìm mã sau:
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- Thêm mã sau vào phía dưới mã ở bước 3:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Sau khi chỉnh sửa, tệp customers/order.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật JavaScript
Tìm và chỉnh sửa
theme.js
trong thư mục Assets.Dùng phím tắt tìm kiếm để tìm dòng chứa
.shopify-payment-button
rồi thay bằng:
$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)
Khối mã đó trông sẽ như sau:
- Hãy tìm mã sau:
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}
- Thêm mã sau vào phía dưới:
// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
this.selectors.$unitPrice.html(
Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
);
this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
this.selectors.$unitPriceContainer.removeClass('hide');
}
Kết quả trông sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm mã sau:
.attr('data-zoom')
});
});
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
},
getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
Kết quả trông sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật mẫu giỏ hàng
Tìm và mở rộng thư mục Các phần.
Chỉnh sửa tập tin
cart-template.liquid
.Dùng phím tắt tìm kiếm để tìm mã
<span class="order-discount h5">{{ item.final_price | money }}</span>
.Thay dòng này bằng mã sau:
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
- Tìm lần xuất hiện đầu tiên của mã
{%- if item.line_level_discount_allocations != blank -%}
:
{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
<span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
- Thêm khối mã sau vào phía trên mã ở bước 5:
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}
Sau khi chỉnh sửa, tệp cart-template.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật sản phẩm nổi bật
Tìm và mở rộng thư mục Các phần.
Chỉnh sửa tập tin
featured-product.liquid
.Dùng phím tắt tìm kiếm để tìm dòng chứa
itemprop="name"
rồi thay bằng:
<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
- Tìm mã chứa
id="PriceA11y"
:
{% if compare_at_price > price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price">
{ compare_at_price | money }}
</s>
{% endif %}
- Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:
{% include 'product-unit-price', variant: variant, available: true %}
Sau khi chỉnh sửa, tệp featured-product.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật mẫu sản phẩm
Tìm và mở rộng thư mục Các phần.
Chỉnh sửa tập tin
product-template.liquid
.Dùng phím tắt tìm kiếm để tìm dòng chứa
itemprop="name"
rồi thay bằng:
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
- Dùng phím tắt tìm kiếm để tìm mã sau:
{% else %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price hide">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
- Thêm dòng sau vào phía dưới:
{% include 'product-unit-price', variant: variant, available: true %}
Sau khi chỉnh sửa, tệp product-template.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Cập nhật ngôn ngữ
Tìm và mở rộng thư mục Vị trí.
Mở và chỉnh sửa tập tin
en.default.json
.Dùng phím tắt tìm kiếm để tìm dòng chứa
refresh_page
rồi thay bằng:
"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"
Kết quả trông sẽ như sau:
- Tìm dòng có chứa
full_details
rồi thay bằng:
"full_details": "Full details",
"unit_price_label": "Unit price"
Kết quả trông sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác
Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.
Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.
Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.
Nhập
Unit Price
vào trường tìm kiếm.Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.
Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.
Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Venture
Đơn giá đã được thêm vào chủ đề Venture cho các phiên bản từ 9.4.0 trở lên. Nếu bạn không thể cập nhật chủ đề lên phiên bản mới nhất, hãy làm theo các bước sau để áp dụng mục tùy chỉnh đơn giá cho những phiên bản trước của chủ đề Venture.
Chỉnh sửa tập tin ngôn ngữ của chủ đề
Trong thư mục Locales, nhấp vào
en.default.json
.Dùng phím tắt tìm kiếm để tìm dòng chứa
refresh_page
:
"refresh_page": "choosing a selection results in a full page refresh"
- Thêm mã sau vào phía trên dòng ở bước 2:
"unit_price_separator": "per",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng chứa
stock_unavailable
:
"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."
- Thêm mã sau vào phía trên dòng ở bước 4:
"unit_price_label": "Unit price",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa bảng kiểu của chủ đề
Trong thư mục Assets, nhấp vào
theme.scss.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
.product-single__policies {
:
.product-single__policies {
font-size: em($font-size-base - 1);
}
- Thêm mã sau đây vào phía dưới thẻ có kết thúc là
}
của khối mã tìm thấy ở bước 2:
.product-unit-price {
font-size: em(12);
color: $color-body-text;
}
.product-card__unit-price {
display: block;
}
Sau khi chỉnh sửa, tệp theme.scss.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Thêm đoạn mã đơn giá sản phẩm
Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.
Nhập tên
product-unit-price
.Thêm mã sau đây vào
product-unit-price.liquid
:
<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{- product_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
<span data-unit-price>{{ product_variant.unit_price | money }}</span>
{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa đoạn mã thẻ sản phẩm
Trong thư mục Snippets (Đoạn mã), nhấp vào
product-card.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
<a href="{{ product.url | within: collection }}"
.Thêm mã sau vào phía trên dòng ở bước 2:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng
<div class="product-card__price">
:
<div class="product-card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% endif %}
</div>
- Thêm mã sau đây vào phía trên thẻ có kết thúc là
</div>
tìm thấy ở bước 5:
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa mẫu trang giỏ hàng
Trong thư mục Sections (Phần), nhấp vào
cart-template.liquid
.Dùng phím tắt tìm kiếm để tìm lần xuất hiện đầu tiên của
<td class="cart__cell--total">
:
<td class="cart__cell--total">
{%- if item.original_line_price != item.final_line_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del class="cart__item-total">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="cart__item-total">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__item-total">{{ item.original_line_price | money }}</span>
{%- endif -%}
- Thêm mã sau vào phía dưới thẻ
endif
ở bước 2:
{%- if item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: item %}
{%- endif -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm lần xuất hiện thứ hai của
<td class="cart__cell--total">
:
<td class="cart__cell--total">
{{#if discountsApplied}}
<span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
<del class="cart__item-total">{{{originalLinePrice}}}</del>
<span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
<span class="cart__item-total">{{{linePrice}}}</span>
{{else}}
<span class="cart__item-total">{{{originalLinePrice}}}</span>
{{/if}}
{{#if discountsApplied}}
<ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
{{#each discounts}}
<li class="order-discount__item">
{% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
</li>
{{/each}}
</ul>
{{/if}}
- Thêm mã sau vào phía trên thẻ thứ hai có kết thúc là
{{/if}}
ở bước 4:
{{#if unitPrice}}
<span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
<span class="product-unit-price">
{% endraw %}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa mẫu trang sản phẩm nổi bật
Trong thư mục Sections (Phần), nhấp vào
featured-product.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
{% assign current_variant = product.selected_or_first_available_variant %}
.Thêm mã sau vào phía dưới dòng ở bước 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng chứa
<ul class="product-single__meta-list
:
<ul class="product-single__meta-list list--no-bullets list--inline">
<li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<div class="product-tag">
{{ 'products.product.on_sale' | t }}
</div>
</li>
<li>
{% unless product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endunless %}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{% if section.settings.stock_enable %}
Phía dưới thẻ
ul
này, hãy tìm mã{% if section.settings.stock_enable %}
.Thêm mã sau vào phía trên khối
if
ở bước 6:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Sửa mẫu trang sản phẩm
Trong thư mục Sections (Phần), nhấp vào
product-template.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
{% assign current_variant = product.selected_or_first_available_variant %}
.Thêm mã sau vào phía dưới dòng ở bước 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng chứa
<ul class="product-single__meta-list
:
<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<div class="product-tag">
{{ 'products.product.on_sale' | t }}
</div>
</li>
<li>
{% unless product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endunless %}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{% if section.settings.stock_enable %}
Phía dưới thẻ
ul
này, hãy tìm mã{% if section.settings.stock_enable %}
.Thêm mã sau đây vào phía trên khối
if
tìm thấy ở bước 5:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa mẫu đơn hàng của khách hàng
Trong thư mục Templates, nhấp vào
customers/order.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
:
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</td>
- Thay mã ở bước 2 bằng mã sau:
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
<div>
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</div>
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: line_item %}
{%- endif -%}
</td>
Sau khi chỉnh sửa, tệp customers/order.liquid
sẽ có dạng như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
Chỉnh sửa tập tin JavaScript của chủ đề
Trong thư mục Assets, nhấp vào
theme.js
.Dùng phím tắt tìm kiếm để tìm dòng
// Create item's data object and add to 'items' array
.Thêm mã sau vào phía trên dòng ở bước 2:
var unitPrice = null;
if (cartItem.unit_price_measurement) {
unitPrice = {
addRefererenceValue:
cartItem.unit_price_measurement.reference_value !== 1,
price: theme.Currency.formatMoney(
cartItem.unit_price,
theme.moneyFormat
),
reference_value: cartItem.unit_price_measurement.reference_value,
reference_unit: cartItem.unit_price_measurement.reference_unit
};
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
Dùng phím tắt tìm kiếm để tìm dòng
vendor: cartItem.vendor,
Thêm mã sau vào phía dưới dòng ở bước 4:
unitPrice: unitPrice,
Sau khi chỉnh sửa, kết quả sẽ như sau:
Dùng phím tắt tìm kiếm để tìm dòng
shopifyPaymentButton: '.shopify-payment-button'
.Thay dòng tìm thấy ở bước 6 bằng mã sau:
shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'
Sau khi chỉnh sửa, kết quả sẽ như sau:
Dùng phím tắt tìm kiếm để tìm dòng
_updateSKU: function(evt) {
.Thêm mã sau vào phía trên dòng ở bước 8:
_getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng
this._updateIncomingInfo(variant);
:
} else {
// Variant is sold out, disable the submit button
cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
cache.$addToCartText.html(theme.strings.soldOut);
$(this.selectors.shopifyPaymentButton, this.$container).hide();
// Update when stock will be available
this._updateIncomingInfo(variant);
}
- Thêm mã sau vào phía dưới thẻ có kết thúc là
}
ở bước 10:
$(this.selectors.unitPriceContainer, this.$container).addClass('hide');
if (variant.unit_price_measurement) {
var $unitPrice = $(this.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
this.$container
);
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
);
$unitPriceBaseUnit.html(this._getBaseUnit(variant));
$(this.selectors.unitPriceContainer, this.$container).removeClass(
'hide'
);
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Save (Lưu) để xác nhận thay đổi.
(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác
Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.
Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.
Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.
Nhập
Unit Price
vào trường tìm kiếm.Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.
Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.
Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Cung ứng
Đơn giá đã được thêm vào chủ đề Cung ứng cho các phiên bản từ 8.3.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất, hãy làm theo các bước sau để áp dụng tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Cung ứng.
Thêm đoạn mã đơn giá sản phẩm
Tìm và mở rộng thư mục Snippets (Đoạn mã).
Chọn Thêm đoạn mã mới.
Nhập tên
product-unit-price
.Sao chép và dán mã sau vào tệp rồi chọn Lưu.
{%- unless available -%}
{%- if variant.title -%}
{%- assign available = variant.available -%}
{%- else -%}
{%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>
Sau khi chỉnh sửa, tệp product-unit-price.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa mẫu sản phẩm nổi bật
Tìm và mở rộng thư mục Các phần, sau đó chọn tệp
featured-product.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
{% include 'price' with price %}
trong tập tin:
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with price %}
</span>
</li>
- Thêm mã sau vào phía dưới đoạn mã có kết thúc là
</span>
ở bước 2:
{% include 'product-unit-price' variant: variant %}
Sau khi chỉnh sửa, tệp featured-product.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa mẫu sản phẩm
Tìm và mở rộng thư mục Các phần, sau đó chọn tệp
product-template.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
{% include 'price' with variant.price %}
trong tập tin:
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
</li>
- Thêm mã sau vào phía dưới thẻ có kết thúc là
</span>
ở bước 2:
{% include 'product-unit-price', variant: variant %}
Sau khi chỉnh sửa, tệp product-template.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa đoạn mã mục của lưới sản phẩm
Tìm và mở rộng thư mục Đoạn mã, sau đó chọn tệp
product-grid-item.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
{% if on_sale and section.settings.product_show_saved_amount %}
trong tập tin:
{% if on_sale and section.settings.product_show_saved_amount %}
<span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</span>
{% endif %}
</div>
- Thay thế mã bằng đoạn mã sau:
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</div>
{% endif %}
Sau khi chỉnh sửa, tệp product-grid-item.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa đoạn mã mục của danh sách sản phẩm
Tìm và mở rộng thư mục Đoạn mã, sau đó chọn tệp
product-list-item.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
<div class="product-item--price text-center">
trong tập tin:
<div class="product-item--price text-center">
<p class="h1 medium-down--left">
{% if on_sale %}
<span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
{% else %}
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% endif %}
{% include 'price' with product.price %}
{% if on_sale and section.settings.product_show_compare_at_price %}
<small>
<s>
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% include 'price' with product.compare_at_price %}
</s>
</small>
{% endif %}
</p>
{% if on_sale and section.settings.product_show_saved_amount %}
<span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</span>
- Thay thế mã bằng đoạn mã sau:
<div class="text-center">
<div class="product-item--price">
<p class="h1 medium-down--left">
{% if on_sale %}
<span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
{% else %}
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% endif %}
{% include 'price' with product.price %}
{% if on_sale and section.settings.product_show_compare_at_price %}
<small>
<s>
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% include 'price' with product.compare_at_price %}
</s>
</small>
{% endif %}
</p>
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</div>
Sau khi chỉnh sửa, tệp product-list-item.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa đoạn mã về kết quả tìm kiếm dạng lưới
Tìm và mở rộng thư mục Đoạn mã, sau đó chọn tệp
search-result-grid.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
{% if on_sale and section.settings.product_show_saved_amount %}
trong tập tin:
{% if on_sale and section.settings.product_show_saved_amount %}
<span class="sale-tag medium--right">
{% assign compare_price = item.compare_at_price %}
{% assign product_price = item.price %}
{% include 'price-sale' %}
</span>
{% endif %}
</div>
- Thay thế mã bằng đoạn mã sau:
{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item.first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag medium--right">
{% assign compare_price = item.compare_at_price %}
{% assign product_price = item.price %}
{% include 'price-sale' %}
</div>
{% endif %}
Sau khi chỉnh sửa, tệp search-result-grid.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa mẫu giỏ hàng
Tìm và mở rộng thư mục Templates, rồi chọn tập tin
cart.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
<del class="cart-original-price order-discount--cart-price">
trong tập tin:
<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
- Thay thế mã bằng đoạn mã sau:
<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}
Sau khi chỉnh sửa, tệp cart.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa mẫu Đơn hàng
Tìm và mở rộng thư mục Templates, rồi chọn tập tin
customers/order.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
<td class="text-right" data-label="customer.order.price">
trong tập tin:
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</td>
- Thêm mã sau vào bên trên thẻ có kết thúc là
</td>
ở bước 2:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Sau khi chỉnh sửa, tệp customers/order.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa bố cục chủ đề
Tìm và mở rộng thư mục Layout (Bố cục) rồi chọn tập tin
theme.liquid
.Dùng phím tắt tìm kiếm để tìm dòng chứa
only_left:
trong tập tin:
product:{
unavailable: {{ 'products.product.unavailable' | t | json }},
will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},
- Thêm mã sau vào phía trên
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
ở bước 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Sau khi chỉnh sửa, tệp theme.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa kiểu chủ đề
Tìm và mở rộng thư mục Các phần, sau đó chọn tệp
theme.scss.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
.product-item--price {
trong tập tin:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom: $gutter/2;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
- Thay thế mã bằng đoạn mã sau:
.product-item--price {
@include clearfix;
margin-bottom: $gutter/2;
.h1 {
margin-bottom: 0;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
.product-price-unit {
display: none;
font-size: em(12px);
margin-right: 10px;
.cart-pricing &,
.order-table & {
margin-right: 0;
}
&.product-price-unit--available {
display: block;
}
}
Sau khi chỉnh sửa, tệp theme.scss.liquid
sẽ có dạng như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Sửa mã chủ đề JavaScript
Tìm và mở rộng thư mục Assets (Tài sản) rồi chọn tập tin
theme.js.liquid
.Dùng phím tắt tìm kiếm để tìm dòng
originalSelectorId: 'productSelect-' + sectionId,
trong tập tin:
selectors: {
originalSelectorId: 'productSelect-' + sectionId,
$addToCart: $('#addToCart-' + sectionId),
$SKU: $('.variant-sku', this.$container),
$productPrice: $('#productPrice-' + sectionId),
$comparePrice: $('#comparePrice-' + sectionId),
$addToCartText: $('#addToCartText-' + sectionId),
$quantityElements: $('#quantity-selector-' + sectionId),
$variantQuantity: $('#variantQuantity-' + sectionId),
$variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
$variantIncoming: $('#variantIncoming-' + sectionId),
$variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
$productImageContainer: $('#productPhotoContainer-' + sectionId),
$productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
$productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
$productFullDetails: $('.full-details', this.$container),
$thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
$shopifyPaymentButton: '.shopify-payment-button'
}
- Thêm mã sau vào bên trên
originalSelectorId: 'productSelect-' + sectionId,
ở bước 2:
unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng
productVariantCallback: function(variant) {
trong tập tin:
productVariantCallback: function(variant) {
var self = this;
if (variant) {
// Update variant image, if one is set
if (variant.featured_image) {
var newImg = variant.featured_image;
var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');
$newImage.removeClass('hide');
$otherImages.addClass('hide');
}
- Thêm mã sau đây vào bên dưới
if (variant) {
ở bước 2:
// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);
$unitPriceContainer.removeClass('product-price-unit--available');
if (variant.unit_price_measurement) {
var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);
$unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
$unitPriceBaseUnit.text(this.getBaseUnit(variant));
$unitPriceContainer.addClass('product-price-unit--available');
}
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
trong tập tin:
customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';
- Thay dòng
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
bằng đoạn mã sau:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
trong tập tin:
} else {
// The variant doesn't exist, disable submit button.
// This may be an error or notice that a specific variant is not available.
this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
this.settings.selectors.$variantQuantity.removeClass('is-visible');
this.settings.selectors.$quantityElements.hide();
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}
- Thêm đoạn mã sau vào phía dưới mã ở bước 11:
},
getBaseUnit: function (variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
Chỉnh sửa tập tin ngôn ngữ của chủ đề
Tìm và mở rộng thư mục Locales (Ngôn ngữ) rồi chọn tập tin
en.default.json
.Dùng phím tắt tìm kiếm để tìm dòng chứa
"refresh_page"
trong tập tin:
"accessibility": {
"refresh_page": "choosing a selection results in a full page refresh"
},
- Thêm mã sau vào bên trên
"refresh_page"
ở bước 2:
"unit_price_separator": "per",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Dùng phím tắt tìm kiếm để tìm dòng chứa
"will_be_in_stock_after"
trong tập tin:
"product": {
"sold_out": "Sold Out",
"will_not_ship_until": "Will not ship until ",
"quantity": "Quantity",
"add_to_cart": "Add to Cart",
"unavailable": "Unavailable",
"will_be_in_stock_after": "Will be in stock after ",
"only_left": {
"one": "Only left!",
"other": "Only left!"
},
"full_details": "Full details"
}
- Thêm mã sau vào phía sau
"will_be_in_stock_after"
ở bước 5:
"unit_price_label": "Unit price",
Sau khi chỉnh sửa, kết quả sẽ như sau:
- Nhấp vào Lưu để xác nhận thay đổi.
(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác
Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.
Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.
Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.
Tìm kiếm
Unit Price
trên thanh nhập liệu.Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.
Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.
Nhấp vào Save (Lưu).
Hiển thị đơn giá trong thông báo về đơn hàng
Theo mặc định, thông báo xác nhận đơn hàng sẽ hiển thị đơn giá khi tính năng này đang hoạt động.
Nếu đã thêm đơn giá vào sản phẩm nhưng đơn giá không hiển thị trong thông báo xác nhận đơn hàng, có thể bạn cần cập nhật mẫu theo cách thủ công.
Bước:
Trong trang quản trị Shopify, vào mục Settings (Cài đặt) > Notifications (Thông báo).
Trong mục Đơn hàng, nhấp vào Xác nhận đơn hàng.
Nhấp vào Chỉnh sửa mã.
Thêm đoạn mã sau vào mẫu trong lớp
"order-list__item-price"
:
{%- if line_item.unit_price_measurement -%}
<div class="order-list__unit-price">
{{ line_item.unit_price | money }}/
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
5. Nhấp vào Lưu.