Tài liệu xStore

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

Sự kiện

Thư viện phát sự kiện trên window để giao diện tự cập nhật mà không cần hỏi lại máy chủ. Đăng ký lắng nghe một lần trong theme.html là mọi trang đều nhận được.

Danh sách sự kiện

Sự kiện Dữ liệu Mô tả Từ phiên bản
cart:updated Cart Phát ra mỗi khi giỏ hàng thay đổi — dùng để cập nhật số trên biểu tượng giỏ. 1.0
auth:login CustomerProfile Phát ra sau khi đăng nhập thành công. 1.0
auth:logout null Phát ra sau khi đăng xuất. 1.0

Ví dụ đầy đủ

<script>
  // Số trên biểu tượng giỏ tự cập nhật sau MỌI thao tác giỏ hàng —
  // thêm, sửa, xoá, áp mã — mà không cần gọi lại xStore.cart.get().
  window.addEventListener('cart:updated', (e) => {
    document.getElementById('cart-count').textContent = e.detail.item_count;
  });

  // Đổi khối tài khoản ở header khi khách đăng nhập / đăng xuất.
  window.addEventListener('auth:login', (e) => {
    document.getElementById('account-name').textContent = e.detail.name;
    document.body.classList.add('is-logged-in');
  });

  window.addEventListener('auth:logout', () => {
    document.body.classList.remove('is-logged-in');
  });
</script>

Dữ liệu của sự kiện nằm ở event.detail. Cấu trúc Cart xem tại Đối tượng dữ liệu.