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.liquid
hoặcproduct-template.liquid
.Tìm thẻ Liquid sau:
{{ product.title }}
This is the code that renders your product titles on the product page.
- 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
.Ở 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
.Ở 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
.Ở 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
.Ở 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
.Ở 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
.Ở 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
.Ở 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 trang quản trị Shopify, vào 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:
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 }}
This is the code that renders your product titles on the product page.
- 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) {
If you cannot find the above line of code in `product.liquid`, then you will find it in `theme.liquid`, in the **Layout** directory.
#### Brooklyn and Venture
If you are using Brooklyn or Venture, then you will need to find and edit a different line of code. In the **Assets** directory, click `theme.js.liquid`, and [find](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find) the following line of code:
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 = '';
}
Your code should look something like this:
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 trang quản trị Shopify, vào 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:
Nhấp vào Save (Lưu).