Hiển thị hàng trong kho còn lại của mẫu mã trên trang sản phẩm

Cẩn trọng

Chủ đề cổ điển không có trong Cửa hàng chủ đề. Những chủ đề này không có các tính năng thuộc Chủ đề Online Store 2.0 của Shopify, và chủ đề Cổ điển miễn phí của Shopify sẽ không nhận được bản cập nhật ngoài bản sửa lỗi bảo mật.

Lưu ý

Nếu bạn sử dụng chủ đề miễn phí từ Shopify, bạn có thể liên hệ với Bộ phận hỗ trợ của Shopify để được trợ giúp về hướng dẫn này. Thời gian thiết kế yêu cầu 15 phút. Để tìm hiểu thêm, tham khảo Support cho themes.

Lưu ý

Tùy chỉnh này áp dụng cho chủ đề Shopify cổ điển và không áp dụng cho chủ đề Online Store 2.0.

• Khám phá phiên bản cấu trúc của chủ đề
• Khám phá nội dung tùy chỉnh của chủ đề Online Store 2.0

Bạn có thể thêm thông báo trên trang sản phẩm hoặc mục sản phẩm nổi bật cho biết số lượng mặt hàng bạn còn trong kho khi hàng trong kho của một mẫu mã sản phẩm sắp hết. Để hiển thị thông báo này, bạn cần bật tính năng theo dõi hàng tồn kho cho sản phẩm.

Có nhiều bước tùy chỉnh khác nhau phụ thuộc vào chủ đề bạn chọn. Nhấp vào nút dành cho chủ đề của bạn và làm theo hướng dẫn.

Mẹo

Chủ đề Supply và chủ đề Venture của Shopify đã có cài đặt Hiển thị thông báo số lượng còn lại. Bạn có thể bật cài đặt này từ trình biên tập chủ đề.

Debut

Các bước thực hiện dành cho chủ đề Khai trương

Chỉnh sửa theme.liquid

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
2. Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
3. Trong thư mục Bố cục, mở theme.liquid.
4. Tìm thẻ có kết thúc là </head> trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là </head>:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa product-template.liquid hoặc featured-product.liquid

1. Trong thư mục Mục, mở product-template.liquid hoặc featured-product.liquid:

   • Mở product-template.liquid để thêm tính năng này vào trang sản phẩm.
   • Mở featured-product.liquid để thêm tính năng này vào mục sản phẩm nổi bật trên trang chủ.

2. Tìm {% form 'product'. Thêm mã sau đây phía trên thẻ này:

<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. Ở cuối tệp, thêm mã sau:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa theme.js.liquid hoặc theme.js

Thay đổi bạn cần thực hiện đối với những tệp này phụ thuộc vào phiên bản Debut mà bạn đang sử dụng.

Phiên bản 17.8.0 trở xuống

1. Mở theme.js.liquid hoặc theme.js.
2. Tìm theme.Product = (function(). Bên dưới this.selectors = {, thêm mã sau:

inventoryHtml: '.inventoryWrapper',

1. Trong cùng tệp đó, tìm _updateAddToCart: function(evt) {. Thêm mã sau vào ngay bên dưới:

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

1. Tìm if (variant.available) {. Trước câu lệnh } else {, thêm mã sau:

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. Nhấp vào Save (Lưu).

Phiên bản 17.9.0 trở lên

1. Mở theme.js.liquid hoặc theme.js.
2. Tìm theme.Product = (function(). Bên dưới this.selectors = {, thêm mã sau:

inventoryHtml: '.inventoryWrapper',

1. Trong cùng tệp đó, tìm _setProductState: function(evt) {. Thêm mã sau vào ngay bên dưới:

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

1. Trong cùng hàm đó, tìm if (!variant) {. Sau dấu ngoặc đóng }, thêm mã sau:

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 = '';
  }
}

Mã trên có kết quả là Stock: x. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>. Đảm bảo bạn đã thêm ${variantStock[variant.id]} vào thẻ <p> của mình.

1. Nhấp vào Save (Lưu).

Brooklyn / Simple / Minimal

Các bước cho chủ đề Brooklyn, Simple và Minimal

Chỉnh sửa theme.liquid

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
2. Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
3. Trong thư mục Bố cục, mở theme.liquid.
4. Tìm thẻ có kết thúc là </head> trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là </head>:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa product-template.liquid hoặc featured-product.liquid

1. Trong thư mục Mục, mở product-template.liquid hoặc featured-product.liquid:

2. Tìm {% form 'product'. Thêm mã sau đây phía trên thẻ này:

    <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. Ở cuối tệp, thêm mã sau:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa theme.js.liquid hoặc theme.js

1. Mở theme.js.liquid hoặc theme.js.
2. Tìm theme.Product = (function(). Bên dưới this.selectors = {, thêm mã sau:

inventoryHtml: '.inventoryWrapper',

1. Trong cùng tệp đó, tìm if (variant.available) {. Trước câu lệnh } else {, thêm mã sau:

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. Nhấp vào Save (Lưu).

Boundless

Các bước thực hiện dành cho chủ đề Boundless

Chỉnh sửa theme.liquid

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
2. Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
3. Trong thư mục Bố cục, mở theme.liquid.
4. Tìm thẻ có kết thúc là </head> trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là </head>:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa product-template.liquid hoặc featured-product.liquid

1. Trong thư mục Mục, mở product-template.liquid hoặc featured-product.liquid:

2. Tìm {% form 'product'. Thêm mã sau đây phía trên thẻ này:

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

Mã trên có kết quả là Stock: x. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>. Đảm bảo bạn đã thêm {{current_variant.inventory_quantity }} vào thẻ <p> của mình.

1. Ở cuối tệp, thêm mã sau:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa theme.js.liquid hoặc theme.js

1. Mở "theme.js.liquid" *hoặc *"theme.js".
2. Tìm theme.Product = (function(). Bên dưới var selectors = {, thêm mã sau:

inventoryHtml: '.inventoryWrapper',

1. Trong cùng tệp đó, tìm $(selectors.SKU, this.$container).html(variant.sku);. Thêm mã sau vào ngay bên dưới:

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

Mã trên có kết quả là Stock: x. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>. Đảm bảo bạn đã thêm ${variantStock[variant.id]} vào thẻ <p> của mình.

1. Nhấp vào Save (Lưu).

Narrative

Các bước thực hiện dành cho chủ đề Narrative

Chỉnh sửa theme.liquid

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
2. Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).
3. Trong thư mục Bố cục, mở theme.liquid.
4. Tìm thẻ có kết thúc là </head> trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là </head>:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa product-template.liquid hoặc featured-product.liquid

1. Trong thư mục Mục, mở product-template.liquid hoặc featured-product.liquid:

2. Tìm {% include 'product-form' %}. Thêm mã sau đây phía trên thẻ này:

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

Mã trên có kết quả là Stock: x. Bạn có thể thay đổi từ ngữ bằng cách điều chỉnh nội dung trong thẻ <p>. Đảm bảo bạn đã thêm {{current_variant.inventory_quantity }} vào thẻ <p> của mình.

1. Ở cuối tệp, thêm mã sau:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa custom.js

1. Mở custom.js.
2. Ở cuối tệp, thêm mã sau:

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. Nhấp vào Save (Lưu).