Yêu cầu khách hàng chọn một tùy chọn

Cẩn trọng

Chủ đề cổ điển không có trong Theme Store. Chủ đề cổ điển 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ới hướng dẫn này. Thời gian thiết kế cần thiết là 15 phút. Tìm hiểu thêm về Chính sách Thiết kế của Shopify.

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

Khi khách hàng truy cập trang sản phẩm trong cửa hàng trực tuyến của bạn, mẫu mã có sẵn đầu tiên sẽ được chọn theo mặc định. Bạn có thể sử dụng tùy chỉnh Yêu cầu khách hàng chọn một tùy chọn để hủy kích hoạt tính năng tự động chọn mẫu mã có sẵn đầu tiên. Như vậy, khách hàng sẽ được nhắc chọn mẫu mã theo cách thủ công trước khi hiển thị một mẫu mã.

Nếu bạn sử dụng tùy chỉnh Yêu cầu khách hàng chọn một tùy chọn thì chủ đề có thể sẽ không hiển thị giá sản phẩm khi khách hàng chưa chọn mẫu mã. Sản phẩm có mẫu mã sẽ không có giá nổi bật và giá hiển thị được xác định theo mẫu mã khách hàng chọn.

Chủ đề có phân mục và không phân mục

Lưu ý

Các bước hướng dẫn này khác nhau tùy thuộc vào việc bạn sử dụng chủ đề có phân mục hay không phân mục. Chủ đề có phân mục cho phép bạn kéo và thả để sắp xếp bố cục trang chủ còn chủ đề không phân mục thì không.

Để tìm hiểu xem chủ đề của bạn có hỗ trợ phân mục không, vào trang Edit code (Chỉnh sửa mã) của chủ đề. Nếu có tệp trong thư mục Sections thì bạn đang sử dụng chủ đề có phân mục. Chủ đề không phân mục được phát hành trước tháng 10 năm 2016 và không có tệp trong thư mục Sections.

Nếu bạn đang sử dụng chủ đề có phân mục, nhấp vào nút Chủ đề có phân mục và làm theo hướng dẫn. Nếu bạn đang sử dụng chủ đề cũ và không phân mục, nhấp vào nút Chủ đề không phân mục và làm theo hướng dẫn.

Các bước đối với Chủ đề có phân mục

Chọn chủ đề

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 chủ đề của bạn trước khi thực hiện theo hướng dẫn dưới đây:

Boundless

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Boundless:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.
4. Tìm mã initVariantSelectors. Bên dưới, tìm mã sau:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Thêm mã sau vào một dòng mới dưới đây:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Mã sẽ có dạng như thế này:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Tìm dòng mã sau:

$(selectors.addToCartText).html(theme.strings.soldOut);

Dòng mã này có hai phiên bản, đều được tìm thấy trong hàm productVariantCallback. Chỉ thay thế phiên bản thứ hai bằng:

$(selectors.addToCartText).html('Make a Selection');

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

Lưu ý

Một số phiên bản của chủ đề Boundless không bao gồm dòng mã cần thay thế trong bước này. Nếu không tìm thấy mã này, hãy chuyển sang bước tiếp theo.

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{% assign current_variant = product.selected_or_first_available_variant %}

Thay bằng:

{% assign current_variant = product.selected_variant %}

1. Tìm và xóa mã sau:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Debut

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Khai trương:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.
4. Thêm mã sau vào cuối tệp:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Tìm mã _updatePrice: function(variant). Thay mã sau:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

bằng:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Nếu bạn không tìm được mã trên, hãy tìm mã sau:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Thay bằng:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Tìm mã this.currentVariant = variant;

Thêm mã sau đây:

this._updatePaymentButton(variant);

Kết quả sẽ có dạng như thế này:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Tìm mã _updateImages: function(variant). Thay mã sau:

var currentVariantImage = this.currentVariant.featured_image || {};

bằng:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Ngay bên dưới, tìm mã sau:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Thay bằng:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Tìm mã _updateSKU: function(variant). Thay mã sau:

if (variant.sku === this.currentVariant.sku) {
  return;
}

