Thiết lập mua hàng

Để thiết lập mua hàng trên một màn hình, hãy thêm nút mua hàng và cấu hình hành động Purchase cho nút đó. Hành động này có thể nhắm đến một sản phẩm cụ thể hoặc sản phẩm mà người dùng chọn từ phần tử Products trên màn hình.

Thêm sản phẩm

Phần tử sản phẩm là một thẻ hiển thị trực quan trên canvas.

Để thêm phần tử sản phẩm:

  1. Trên canvas, nhấn + ở màn hình mong muốn.

  2. Chọn Products.

  3. Chọn kiểu bố cục: danh sách dọc, danh sách ngang, băng chuyền tính năng, thẻ tính năng, danh sách banner hoặc bottom sheet.

    Thêm phần tử sản phẩm vào canvas
  4. Chọn từng thẻ sản phẩm và gán sản phẩm tương ứng qua dropdown trong bảng Design.

Một phần tử sản phẩm chưa được gắn sản phẩm sẽ chặn việc xem trước và xuất bản. Hãy gán sản phẩm hoặc xóa phần tử đó đi.

Adding a product element to the canvas

Để hiển thị giá neo bị gạch ngang trên card, hãy thêm phần tử Old Price vào bên trong card đó.

Bạn cũng có thể gắn trực tiếp hành động Purchase vào tương tác On tap của thẻ sản phẩm. Khi nhấn vào thẻ, hành động mua sẽ được kích hoạt ngay mà không cần nút mua riêng.

Nếu bạn xóa một nhóm sản phẩm và thay thế bằng nhóm mới, hãy kiểm tra lại tất cả các action và biến để đảm bảo chúng trỏ đúng vào nhóm mới. Các tham chiếu vẫn còn trỏ vào nhóm đã xóa sẽ chặn việc xem trước và xuất bản.

Thêm nút mua hàng

Nút mua hàng sẽ kích hoạt hành động Purchase khi người dùng nhấn vào.

Để thêm nút mua hàng:

  1. Trên canvas, nhấn + vào màn hình.
  2. Chọn Button và chọn một preset button.
  3. Với button đã được chọn, mở tab Interactions ở bảng bên phải.
  4. Nhấn Add trigger > On tap, sau đó nhấn Add action.
  5. Đặt Action thành Purchase, rồi đặt Product thành một trong các tùy chọn sau:
    • products.selectedProduct: Mua sản phẩm mà người dùng đã chọn từ một phần tử Products trên màn hình.
    • Một sản phẩm cụ thể: Luôn mua sản phẩm đó, bất kể lựa chọn nào trên màn hình.
Thêm nút mua hàng vào canvas

Hiển thị giá trên nút

Để chèn giá của sản phẩm đã chọn vào nhãn nút, hãy dùng biến:

  1. Chọn nút, sau đó mở tab Design ở bảng bên phải.
  2. Trong trường Content, đặt con trỏ vào vị trí muốn hiển thị giá.
  3. Nhấp vào biểu tượng biến, chọn products.selectedProduct, rồi chọn thuộc tính prod_price. Biến đầy đủ sẽ là products.selectedProduct.prod_price.
  4. Thêm văn bản tĩnh xung quanh biến — ví dụ: Subscribe for {prod_price}.

Nhãn sẽ cập nhật theo khi người dùng chọn các sản phẩm khác nhau.

Nút mua hàng với biến giá của sản phẩm được chọn trong nhãn

Khôi phục giao dịch mua

Để người dùng có thể khôi phục các giao dịch mua trước đó, hãy thêm nút hoặc liên kết khôi phục vào màn hình.

Để thêm thành phần khôi phục giao dịch mua:

  1. Trên canvas, nhấp vào + trên màn hình.
  2. Chọn Button, sau đó chọn Links cho liên kết văn bản hoặc bất kỳ loại nút nào khác cho nút có kiểu dáng.
Thêm nút khôi phục vào canvas
  1. Với phần tử đã chọn, mở tab Interactions ở bảng bên phải và nhấn Add trigger.
  2. Chọn On tap và nhấn Add action.
  3. Trong dropdown Action, chọn Restore purchases.
Restore purchases action in the Interactions tab

Hiển thị các phần tử bổ sung dựa trên sản phẩm được chọn

Nếu một màn hình có các sản phẩm, bạn có thể hiển thị hoặc ẩn các phần tử khác tùy thuộc vào sản phẩm mà người dùng chọn.

Để thiết lập hiển thị có điều kiện:

  1. Trong phần tử Products, chọn một thẻ sản phẩm.
  2. Mở tab Interactions ở bảng bên phải và nhấp vào Add trigger.
Thêm trigger vào thẻ sản phẩm
  1. Chọn On tap và nhấp Add action.
  2. Từ menu thả xuống Action, chọn Show hoặc Hide.
  3. Chọn phần tử cần hiển thị hoặc ẩn khi sản phẩm đó được chọn.
Hành động Show/Hide trong tab Interactions

Xem sản phẩm trong flow

Bảng Products ở thanh bên trái hiển thị các sản phẩm hiện có được ánh xạ đến từng màn hình trong flow.

Mỗi màn hình có hai phần:

  • Default — một sản phẩm, được chọn sẵn khi màn hình tải.
  • Other — các sản phẩm bổ sung có sẵn trên cùng màn hình đó.
Bảng Products trong Flow Builder