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

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

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

Debut

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

แก้ไข `theme.liquid`

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

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

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

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

จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid
- เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
- เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก
ค้นหา {% 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 คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก  ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{ current_variant.inventory_quantity }} ในแท็ก  ของคุณ

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

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

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

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

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

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

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

inventoryHtml: '.inventoryWrapper',

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

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

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

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

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

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

inventoryHtml: '.inventoryWrapper',

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

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

ในฟังก์ชันเดียวกัน ให้ค้นหา 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 = '';
  }
}

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

Brooklyn

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

แก้ไข `theme.liquid`

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

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

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

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

จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid
- เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
- เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก
ค้นหา {% 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 คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก  ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก  ของคุณ

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

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

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

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

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

inventoryHtml: '.inventoryWrapper',

ในไฟล์เดียวกัน ให้ค้นหา 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('');
}

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

Simple

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

แก้ไข `theme.liquid`

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

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

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

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

จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid
- เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
- เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก
ค้นหา {% 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 คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก  ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก  ของคุณ

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

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

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

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

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

inventoryHtml: '.inventoryWrapper',

ในไฟล์เดียวกัน ให้ค้นหา 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('');
}

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

Minimal

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

แก้ไข `theme.liquid`

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

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

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

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

จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid
- เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
- เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก
ค้นหา {% 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 คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก  ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก  ของคุณ

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

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

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

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

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

inventoryHtml: '.inventoryWrapper',

ในไฟล์เดียวกัน ให้ค้นหา 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('');
}

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

Boundless

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

แก้ไข `theme.liquid`

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

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

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

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

จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid
- เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
- เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก
ค้นหา {% 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 คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก  ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก  ของคุณ

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

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

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

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

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

inventoryHtml: '.inventoryWrapper',

ในไฟล์เดียวกัน ให้ค้นหา $(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("");
}

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

Narrative

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

แก้ไข `theme.liquid`

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

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

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

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

จากไดเรกทอรีส่วน ให้เปิด product-template.liquid หรือ featured-product.liquid
- เปิด product-template.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังหน้าสินค้า
- เปิด featured-product.liquid เพื่อเพิ่มฟีเจอร์นี้ไปยังส่วนสินค้าแนะนำในหน้าแรก
ค้นหา {% 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 คุณสามารถเปลี่ยนข้อความได้โดยปรับเนื้อหาในแท็ก  ตรวจสอบให้แน่ใจว่าคุณได้ใส่ {{current_variant.inventory_quantity }} ในแท็ก  ของคุณ

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

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

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

แก้ไข `custom.js`

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

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

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

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

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

แก้ไข theme.liquid

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

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

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

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

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

แก้ไข theme.liquid

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

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

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

แก้ไข theme.liquid

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

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

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

แก้ไข theme.liquid

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

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

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

แก้ไข theme.liquid

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

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

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

แก้ไข theme.liquid

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

แก้ไข custom.js

แก้ไข `theme.liquid`

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

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

แก้ไข `theme.liquid`

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

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

แก้ไข `theme.liquid`

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

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

แก้ไข `theme.liquid`

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

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

แก้ไข `theme.liquid`

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

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

แก้ไข `theme.liquid`

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

แก้ไข `custom.js`