Tài liệu xStore

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

xStore.product

Hàm trợ giúp chọn phiên bản sản phẩm. Tất cả đều chạy cục bộ, không gọi máy chủ, không trả Promise.

Phương thức

Phương thức Cú pháp Mô tả Từ phiên bản
findVariant xStore.product.findVariant(variants, selectedValues): ProductVariant | null Tìm phiên bản khớp với bộ tuỳ chọn khách đã chọn, ví dụ ['Đỏ', 'L']. 1.0
isAvailable xStore.product.isAvailable(variant): boolean Phiên bản còn bán được hay không; trả false nếu variant là null. 1.0
getPrice xStore.product.getPrice(variant): number | null Giá bán của phiên bản; null nếu variant là null. 1.0
getCompareAtPrice xStore.product.getCompareAtPrice(variant): number | null Giá gốc để gạch ngang; null nếu không có. 1.0

Ví dụ đầy đủ

<script>
  // TẤT CẢ hàm trong module này chạy cục bộ và trả kết quả ngay —
  // không có Promise, không await, không gọi máy chủ.
  //
  // `variants` là biến Liquid của trang chi tiết sản phẩm. Bộ lọc `json`
  // đưa nguyên mảng sang JavaScript; trong <script> dùng thẳng, không cần
  // | escape (chỉ thuộc tính HTML nháy kép mới cần).
  const variants = {{ variants | json }};
  const selected = {};

  document.querySelectorAll('[data-option]').forEach((el) => {
    el.addEventListener('change', () => {
      selected[el.dataset.option] = el.value;
      refresh();
    });
  });

  function refresh() {
    const variant = xStore.product.findVariant(variants, selected);
    const btn     = document.getElementById('add-to-cart');

    if (!variant) {
      btn.disabled = true;
      btn.textContent = 'Chọn phiên bản';
      return;
    }

    const price   = xStore.product.getPrice(variant);
    const compare = xStore.product.getCompareAtPrice(variant);

    document.getElementById('price').textContent = xStore.utils.formatCurrency(price);
    document.getElementById('compare-price').textContent =
      compare ? xStore.utils.formatCurrency(compare) : '';

    btn.disabled       = !xStore.product.isAvailable(variant);
    btn.textContent    = xStore.product.isAvailable(variant) ? 'Thêm vào giỏ' : 'Hết hàng';
    btn.dataset.variant = variant.id;
  }

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