Section động (AJAX)#

Section là một tệp giao diện có thể dựng lại riêng lẻ qua AJAX — dùng khi bạn muốn cập nhật một mảng giao diện (giỏ hàng thu nhỏ, lưới sản phẩm sau khi lọc) mà không tải lại cả trang.

Tạo một section#

Đặt tệp trong thư mục sections/ của bộ giao diện:

sections/mini-cart.html
sections/product-grid.html

Section được dựng bằng chính engine Liquid, nên viết như mọi template khác.

Biến có trong section#

Section nhận bộ biến toàn cục: store, menus, nav_categories, customer, cart_count và custom.

Section không nhận biến riêng của trang (products, product, article…), vì máy chủ dựng nó độc lập với trang đang mở. Dữ liệu phụ thuộc ngữ cảnh phải tự truy vấn bằng thư viện xStore JS rồi dựng bằng JavaScript.

Gọi từ giao diện#

xStore.sections.render nhận một mảng mã section và trả về map mã → HTML:

<div id="mini-cart"></div>

<script>
  async function refreshMiniCart() {
    const html = await xStore.sections.render(['mini-cart']);
    document.getElementById('mini-cart').innerHTML = html['mini-cart'];
  }

  // Dựng lại mỗi khi giỏ hàng đổi.
  xStore.on('cart:updated', refreshMiniCart);
  refreshMiniCart();
</script>

Dựng nhiều section trong một lần gọi:

<script>
  const html = await xStore.sections.render(['mini-cart', 'header-account']);
  document.getElementById('mini-cart').innerHTML      = html['mini-cart'];
  document.getElementById('header-account').innerHTML = html['header-account'];
</script>

Giới hạn cần biết#

• Tối đa 20 section mỗi lần gọi; phần dư bị bỏ qua.

• Mã section chỉ được chứa chữ, số, gạch ngang và gạch dưới. Mã không hợp lệ bị loại bỏ, không báo lỗi.

• Section không tồn tại trả về chuỗi rỗng, không phải lỗi HTTP. Hãy kiểm tra trước khi gán vào innerHTML:

  <script>
    const html = await xStore.sections.render(['mini-cart']);
    if (html['mini-cart']) {
      document.getElementById('mini-cart').innerHTML = html['mini-cart'];
    }
  </script>
  

• Chỉ dựng được tệp nằm trực tiếp trong sections/; đường dẫn lồng nhau hoặc đi ngược thư mục đều bị chặn.

Cập nhật header sau khi đăng nhập#

Đây là cách tránh phải tải lại cả trang sau khi khách đăng nhập:

<script>
  xStore.on('auth:login', async () => {
    const html = await xStore.sections.render(['header-account']);
    document.getElementById('header-account').innerHTML = html['header-account'];
  });
</script>