Thêm quy tắc số lượng vào chủ đề Shopify

Trang này được in vào Jun 05, 2023. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/b2b/catalogs/code.

Quy tắc số lượng cho danh mục B2B chỉ được hỗ trợ trên chủ đề Shopify miễn phí, phiên bản 8.0.0 trở lên. Nếu không muốn thay đổi hay cập nhật chủ đề thì bạn có thể thêm mã sau vào chủ đề để hiển thị quy tắc số lượng.

Trên trang này

Số lượng giỏ hàng sản phẩm

Bạn có thể hiển thị giá trị số lượng giỏ hàng của mẫu mã sản phẩm trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp giá trị bằng Liquid.

Thêm mã số lượng giỏ hàng sản phẩm Liquid

Bạn có thể thêm mã vào các tệp sau trong chủ đề để hỗ trợ số lượng giỏ hàng:

  • main-product.liquid hoặc tương đương
  • featured-product.liquid hoặc tương đương

Bước:

  1. Trong 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Mở tệp bạn muốn chỉnh sửa.
  2. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
{% comment %} Cart quantity {% endcomment %}
<span id="CartQuantity-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>
  1. Nhấp vào Save (Lưu).

Thêm mã số lượng giỏ hàng Javascript

Khi số lượng giỏ hàng của mẫu mã thay đổi, bạn phải cập nhật giá trị hiển thị trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp giá trị cập nhật bằng mã Javascript.

Bạn có thể thêm mã vào tệp theme.js hoặc tương đương.

Bước:

  1. Trong 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Mở tệp theme.js.
  2. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the cart quantity
        const currentCartQuantity = document.querySelector(`#CartQuantity-${sectionId}`);
        const updatedCartQuantity = updatedHtml.querySelector(`#CartQuantity-${sectionId}`);
        currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
    });
  1. Nhấp vào Save (Lưu).

Quy tắc số lượng

Bạn có thể hiển thị quy tắc số lượng của mẫu mã sản phẩm trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp quy tắc bằng Liquid.

Thêm mã quy tắc số lượng Liquid

Bạn có thể thêm mã vào các tệp sau trong chủ đề để hỗ trợ số lượng giỏ hàng sản phẩm:

  • main-product.liquid hoặc tương đương
  • featured-product.liquid hoặc tương đương

Bước:

  1. Trong 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Mở tệp bạn muốn chỉnh sửa.
  2. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
{% comment %} Quantity rules {% endcomment %}
<div id="QuantityRules-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
        <span>
        {{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
        </span>
    {%- endif -%}
</div>
  1. Nhấp vào Save (Lưu).

Thêm mã quy tắc số lượng Javascript

Mỗi mẫu mã sản phẩm đều có thể có bộ quy tắc số lượng riêng. Sau khi chọn mẫu mã khác, bạn cần cập nhật quy tắc số lượng hiển thị trên trang sản phẩm hoặc mục sản phẩm nổi bật. Có thể tìm nạp giá trị cập nhật bằng mã Javascript.

  • theme.js hoặc tương đương
  • en.default.json

Bước:

  1. Trong 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Mở tệp theme.js.
  2. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// `variantId` is set to the current variant's id. Replace this value with the updated variant's id

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the quantity rules
        const currentQuantityRules = document.querySelector(`#QuantityRules-${sectionId}`);
        const updatedQuantityRules = updatedHtml.querySelector(`#QuantityRules-${sectionId}`);
        currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
    });
  1. Nhấp vào Lưu.

Thêm ngôn ngữ

Thêm các chuỗi bản dịch JSON

Bước:

  1. Trong 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

  2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

  3. Chạm vào Manage themes (Quản lý chủ đề).

  4. 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ã.

  1. Mở tệp en.default.json.
  2. Tạo một dòng mới ở cuối tệp, sau đó thêm mã sau: 
{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}
  1. Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí