Tài liệu xStore

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

xStore.utils

Hàm tiện ích chạy cục bộ, không gọi máy chủ: định dạng tiền, định dạng ngày và giảm nhịp gọi.

Phương thức

Phương thức Cú pháp Mô tả Từ phiên bản
formatCurrency xStore.utils.formatCurrency(amount, locale = 'vi-VN', currency = 'VND'): string Định dạng số tiền theo chuẩn địa phương. 1.0
formatDate xStore.utils.formatDate(isoString, locale = 'vi-VN'): string Định dạng chuỗi ngày ISO theo chuẩn địa phương (mặc định vi-VN). TỪ 2.1: chuỗi ISO KHÔNG có hậu tố múi giờ được hiểu là UTC và tự thêm Z trước khi chuyển đổi. Bản cũ đưa thẳng vào new Date(), nên trình duyệt hiểu là giờ ĐỊA PHƯƠNG và ngày bài viết hiển thị lệch 7 tiếng ở Việt Nam. Chuỗi đã có Z hoặc +07:00 thì giữ nguyên. 1.0
debounce xStore.utils.debounce(fn, ms): (...args) => void Bọc một hàm để nó chỉ chạy sau khi ngừng gọi trong ms mili-giây — dùng cho ô tìm kiếm, nếu không mỗi phím gõ là một lần gọi máy chủ. Trả về hàm mới, chạy cục bộ, không Promise. 2.1

Ví dụ đầy đủ

<script>
  // Ba hàm này chạy cục bộ và trả kết quả NGAY — không Promise, không await.
  // Dùng được thoải mái trong vòng lặp dựng giao diện.
  const items = [
    { title: 'Áo thun', price: 249000, created_at: '2026-08-13T02:15:00' },
    { title: 'Quần jean', price: 1234567, created_at: '2026-08-12T09:00:00' },
  ];

  document.getElementById('list').innerHTML = items.map((item) => `
    <li>
      <span>${item.title}</span>
      <span>${xStore.utils.formatCurrency(item.price)}</span>
      <small>${xStore.utils.formatDate(item.created_at)}</small>
    </li>
  `).join('');

  // formatCurrency(1234567) → "1.234.567 ₫"
  // formatDate('2026-08-13T02:15:00') → "13 tháng 8, 2026"
  //   API trả chuỗi ISO KHÔNG có hậu tố Z nhưng giá trị là UTC; formatDate
  //   tự thêm Z trước khi chuyển đổi (xem ghi chú ở bảng bên trên).

  // debounce: chỉ chạy sau khi khách ngừng gõ 250ms.
  const onType = xStore.utils.debounce((e) => console.log(e.target.value), 250);
  document.getElementById('search-input').addEventListener('input', onType);
</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.