xStore.sections#

Dựng lại một phần giao diện bằng AJAX mà không tải lại cả trang.

Phương thức#

Ví dụ đầy đủ#

<script>
  // render() nhận một MẢNG mã section và trả về map: mã → HTML.
  // Section chỉ nhận biến toàn cục, không nhận biến riêng của trang đang mở —
  // xem thêm trang Section động (AJAX).
  async function refreshMiniCart() {
    const html = await xStore.sections.render(['mini-cart']);
    document.getElementById('mini-cart').innerHTML = html['mini-cart'];
  }

  // Dựng lại nhiều mảng giao diện trong một lần gọi.
  async function refreshAfterFilter() {
    const html = await xStore.sections.render(['product-grid', 'filter-summary']);

    document.getElementById('product-grid').innerHTML     = html['product-grid'];
    document.getElementById('filter-summary').innerHTML   = html['filter-summary'];
  }

  // Giỏ đổi thì mini-cart dựng lại — không cần gọi tay ở từng chỗ thêm hàng.
  window.addEventListener('cart:updated', refreshMiniCart);
</script>

Thư viện gọi tới /api/... trên chính tên miền cửa hàng, nên không cần khai báo địa chỉ máy chủ ở bất kỳ đâu.

Xem thêm Sự kiện để giao diện tự cập nhật sau mỗi thao tác.