bằng:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. Tìm mã _initVariants: function() {. Thay mã sau:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

bằng:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Lưu ý

Chỉ cần thay thế mã này trong phiên bản Debut 17.5.0 trở lên.

1. Tìm mã sau:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Thêm mã sau trên một dòng mới, bên dưới mã trên:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Mã sẽ có dạng như thế này:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

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

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Thay bằng:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Tìm và xóa mã sau:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Nếu bạn không tìm được mã trên, hãy tìm và xóa mã sau:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Tìm mã sau:

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Thay bằng:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Nếu bạn không tìm được mã trên, hãy tìm mã sau:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Thay bằng:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Lưu ý

Một số phiên bản của chủ đề Debut không bao gồm dòng mã cần thay thế trong bước này. Nếu không tìm thấy mã này, hãy chuyển sang bước tiếp theo.

1. Tìm mã sau:

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Thay bằng:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Tìm mã sau:

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Thay bằng:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Sửa đoạn mã giá sản phẩm

Để sửa đoạn mã giá sản phẩm:

1. Trong thư mục Snippets (Đoạn mã), nhấp vào product-price.liquid.
2. Tìm mã sau:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Thay bằng:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Lưu ý

Một số phiên bản của chủ đề Debut không bao gồm mã cần thay thế trong bước này. Nếu không tìm thấy mã này, hãy chuyển sang bước tiếp theo.

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Minimal

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Minimal:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.
4. Tìm mã initProductVariant: function() {. Bên dưới, tìm mã sau:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Thêm mã sau vào một dòng mới dưới đây:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Mã sẽ có dạng như thế này:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

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

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{% assign variant = product.selected_or_first_available_variant %}

Thay bằng:

{% assign variant = product.selected_variant %}

1. Tìm và xóa mã sau:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Tìm tất cả các lần xuất hiện của mã sau:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Thay bằng:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Narrative

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Narrative:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào custom.js.
4. Thêm mã sau vào cuối tệp:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

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

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Thay bằng:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Simple

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Simple:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.
4. Tìm mã initProductVariant: function() {. Bên dưới, tìm mã sau:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Thêm mã sau vào một dòng mới dưới đây:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Mã sẽ có dạng như thế này:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

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

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{% assign current_variant = product.selected_or_first_available_variant %}

Thay bằng:

{% assign current_variant = product.selected_variant %}

1. Tìm và xóa mã sau:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Supply

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Supply:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.
4. Tìm mã initProductVariant: function() {. Bên dưới, tìm mã sau:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Thêm mã sau vào một dòng mới dưới đây:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Mã sẽ có dạng như thế này:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

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

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{% assign variant = product.selected_or_first_available_variant %}

Thay bằng:

{% assign variant = product.selected_variant %}

1. Tìm và xóa mã sau:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Tìm tất cả các lần xuất hiện của mã sau:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Thay bằng:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Venture

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

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Venture:

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trên trang quản trị 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, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
3. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.
4. Thêm mã sau vào cuối tệp:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Tìm mã sau:

this.currentVariant = this._getVariantFromOptions();

Thay bằng:

this.currentVariant = this._getVariantFromOptions() || {};

1. Tìm mã _updatePrice: function(variant). Thay mã sau:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

bằng:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

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

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.
2. Tìm mã sau:

{% assign current_variant = product.selected_or_first_available_variant %}

Thay bằng:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Tìm và xóa mã sau:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Nếu bạn không tìm được mã trên, hãy tìm và xóa mã này:

{% if variant == current_variant %} selected="selected" {% endif %}

1. Tìm tất cả các lần xuất hiện của mã sau:

{% unless current_variant.available %}

Thay bằng:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Tìm mã sau:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Thay bằng:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trên:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Mã sẽ có dạng như thế này:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).

Các bước đối với Chủ đề không phân mục

Thêm lời nhắc vào menu thả xuống mẫu mã

1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.
2. Đặt tên cho đoạn mã mới pick-an-option.
3. Trong tập tin của đoạn mã mới, dán mã lưu trữ trên GitHub.
4. Nhấp vào Save (Lưu).
5. Trong thư mục Layout, nhấp vào theme.liquid.
6. Tìm thẻ có kết thúc là </body> ở gần phía dưới cùng của tập tin. Trên dòng mới nằm ngay phía trên thẻ có kết thúc là </body>, dán vào mã sau:

{% render 'pick-an-option' %}

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

2. Tìm tập tin chứa biểu mẫu "add to cart" (thêm vào giỏ hàng). Tập tin này sẽ có thuộc tính action được đặt thành /cart/add. Tập tin này sẽ là một trong bốn tập tin sau:

   • mẫu product.liquid trong phần Templates (Mẫu)
   • bố cục theme.liquid trong phần Bố cục
   • đoạn mã product.liquid trong phần Snippets (Đoạn mã)
   • đoạn mã single-product.liquid trong phần Snippets (Đoạn mã)

3. Tìm mã sau trong biểu mẫu:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Hoặc tìm mã sau trong biểu mẫu:

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Thay thế mã bằng khối mã sau:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Nếu sử dụng chủ đề Minimal, Pop hoặc Supply, hãy tìm tất cả những lần xuất hiện của mã sau:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Thay thế mã bằng khối mã sau:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Nếu dùng bất kỳ chủ đề cổ điển nào khác của Shopify, hãy tìm mã sau:

{% assign current_variant = product.selected_or_first_available_variant %}

Thay thế mã bằng khối mã sau:

{% assign current_variant = product.selected_variant %}

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để sản phẩm không hiển thị là Không sẵn hàng trước khi khách hàng chọn sản phẩm.

Bước:

1. Trên trang quản trị 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 ... > Chỉnh sửa nội dung chủ đề mặc định.
3. Trong thanh tìm kiếm Lọc mặt hàng, bắt đầu nhập không sẵn hàng để hiển thị bản dịch cho Không sẵn hàng.
4. Thay thế văn bản Không sẵn hàng bằng Đưa ra lựa chọn.
5. Nhấp vào Save (Lưu).