แสดงหมายเลข SKU ในหน้าสินค้า

หน้านี้พิมพ์ขึ้นเมื่อ Jun 08, 2023 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku

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

ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน

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

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

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

ในหน้านี้

แสดงหมายเลข SKU ในหน้าสินค้า
เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล
แสดงหมายเลข SKU ในหน้าสินค้า
เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล

แสดงหมายเลข SKU ในหน้าสินค้า

วิธีแก้ไขธีมของคุณเพื่อแสดงหมายเลข SKU ในหน้าสินค้า:

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

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

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

ในไดเรกทอรีส่วน ให้คลิกที่ product.liquid หรือ product-template.liquid
ค้นหาแท็ก Liquid ต่อไปนี้:

{{ product.title }}

นี่คือโค้ดที่แสดงผลชื่อสินค้าของคุณในหน้าสินค้า

ในบรรทัดใหม่ด้านล่างบรรทัดของโค้ดที่มี {{ product.title }} ให้วางโค้ดต่อไปนี้:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

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

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

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

ขั้นตอนสำหรับ Boundless

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function() {
    const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
        const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
        const productInfo = JSON.parse(product.innerHTML);
        const inputValues = [];
        const optionValues = [];
        let count = 0;
        inputSelects.forEach((input) => {
          inputValues.push(input.value);
          optionValues.push(count);
          input.addEventListener('change', (evt) => {
            const currentValue = evt.currentTarget.value.toString();
            const changedIndex = inputSelects.indexOf(evt.target);
            inputValues[changedIndex] = currentValue;
            variantSKU.innerText = ' ';
            productInfo.variants.forEach((variant) => {
              if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
                variantSKU.innerText = variant.sku;
              }
            });
          });
          count += 1;
        });
      });
    }
  }, 100);
});

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

ขั้นตอนสำหรับ Brooklyn

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const productInfo = JSON.parse(product.innerHTML);
      const radioButtons = document.querySelector('.single-option-radio');
      let inputSelects;
      if (radioButtons !== null) {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-radio')];
      } else {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector__radio')];
      }
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        if (radioButtons !== null) {
          inputValues.push(input.firstElementChild.value);
        } else {
          inputValues.push(input.value);
        }
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.target.value.toString();
          const changedIndex = inputSelects.indexOf(evt.currentTarget);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
      count += 1;
      });
    });
  }
});

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

ขั้นตอนสำหรับ Debut

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

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

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

ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid
ค้นหา แท็กปิด </body>
ในบรรทัดเหนือแท็กปิด </body> ให้วางโค้ดต่อไปนี้:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .form__input--select')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
</script>

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

ขั้นตอนสำหรับ Minimal

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

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

ขั้นตอนสำหรับ Narrative

ในไดเรกทอรีชิ้นงาน ให้คลิก custom.js
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

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

ขั้นตอนสำหรับ Simple

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

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

ขั้นตอนสำหรับ Supply

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

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

ขั้นตอนสำหรับธีม Venture

ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js
ค้นหา variant.sku
ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

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

เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล

หากต้องการให้ SKU ปรากฏในหน้าสินค้าของคุณ คุณต้องเพิ่มหมายเลข SKU ไปยังตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล Shopify

จากส่วนผู้ดูแล Shopify ให้ไปที่ สินค้า
คลิกสินค้าที่คุณต้องการแก้ไข
หากสินค้าที่มีตัวเลือกสินค้าหลายรายการ ให้เพิ่มหมายเลข SKU ของคุณในส่วนตัวเลือกสินค้า:
คลิกที่ “บันทึก”

แสดงหมายเลข SKU ในหน้าสินค้า

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

วิธีแก้ไขธีมของคุณเพื่อแสดงหมายเลข SKU ในหน้าสินค้า:

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

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

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

ในไดเรกทอรีเทมเพลตให้คลิก product.liquid.
ค้นหาแท็ก Liquid ต่อไปนี้:

{{ product.title }}

นี่คือโค้ดที่แสดงผลชื่อสินค้าของคุณในหน้าสินค้า

ในบรรทัดใหม่ด้านล่างโค้ดที่มี {{ product.title }} ให้วางสิ่งต่อไปนี้:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

คลิกที่ “บันทึก”
หากคุณใช้ธีม Shopify ฟรีซึ่งไม่ใช่ธีม Brooklyn หรือ Venture ให้ค้นหาบรรทัดต่อไปนี้ของโค้ด:

var selectCallback = function(variant, selector) {

หากคุณไม่พบบรรทัดของโค้ดข้างต้นใน product.liquid คุณจะต้องค้นหาใน theme.liquid ในไดเรกทอรีเลย์เอาต์

Brooklyn และ Venture: หากคุณใช้ธีม Brooklyn หรือ Venture คุณจะต้องค้นหาและแก้ไขโค้ดบรรทัดอื่น ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ theme.js.liquid และค้นหาบรรทัดต่อไปนี้ของโค้ด:

theme.productVariantCallback = function (variant, selector) {

วางโค้ดต่อไปนี้ในบรรทัดใหม่ด้านล่าง:

if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

โค้ดของคุณควรมีลักษณะดังนี้:

var selectCallback = function(variant, selector) {

      if (variant) {
        document.querySelector('.variant-sku').innerText = variant.sku;
      }
      else {
        document.querySelector('.variant-sku').innerText = '';
      }

        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart : theme.productStrings.addToCart,
            sold_out : theme.productStrings.soldOut,
            unavailable : theme.productStrings.unavailable
          }
        });
      };

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

เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล

จากส่วนผู้ดูแล Shopify ให้ไปที่ สินค้า
คลิกสินค้าที่คุณต้องการแก้ไข
หากสินค้าที่มีตัวเลือกสินค้าหลายรายการ ให้เพิ่มหมายเลข SKU ของคุณในส่วนตัวเลือกสินค้า:
คลิกที่ “บันทึก”

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี