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

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

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

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

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

แก้ไข theme.liquid

  1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
  3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
  4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้: 
<script>
  var variantStock = {};
</script>
  1. คลิกที่ “บันทึก”

  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>
The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{ current_variant.inventory_quantity }}` in your `<p>` tags.
  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 = '';
}
The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.
  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, Simple และ Minimal

แก้ไข theme.liquid

  1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
  3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
  4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้: 
<script>
  var variantStock = {};
</script>
  1. คลิกที่ “บันทึก”

  1. จากไดเรกทอรีส่วน ให้เปิด 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>
The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{current_variant.inventory_quantity }}` in your `<p>` tags.
  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('');
}
The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.
  1. คลิกที่ “บันทึก”

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

แก้ไข theme.liquid

  1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
  3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
  4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้: 
<script>
  var variantStock = {};
    </script>
  1. คลิกที่ “บันทึก”

  1. จากไดเรกทอรีส่วน ให้เปิด 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

แก้ไข theme.liquid

  1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด
  3. จากไดเรกทอรีเลย์เอาต์ ให้เปิด theme.liquid
  4. ค้นหาแท็กปิด </head> ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด </head> ให้วางโค้ดต่อไปนี้: 
<script>
      var variantStock = {};
    </script>
  1. คลิกที่ “บันทึก”

  1. จากไดเรกทอรีส่วน ให้เปิด 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);
The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.
  1. คลิกที่ “บันทึก”

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

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