Tài liệu xStore

Hướng dẫn phát triển giao diện storefront

xStore.categories

Danh mục sản phẩm: danh sách, cây hai cấp, chi tiết, đường dẫn phân cấp và danh mục con.

Phương thức

Phương thức Cú pháp Mô tả Từ phiên bản
list xStore.categories.list({ limit, parent }): Promise<CursorPaginatedResponse<CategoryCard>> Danh sách danh mục. Bỏ trống parent để lấy danh mục gốc. 2.1
tree xStore.categories.tree(): Promise<CursorPaginatedResponse<CategoryNode>> Cây danh mục HAI CẤP — gốc kèm con trực tiếp. Không trả cấp sâu hơn; dựng menu chỉ cần một lần gọi này. 2.1
get xStore.categories.get(categoryId): Promise<CategoryDetail> Chi tiết danh mục theo id. 2.1
getBySlug xStore.categories.getBySlug(slug): Promise<CategoryDetail> Chi tiết danh mục theo slug — cách đổi slug trên URL thành id để lọc sản phẩm. 2.1
breadcrumb xStore.categories.breadcrumb(categoryId): Promise<CursorPaginatedResponse<Breadcrumb>> Đường dẫn phân cấp, xếp từ GỐC xuống, sâu tối đa 10 cấp. Đưa thẳng vào khối JSON-LD BreadcrumbList. 2.1
subcategories xStore.categories.subcategories(categoryId): Promise<CursorPaginatedResponse<CategoryCard>> Danh mục con trực tiếp của một danh mục. 2.1

Ví dụ đầy đủ

<script>
  // Menu danh mục: MỘT lần gọi cho cả cây hai cấp, đừng gọi lồng nhau.
  async function renderMenu() {
    const cay = await xStore.categories.tree();

    document.getElementById('menu').innerHTML = cay.items.map((goc) => `
      <li>
        <a href="${goc.url ?? '#'}">${goc.title}</a>
        <ul>${(goc.children ?? []).map((con) =>
          `<li><a href="${con.url ?? '#'}">${con.title}</a></li>`).join('')}</ul>
      </li>
    `).join('');
  }

  // Trang danh mục: slug → id, rồi dùng id để lọc sản phẩm.
  async function renderCategoryPage(slug) {
    const dm = await xStore.categories.getBySlug(slug);

    // Đường dẫn phân cấp trả về từ gốc xuống, sâu tối đa 10 cấp.
    const duong = await xStore.categories.breadcrumb(dm.id);
    document.getElementById('breadcrumb').innerHTML =
      duong.items.map((c) => `<a href="${c.url ?? '#'}">${c.title}</a>`).join(' / ');

    const sp = await xStore.products.list({ category: dm.id, limit: 24 });
    console.log(sp.items.length, 'sản phẩm');
  }

  renderMenu();
</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.