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

ข้อควรระวัง

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

หมายเหตุ

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

หมายเหตุ

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

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

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

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

เคล็ดลับ

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

Debut

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

แก้ไข theme.liquid

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"
3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

<script>
  var variantStock = {};
</script>

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

แก้ไข product-template.liquid หรือ featured-product.liquid

1. จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid

   • เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
   • เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก

2. ค้นหา {% form 'product' จากนั้นให้เพิ่มโค้ดต่อไปนี้ด้านบนแท็กนี้:

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{ current_variant.inventory_quantity }} ในแท็ก <p> ของคุณ

1. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

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

แก้ไข theme.js.liquid หรือ theme.js

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

เวอร์ชัน 17.8.0 และต่ำกว่า

1. เปิด theme.js.liquid หรือ theme.js
2. ค้นหา theme.Product = (function() และเพิ่มโค้ดต่อไปนี้ด้านล่าง this.selectors = {

inventoryHtml: '.inventoryWrapper',

1. ในไฟล์เดียวกัน ให้ค้นหา _updateAddToCart: function(evt) { และเพิ่มโค้ดต่อไปนี้ด้านล่าง:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. ค้นหา if (variant.available) { และเพิ่มโค้ดต่อไปนี้ก่อนคำสั่ง } else {

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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

เวอร์ชัน 17.9.0 ขึ้นไป

1. เปิด theme.js.liquid หรือ theme.js
2. ค้นหา theme.Product = (function() และเพิ่มโค้ดต่อไปนี้ด้านล่าง this.selectors = {

inventoryHtml: '.inventoryWrapper',

1. ในไฟล์เดียวกัน ให้ค้นหา _setProductState: function(evt) { และเพิ่มโค้ดต่อไปนี้ด้านล่าง:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. ในฟังก์ชันเดียวกัน ให้ค้นหา if (!variant) { และเพิ่มโค้ดต่อไปนี้หลังวงเล็บปิด }

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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

Brooklyn

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

แก้ไข theme.liquid

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"
3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

<script>
  var variantStock = {};
</script>

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

แก้ไข product-template.liquid หรือ featured-product.liquid

1. จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid

   • เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
   • เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก

2. ค้นหา {% form 'product' จากนั้นให้เพิ่มโค้ดต่อไปนี้ด้านบนแท็กนี้:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก <p> ของคุณ

1. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

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

แก้ไข theme.js.liquid หรือ theme.js

1. เปิด theme.js.liquid หรือ theme.js
2. ค้นหา theme.Product = (function() และเพิ่มโค้ดต่อไปนี้ด้านล่าง this.selectors = {

inventoryHtml: '.inventoryWrapper',

1. ในไฟล์เดียวกัน ให้ค้นหา if (variant.available) { และเพิ่มโค้ดต่อไปนี้ก่อนคำสั่ง } else {

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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

Simple

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

แก้ไข theme.liquid

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"
3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

<script>
  var variantStock = {};
</script>

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

แก้ไข product-template.liquid หรือ featured-product.liquid

1. จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid

   • เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
   • เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก

2. ค้นหา {% form 'product' จากนั้นให้เพิ่มโค้ดต่อไปนี้ด้านบนแท็กนี้:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก <p> ของคุณ

1. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

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

แก้ไข theme.js.liquid หรือ theme.js

1. เปิด theme.js.liquid หรือ theme.js
2. ค้นหา theme.Product = (function() และเพิ่มโค้ดต่อไปนี้ด้านล่าง this.selectors = {

inventoryHtml: '.inventoryWrapper',

1. ในไฟล์เดียวกัน ให้ค้นหา if (variant.available) { และเพิ่มโค้ดต่อไปนี้ก่อนคำสั่ง } else {

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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

Minimal

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

แก้ไข theme.liquid

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"
3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

<script>
  var variantStock = {};
</script>

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

แก้ไข product-template.liquid หรือ featured-product.liquid

1. จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid

   • เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
   • เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก

2. ค้นหา {% form 'product' จากนั้นให้เพิ่มโค้ดต่อไปนี้ด้านบนแท็กนี้:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก <p> ของคุณ

1. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

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

แก้ไข theme.js.liquid หรือ theme.js

1. เปิด theme.js.liquid หรือ theme.js
2. ค้นหา theme.Product = (function() และเพิ่มโค้ดต่อไปนี้ด้านล่าง this.selectors = {

inventoryHtml: '.inventoryWrapper',

1. ในไฟล์เดียวกัน ให้ค้นหา if (variant.available) { และเพิ่มโค้ดต่อไปนี้ก่อนคำสั่ง } else {

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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

Boundless

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

แก้ไข theme.liquid

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"
3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

<script>
  var variantStock = {};
    </script>

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

แก้ไข product-template.liquid หรือ featured-product.liquid

1. จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid

   • เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
   • เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก

2. ค้นหา {% form 'product' จากนั้นให้เพิ่มโค้ดต่อไปนี้ด้านบนแท็กนี้:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก <p> ของคุณ

1. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

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

แก้ไข theme.js.liquid หรือ theme.js

1. เปิด 'theme.js.liquid' *หรือ *'theme.js '
2. ค้นหา theme.Product = (function() และเพิ่มโค้ดต่อไปนี้ด้านล่าง var selectors = {

inventoryHtml: '.inventoryWrapper',

1. ในไฟล์เดียวกัน ให้ค้นหา $(selectors.SKU, this.$container).html(variant.sku); และเพิ่มโค้ดต่อไปนี้ด้านล่าง:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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

Narrative

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

แก้ไข theme.liquid

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"
3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้:

<script>
      var variantStock = {};
    </script>

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

แก้ไข product-template.liquid หรือ featured-product.liquid

1. จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid

   • เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
   • เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก

2. ค้นหา {% include 'product-form' %} จากนั้นให้เพิ่มโค้ดต่อไปนี้ด้านบนแท็กนี้:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก <p> ของคุณ

1. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

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

แก้ไข custom.js

1. เปิด custom.js
2. ที่ด้านล่างของไฟล์ ให้ใส่รหัสต่อไปนี้:

var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

โค้ดข้างต้นจะแสดง Stock: x คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก <p> ตรวจสอบให้แน่ใจว่าคุณได้ใส่ ${variantStock[variant.id]} ในแท็ก <p> ของคุณ

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