แสดงหมายเลข SKU ในหน้าสินค้า
SKU (รหัสสินค้าคงคลัง) คือตัวเลข โดยทั่วไปแล้วจะเป็นตัวอักษรและตัวเลขที่ใช้เพื่อระบุสินค้าและติดตามสินค้าคงคลัง หากร้านค้าใช้ SKU หมายเลขเฉพาะจะถูกกำหนดให้กับตัวเลือกสินค้าแต่ละรายการ คุณสามารถแสดงหมายเลข SKU ของตัวเลือกสินค้าในหน้าสินค้าได้โดยแก้ไขโค้ดธีมของคุณ:
ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน
หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้
หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน
หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ
แสดงหมายเลข SKU ในหน้าสินค้า
วิธีแก้ไขธีมของคุณเพื่อแสดงหมายเลข SKU ในหน้าสินค้า:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
ในไดเรกทอรีส่วน ให้คลิกที่
product.liquidหรือproduct-template.liquidค้นหาแท็ก Liquid ต่อไปนี้:
{{ product.title }}นี่คือโค้ดที่แสดงผลชื่อสินค้าของคุณในหน้าสินค้า
- ในบรรทัดใหม่ด้านล่างบรรทัดของโค้ดที่มี
{{ product.title }}ให้วางโค้ดต่อไปนี้:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>- คลิกที่ "บันทึก"
เลือกธีมของคุณ
ขั้นตอนต่อไปสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณและปฏิบัติตามคำแนะนำ
ขั้นตอนสำหรับ Boundless
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js.liquid -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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);
});- คลิกที่ "บันทึก"
ขั้นตอนสำหรับ Brooklyn
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js.liquid -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
ขั้นตอนสำหรับ Debut
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
ขั้นตอนต่างๆ สำหรับธีม Express
- ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquid -
ค้นหา แท็กปิด
</body> - ในบรรทัดเหนือแท็กปิด
</body>ให้วางโค้ดต่อไปนี้:
<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>- คลิกที่ "บันทึก"
ขั้นตอนสำหรับ Minimal
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
ขั้นตอนสำหรับ Narrative
- ในไดเรกทอรีชิ้นงาน ให้คลิก
custom.js - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
ขั้นตอนสำหรับ Simple
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js.liquid -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
ขั้นตอนสำหรับ Supply
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js.liquid -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
ขั้นตอนสำหรับธีม Venture
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.js -
ค้นหา
variant.skuหากคุณสามารถค้นหา
variant.skuได้ แสดงว่าคุณได้เสร็จสิ้นการปรับแต่งแล้วหากคุณไม่สามารถค้นหา
variant.skuได้ ให้ไปยังขั้นตอนถัดไป ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
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;
});
});
}
});- คลิกที่ "บันทึก"
เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล
หากต้องการให้ SKU ปรากฏในหน้าสินค้าของคุณ คุณต้องเพิ่มหมายเลข SKU ไปยังตัวเลือกสินค้าของคุณจากส่วน Shopify admin
จากส่วน Shopify admin ให้ไปที่สินค้า > สินค้าทั้งหมด
คลิกที่สินค้าที่คุณต้องการแก้ไข
-
หากสินค้าที่มีตัวเลือกสินค้าหลายรายการ ให้เพิ่มหมายเลข SKU ของคุณในส่วนตัวเลือกสินค้า:
หากสินค้าไม่มีตัวเลือกสินค้า ให้เพิ่มหมายเลข SKU ของคุณในส่วนสินค้าคงคลัง:
คลิกที่ "บันทึก"
แสดงหมายเลข SKU ในหน้าสินค้า
หมายเหตุ: การปรับแต่งนี้จะไม่สามารถใช้งานได้กับธีม Boundless ที่ไม่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน
วิธีแก้ไขธีมของคุณเพื่อแสดงหมายเลข SKU ในหน้าสินค้า:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
ในไดเรกทอรีเทมเพลตให้คลิก
product.liquid.ค้นหาแท็ก Liquid ต่อไปนี้:
{{ product.title }}นี่คือโค้ดที่แสดงผลชื่อสินค้าของคุณในหน้าสินค้า
- ในบรรทัดใหม่ด้านล่างโค้ดที่มี
{{ product.title }}ให้วางสิ่งต่อไปนี้:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>คลิกที่ "บันทึก"
หากคุณใช้ธีม Shopify ฟรีซึ่งไม่ใช่ธีม Brooklyn หรือ Venture ให้ค้นหาบรรทัดต่อไปนี้ของโค้ด:
var selectCallback = function(variant, selector) { หากคุณไม่พบบรรทัดของโค้ดข้างต้นใน product.liquid คุณจะต้องค้นหาใน theme.liquid ในไดเรกทอรีเลย์เอาต์
ธีม Brooklyn และ Venture
หากคุณใช้ธีม Brooklyn หรือ Venture คุณจะต้องค้นหาและแก้ไขโค้ดบรรทัดอื่น ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ theme.js.liquid และค้นหาบรรทัดต่อไปนี้ของโค้ด:
theme.productVariantCallback = function (variant, selector) {- วางโค้ดต่อไปนี้ในบรรทัดใหม่ด้านล่าง:
if (variant) {
document.querySelector('.variant-sku').innerText = variant.sku;
}
else {
document.querySelector('.variant-sku').innerText = '';
}โค้ดของคุณควรมีลักษณะดังนี้:
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
}
});
};- คลิกที่ "บันทึก"
เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล
หากต้องการให้ SKU ปรากฏในหน้าสินค้าของคุณ คุณต้องเพิ่มหมายเลข SKU ไปยังตัวเลือกสินค้าของคุณจากส่วน Shopify admin
จากส่วน Shopify admin ให้ไปที่สินค้า > สินค้าทั้งหมด
คลิกที่สินค้าที่คุณต้องการแก้ไข
-
หากสินค้าที่มีตัวเลือกสินค้าหลายรายการ ให้เพิ่มหมายเลข SKU ของคุณในส่วนตัวเลือกสินค้า:
หากสินค้าไม่มีตัวเลือกสินค้า ให้เพิ่มหมายเลข SKU ของคุณในส่วนสินค้าคงคลัง:
คลิกที่ "บันทึก"