Hiển thị số SKU trên trang sản phẩm
SKU (đơn vị lưu kho) là số, thường là chữ và số, được sử dụng để giúp xác định sản phẩm và theo dõi hàng trong kho. Nếu cửa hàng sử dụng SKU, mỗi mẫu mã sản phẩm sẽ được chỉ định một số duy nhất. Bạn có thể hiển thị số SKU cho mẫu mã trên trang sản phẩm bằng cách chỉnh sửa mã chủ đề:
Chủ đề có phân mục và không phân mục
Hiển thị số SKU trên trang sản phẩm
Để chỉnh sửa chủ đề để hiển thị số SKU trên trang sản phẩm:
Trong 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 Actions (Thao tác) > Edit code (Chỉnh sửa mã).
Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
Trong thư mục Mục, nhấp vào
product.liquidhoặcproduct-template.liquid.Tìm thẻ Liquid sau:
{{ product.title }}Đây là mã kết xuất tiêu đề sản phẩm trên trang sản phẩm của bạn.
- Dán mã sau trên một dòng mới bên dưới dòng mã bao gồm
{{ product.title }}:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>- Nhấp vào Save (Lưu).
Chọn chủ đề
Các bước tùy chỉnh tiếp theo thay đổi tùy thuộc vào chủ đề của bạ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ủ đề Boundless
- Trong thư mục Assets, nhấp vào
theme.js.liquid. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
setTimeout(function() {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
}, 100);
});- Nhấp vào Save (Lưu).
Các bước dành cho chủ đề Brooklyn
- Trong thư mục Assets, nhấp vào
theme.js.liquid. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const productInfo = JSON.parse(product.innerHTML);
const radioButtons = document.querySelector('.single-option-radio');
let inputSelects;
if (radioButtons !== null) {
inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-radio')];
} else {
inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector__radio')];
}
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
if (radioButtons !== null) {
inputValues.push(input.firstElementChild.value);
} else {
inputValues.push(input.value);
}
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.target.value.toString();
const changedIndex = inputSelects.indexOf(evt.currentTarget);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Khai trương
- Trong thư mục Assets, nhấp vào
theme.js. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Các bước dành cho chủ đề Express
- Trong thư mục Layout, nhấp vào
theme.liquid. -
Tìm thẻ có kết thúc là
</body>. - Trên dòng ngay phía trên thẻ có kết thúc là
</body>, dán mã sau:
<script>
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[data-product-json]')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .form__input--select')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});
</script>- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Minimal
- Trong thư mục Assets, nhấp vào
theme.js. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Narrative
- Trong thư mục Assets, nhấp vào
custom.js. - Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[data-product-json]')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Simple
- Trong thư mục Assets, nhấp vào
theme.js.liquid. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Cung ứng
- Trong thư mục Assets, nhấp vào
theme.js.liquid. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Các bước thực hiện dành cho chủ đề Venture
- Trong thư mục Assets, nhấp vào
theme.js. -
Tìm kiếm
variant.sku.Nếu bạn có thể tìm được
variant.sku, bạn đã hoàn tất tùy chỉnh.Nếu bạn không tìm được
variant.sku, hãy chuyển sang bước tiếp theo. Ở cuối tệp, dán mã sau:
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
}
});
});
count += 1;
});
});
}
});- Nhấp vào Save (Lưu).
Thêm số SKU vào mẫu mã sản phẩm từ trang quản trị
Để SKU hiển thị trên trang sản phẩm, bạn phải thêm số SKU vào mẫu mã sản phẩm trong trang quản trị Shopify.
Trong phần Shopify admin (Quản trị viên Shopify), vào mục Sản phẩm > All products (Tất cả sản phẩm).
Nhấp vào sản phẩm bạn muốn chỉnh sửa.
-
Đối với sản phẩm có nhiều mẫu mã, trong mục Mẫu mã, thêm số SKU:
Đối với sản phẩm không có mẫu mã, trong mục Hàng trong kho, thêm số SKU:
Nhấp vào Save (Lưu).
Hiển thị số SKU trên trang sản phẩm
Để chỉnh sửa chủ đề để hiển thị số SKU trên trang sản phẩm:
Trong 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 Actions (Thao tác) > Edit code (Chỉnh sửa mã).
Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
Trong thư mục Templates, nhấp vào
product.liquid.Tìm thẻ Liquid sau:
{{ product.title }}Đây là mã kết xuất tiêu đề sản phẩm trên trang sản phẩm của bạn.
- Dán nội dung sau vào dòng mới bên dưới mã bao gồm
{{ product.title }}:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>Nhấp vào Save (Lưu).
Nếu bạn đang sử dụng chủ đề Shopify miễn phí, không phải chủ đề Brooklyn hay Venture, hãy tìm dòng mã sau:
var selectCallback = function(variant, selector) { Nếu không tìm thấy dòng mã trên trong product.liquid, bạn sẽ tìm thấy dòng mã này trong theme.liquid, trong thư mục Bố cục.
Brooklyn và Venture
Nếu đang sử dụng Brooklyn hoặc Venture, bạn sẽ cần tìm và chỉnh sửa dòng mã khác. Trong thư mục Phần tử, nhấp vào theme.js.liquid và tìm dòng mã sau:
theme.productVariantCallback = function (variant, selector) {- Dán mã sau vào một dòng mới bên dưới:
if (variant) {
document.querySelector('.variant-sku').innerText = variant.sku;
}
else {
document.querySelector('.variant-sku').innerText = '';
}Mã của bạn sẽ có dạng như sau:
var selectCallback = function(variant, selector) {
if (variant) {
document.querySelector('.variant-sku').innerText = variant.sku;
}
else {
document.querySelector('.variant-sku').innerText = '';
}
self.productPage({
money_format: theme.moneyFormat,
variant: variant,
selector: selector,
translations: {
add_to_cart : theme.productStrings.addToCart,
sold_out : theme.productStrings.soldOut,
unavailable : theme.productStrings.unavailable
}
});
};- Nhấp vào Save (Lưu).
Thêm số SKU vào mẫu mã sản phẩm từ trang quản trị
Để SKU hiển thị trên trang sản phẩm, bạn phải thêm số SKU vào mẫu mã sản phẩm trong trang quản trị Shopify.
Trong phần Shopify admin (Quản trị viên Shopify), vào mục Sản phẩm > All products (Tất cả sản phẩm).
Nhấp vào sản phẩm bạn muốn chỉnh sửa.
-
Đối với sản phẩm có nhiều mẫu mã, trong mục Mẫu mã, thêm số SKU:
Đối với sản phẩm không có mẫu mã, trong mục Hàng trong kho, thêm số SKU:
Nhấp vào Save (Lưu).