ซ่อนตัวเลือกสินค้าที่ขายหมด
คุณสามารถป้องกันไม่ให้ลูกค้าเลือกตัวเลือกสินค้าที่ขายหมดได้โดยการลบหรือป ิดใช้ตัวเลือกสินค้าเหล่านั้นในหน้าสินค้า
ข้อจำกัด
การปรับแต่งที่ระบุไว้ในหน้านี้ไม่สามารถใช้งานกับกรณีดังต่อไปนี้
- สินค้าของคุณมีตัวเลือกสินค้ามากกว่าหนึ่งตัวเลือก
- คุณใช้ธีม Express และตั้งค่าหน้าสินค้าให้แสดงสินค้าแบบโอเวอร์เลย์
หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช ้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้
หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน
หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ
ขั้นตอนต่างๆ สำหรับธีมที่แบ่งส่วน
เลือกธีมของคุณ
ขั้นตอนสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณก่อนทำตามคำแนะนำด้านล่าง:
ขั้นตอนต่างๆ สำหรับธีมที่ไม่แบ่งส่วน
ซ่อนตัวเลือกสินค้าที่ขายหมด
หากคุณใช้ธีมที่ไม่แบ่งส่วน คุณสามารถปฏิบัติตามขั้นตอนเหล่านี้เพื่อซ่อนตัวเลือกสินค้าที่ขายหมดในหน้าสินค้าได้
ขั้นตอน:
- ในส่วนผู้ดูแล 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' %}- คลิกที่ “บันทึก”