Tài liệu xStore

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

xStore.banners

Banner quảng cáo theo vị trí do chủ cửa hàng đặt trong trang quản trị.

Phương thức

Phương thức Cú pháp Mô tả Từ phiên bản
list xStore.banners.list({ locationCode, limit }): Promise<BannerV1[]> Banner đang hiển thị ở một vị trí. ⚠️ Trên window.xStore hàm này trả MẢNG TRẦN để giữ tương thích với theme cũ; gói @xstore/storefront-sdk trả phong bì { items } như mọi endpoint v1 khác. 1.0
recordClick xStore.banners.recordClick(bannerId): Promise<void> Ghi nhận một lượt bấm vào banner. 1.0

Ví dụ đầy đủ

<script>
  // recordClick chạy nền để đo hiệu quả banner; đừng chặn điều hướng vì nó.
  async function renderBanners() {
    // Tham số là locationCode — mã vị trí đặt trong trang quản trị.
    const banners = await xStore.banners.list({ locationCode: 'home_top', limit: 5 });

    document.getElementById('banners').innerHTML = banners.map((b) => `
      <a href="${b.target_url ?? '#'}" data-banner="${b.id}">
        <img src="${b.file_url}" alt="${b.title}">
      </a>
    `).join('');
  }

  document.getElementById('banners').addEventListener('click', (e) => {
    const link = e.target.closest('[data-banner]');
    if (link) {
      xStore.banners.recordClick(link.dataset.banner);
    }
  });

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