ซ่อนตัวเลือกสินค้าที่ขายหมด
หน้านี้พิมพ์ขึ้นเมื่อ Apr 26, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants
คุณสามารถป้องกันไม่ให้ลูกค้าเลือกตัวเลือกสินค้าที่ขายหมดได้โดยการลบหรือปิดใช้ตัวเลือกสินค้าเหล่านั้นในหน้าสินค้า
ข้อจำกัด
การปรับแต่งที่ระบุไว้ในหน้านี้ไม่สามารถใช้งานกับกรณีดังต่อไปนี้
- สินค้าของคุณมีตัวเลือกสินค้ามากกว่าหนึ่งตัวเลือก
- คุณใช้ธีม Express และมีหน้าสินค้าที่ถูกตั้งให้แสดงสินค้าแบบวางซ้อนกัน
ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน
หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้
หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน
หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ
ขั้นตอนต่างๆ สำหรับธีมที่แบ่งส่วน
เลือกธีมของคุณ
ขั้นตอนสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณก่อนทำตามคำแนะนำด้านล่าง:
Boundless
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
Brooklyn
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.remove();
}
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.option.setAttribute('disabled', 'disabled');
}
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
Debut
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ด่วน
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquid -
ค้นหาโค้ด
</body>วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- คลิกที่ “บันทึก”
มินิมอล
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
Narrative
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
custom.js - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
Simple
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
Supply
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
Venture
ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่ขายหมดทั้งหมดหรือเพียงแค่ปิดใช้ตัวเลือกสินค้าเหล่านั้น
ซ่อนตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquid - ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- คลิกที่ “บันทึก”
ขั้นตอนต่างๆ สำหรับธีมที่ไม่แบ่งส่วน
ซ่อนตัวเลือกสินค้าที่ขายหมด
หากคุณใช้ธีมที่ไม่แบ่งส่วน คุณสามารถปฏิบัติตามขั้นตอนเหล่านี้เพื่อซ่อนตัวเลือกสินค้าที่ขายหมดในหน้าสินค้าได้
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
- ตั้งชื่อส่วนย่อย
remove-sold-outใหม่ของคุณ:
- วางโค้ดต่อไปนี้ในไฟล์ส่วนย่อยใหม่ของคุณ:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.remove();
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}- คลิกที่ “บันทึก”
- ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquid - ให้วางโค้ดต่อไปนี้ก่อนแท็กปิด
</body>ซึ่งอยู่ใกล้กับส่วนท้ายของไฟล์
{% render 'remove-sold-out' %}- คลิกที่ “บันทึก”
ปิดใช้ตัวเลือกสินค้าที่ขายหมด
หากคุณใช้ธีมที่ไม่แบ่งส่วน คุณสามารถปฏิบัติตามขั้นตอนเหล่านี้เพื่อปิดใช้ตัวเลือกสินค้าที่ขายหมดได้ โดยตัวเลือกสินค้าจะยังคงแสดงอยู่ในหน้าสินค้า แต่ไม่สามารถเลือกได้
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
- ตั้งชื่อส่วนย่อย
disable-sold-outใหม่ของคุณ:
- วางโค้ดต่อไปนี้ในไฟล์ส่วนย่อยใหม่ของคุณ:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.setAttribute('disabled', '');
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}- คลิกที่ “บันทึก”
- ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquid - ให้วางโค้ดต่อไปนี้ก่อนแท็กปิด
</body>ซึ่งอยู่ใกล้กับส่วนท้ายของไฟล์
{% render 'disable-sold-out' %}- คลิกที่ “บันทึก”