Hiển thị hàng trong kho còn lại của mẫu mã trên trang sản phẩm
Bạn có thể thêm thông báo trên trang sản phẩm hoặc mục sản phẩm nổi bật cho biết số lượng mặt hàng bạn còn trong kho khi hàng trong kho của một mẫu mã sản phẩm sắp hết. Để hiển thị thông báo này, bạn cần bật tính năng theo dõi hàng tồn kho cho sản phẩm.
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 dành cho chủ đề của bạn và làm theo hướng dẫn.
Các bước thực hiện dành cho chủ đề Khai trương
Chỉnh sửa theme.liquid
- 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 rồi nhấp vào nút ... > Chỉnh sửa mã.
- Trong thư mục Bố cục, mở
theme.liquid
. -
Tìm thẻ có kết thúc là
</head>
trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là</head>
:
<script>
var variantStock = {};
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa product-template.liquid
hoặc featured-product.liquid
-
Trong thư mục Mục, mở
product-template.liquid
hoặcfeatured-product.liquid
:- Mở
product-template.liquid
để thêm tính năng này vào trang sản phẩm. - Mở
featured-product.liquid
để thêm tính năng này vào mục sản phẩm nổi bật trên trang chủ.
- Mở
Tìm
{% form 'product'
. Thêm mã sau đây phía trên thẻ này:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm {{ current_variant.inventory_quantity }}
vào thẻ <p>
của mình.
- Ở cuối tệp, thêm mã sau:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa theme.js.liquid
hoặc theme.js
Thay đổi bạn cần thực hiện đối với những tệp này phụ thuộc vào phiên bản Debut mà bạn đang sử dụng.
Phiên bản 17.8.0 trở xuống
- Mở
theme.js.liquid
hoặctheme.js
. -
Tìm
theme.Product = (function()
. Bên dướithis.selectors = {
, thêm mã sau:
inventoryHtml: '.inventoryWrapper',
- Trong cùng tệp đó, tìm
_updateAddToCart: function(evt) {
. Thêm mã sau vào ngay bên dưới:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
-
Tìm
if (variant.available) {
. Trước câu lệnh} else {
, thêm mã sau:
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
inventoryWrapper.innerHTML = inventoryHtml;
} else {
inventoryWrapper.innerHTML = '';
}
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm ${variantStock[variant.id]}
vào thẻ <p>
của mình.
- Nhấp vào Save (Lưu).
Phiên bản 17.9.0 trở lên
- Mở
theme.js.liquid
hoặctheme.js
. -
Tìm
theme.Product = (function()
. Bên dướithis.selectors = {
, thêm mã sau:
inventoryHtml: '.inventoryWrapper',
- Trong cùng tệp đó, tìm
_setProductState: function(evt) {
. Thêm mã sau vào ngay bên dưới:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
- Trong cùng hàm đó, tìm
if (!variant) {
. Sau dấu ngoặc đóng}
, thêm mã sau:
else {
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
inventoryWrapper.innerHTML = inventoryHtml;
} else {
inventoryWrapper.innerHTML = '';
}
}
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm ${variantStock[variant.id]}
vào thẻ <p>
của mình.
- Nhấp vào Save (Lưu).
Các bước cho chủ đề Brooklyn, Simple và Minimal
Chỉnh sửa theme.liquid
- 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 rồi nhấp vào nút ... > Chỉnh sửa mã.
- Trong thư mục Bố cục, mở
theme.liquid
. -
Tìm thẻ có kết thúc là
</head>
trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là</head>
:
<script>
var variantStock = {};
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa product-template.liquid
hoặc featured-product.liquid
Trong thư mục Mục, mở
product-template.liquid
hoặcfeatured-product.liquid
:Tìm
{% form 'product'
. Thêm mã sau đây phía trên thẻ này:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm {{current_variant.inventory_quantity }}
vào thẻ <p>
của mình.
- Ở cuối tệp, thêm mã sau:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa theme.js.liquid
hoặc theme.js
- Mở
theme.js.liquid
hoặctheme.js
. -
Tìm
theme.Product = (function()
. Bên dướithis.selectors = {
, thêm mã sau:
inventoryHtml: '.inventoryWrapper',
- Trong cùng tệp đó, tìm
if (variant.available) {
. Trước câu lệnh} else {
, thêm mã sau:
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
$(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
$(this.selectors.inventoryHtml, this.$container).html('');
}
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm ${variantStock[variant.id]}
vào thẻ <p>
của mình.
- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Boundless
Chỉnh sửa theme.liquid
- 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 rồi nhấp vào nút ... > Chỉnh sửa mã.
- Trong thư mục Bố cục, mở
theme.liquid
. -
Tìm thẻ có kết thúc là
</head>
trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là</head>
:
<script>
var variantStock = {};
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa product-template.liquid
hoặc featured-product.liquid
Trong thư mục Mục, mở
product-template.liquid
hoặcfeatured-product.liquid
:Tìm
{% form 'product'
. Thêm mã sau đây phía trên thẻ này:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm {{current_variant.inventory_quantity }}
vào thẻ <p>
của mình.
- Ở cuối tệp, thêm mã sau:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa theme.js.liquid
hoặc theme.js
- Mở "theme.js.liquid" *hoặc *"theme.js".
-
Tìm
theme.Product = (function()
. Bên dướivar selectors = {
, thêm mã sau:
inventoryHtml: '.inventoryWrapper',
- Trong cùng tệp đó, tìm
$(selectors.SKU, this.$container).html(variant.sku);
. Thêm mã sau vào ngay bên dưới:
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
$('.inventoryWrapper').html(inventoryHtml);
} else {
$('.inventoryWrapper').html("");
}
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm ${variantStock[variant.id]}
vào thẻ <p>
của mình.
- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Narrative
Chỉnh sửa theme.liquid
- 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 rồi nhấp vào nút ... > Chỉnh sửa mã.
- Trong thư mục Bố cục, mở
theme.liquid
. -
Tìm thẻ có kết thúc là
</head>
trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là</head>
:
<script>
var variantStock = {};
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa product-template.liquid
hoặc featured-product.liquid
Trong thư mục Mục, mở
product-template.liquid
hoặcfeatured-product.liquid
:Tìm
{% include 'product-form' %}
. Thêm mã sau đây phía trên thẻ này:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm {{current_variant.inventory_quantity }}
vào thẻ <p>
của mình.
- Ở cuối tệp, thêm mã sau:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Nhấp vào Save (Lưu).
Chỉnh sửa custom.js
- Mở
custom.js
. - Ở cuối tệp, thêm mã sau:
var sections = window.theme.sections;
var inventorySelectorHtml = '.inventoryWrapper';
var productExtension = {
init: function() {
this.on('variant_change_successful', this._updateInventory.bind(this));
this.on('variant_change_undefined', this._removeInventory.bind(this));
},
_removeInventory: function() {
$(inventorySelectorHtml, this.container).html('');
},
_updateInventory: function(event, instance, product, variant) {
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
$(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
} else {
$(inventorySelectorHtml, this.container).html('');
}
}
};
sections.extend('product-template', productExtension);
sections.extend('featured-product', productExtension);
Mã trên có kết quả là Stock: x
. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>
. Đảm bảo bạn đã thêm ${variantStock[variant.id]}
vào thẻ <p>
của mình.
- Nhấp vào Save (Lưu).