ซ่อนตัวเลือกสินค้าที่ขายหมด

ข้อควรระวัง

ธีมวินเทจไม่พร้อมให้ใช้งานใน Theme Store ธีมเหล่านี้ไม่มีฟีเจอร์ที่รวมอยู่ในธีม Online Store 2.0 ของ Shopify และธีมวินเทจฟรีของ Shopify จะไม่ได้รับการอัปเดตนอกเหนือไปจากการแก้ไขปัญหาด้านความปลอดภัย

หมายเหตุ

หากคุณใช้ธีมฟรีจาก Shopify คุณสามารถติดต่อฝ่ายช่วยเหลือของ Shopify เพื่อรับความช่วยเหลือเกี่ยวกับบทแนะนำการใช้งานนี้ได้ โดยจะใช้เวลาออกแบบ 15 นาที ดูข้อมูลเพิ่มเติมเกี่ยวกับนโยบายการออกแบบของ Shopify

หมายเหตุ

การปรับแต่งนี้เฉพาะกับธีมเก่าของ Shopify และไม่สามารถใช้ได้กับธีม Online Store 2.0

• ค้นหาธีมของคุณในเวอร์ชันสถาปัตยกรรม
• สำรวจการปรับแต่งธีม Online Store 2.0

คุณสามารถป้องกันไม่ให้ลูกค้าเลือกตัวเลือกสินค้าที่ขายหมดได้โดยการลบหรือปิดใช้ตัวเลือกสินค้าเหล่านั้นในหน้าสินค้า

ข้อจำกัด

การปรับแต่งที่ระบุไว้ในหน้านี้ไม่สามารถใช้งานกับกรณีดังต่อไปนี้

• สินค้าของคุณมีตัวเลือกสินค้ามากกว่าหนึ่งตัวเลือก
• คุณใช้ธีม Express และตั้งค่าหน้าสินค้าให้แสดงสินค้าแบบโอเวอร์เลย์

หมายเหตุ

ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกัน ขึ้นอยู่กับว่าคุณใช้ธีมที่แบ่งส่วนหรือไม่แบ่งส่วน โดยธีมที่แบ่งส่วนจะทำให้คุณสามารถลากแล้ววางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้

หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน

หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่มธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนรุ่นเก่า ให้คลิกปุ่มธีมที่ไม่แบ่งส่วนแล้วดำเนินการตามคำแนะนำ

ขั้นตอนต่างๆ สำหรับธีมที่แบ่งส่วน

เลือกธีมของคุณ

ขั้นตอนสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณก่อนทำตามคำแนะนำด้านล่าง:

Boundless

Boundless

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Brooklyn

Brooklyn

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Debut

Debut

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Express

ด่วน

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid

4. ค้นหาโค้ด </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>

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

<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>

1. คลิกที่ “บันทึก”

Minimal

มินิมอล

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Narrative

Narrative

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก custom.js

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Simple

Simple

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Supply

Supply

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

Venture

Venture

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณต้องการซ่อนตัวเลือกสินค้าที่จำหน่ายหมดแล้วหรือเพียงแค่ปิดการใช้งานตัวเลือกเหล่านั้น

ซ่อนตัวเลือกสินค้าที่ขายหมด

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid

4. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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);
          }
        }
      }
    }
  }
});

1. คลิกที่ “บันทึก”

ขั้นตอนต่างๆ สำหรับธีมที่ไม่แบ่งส่วน

ซ่อนตัวเลือกสินค้าที่ขายหมด

หากคุณใช้ธีมที่ไม่แบ่งส่วน คุณสามารถปฏิบัติตามขั้นตอนเหล่านี้เพื่อซ่อนตัวเลือกสินค้าที่ขายหมดในหน้าสินค้าได้

ขั้นตอน:

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

4. ตั้งชื่อส่วนย่อย remove-sold-out ใหม่ของคุณ:

   

5. วางโค้ดต่อไปนี้ในไฟล์ส่วนย่อยใหม่ของคุณ:

{% 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 %}

1. คลิกที่ “บันทึก”
2. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid
3. ให้วางโค้ดต่อไปนี้ก่อนแท็กปิด </body> ซึ่งอยู่ใกล้กับส่วนท้ายของไฟล์

{% render 'remove-sold-out' %}

1. คลิกที่ “บันทึก”

ปิดใช้งานตัวเลือกสินค้าที่ขายหมดแล้ว

หากคุณใช้ธีมที่ไม่แบ่งส่วน คุณสามารถปฏิบัติตามขั้นตอนเหล่านี้เพื่อปิดใช้งานตัวเลือกสินค้าที่จำหน่ายหมดแล้วได้ ตัวเลือกสินค้าเหล่านี้จะยังคงแสดงอยู่ในหน้าสินค้า แต่จะไม่สามารถทำการเลือกได้

ขั้นตอน:

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

3. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

4. ตั้งชื่อส่วนย่อย disable-sold-out ใหม่ของคุณ:

   

5. วางโค้ดต่อไปนี้ในไฟล์ส่วนย่อยใหม่ของคุณ:

{% 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 %}

1. คลิกที่ “บันทึก”
2. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid
3. ให้วางโค้ดต่อไปนี้ก่อนแท็กปิด </body> ซึ่งอยู่ใกล้กับส่วนท้ายของไฟล์

{% render 'disable-sold-out' %}

1. คลิกที่ “บันทึก”