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.

   

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.

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

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.

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.

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.

3. Với phần tử đã chọn, mở tab Interactions ở bảng bên phải và nhấn Add trigger.
4. Chọn On tap và nhấn Add action.
5. Trong dropdown Action, chọn Restore purchases.

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.

3. Chọn On tap và nhấp Add action.
4. Từ menu thả xuống Action, chọn Show hoặc Hide.
5. Chọn phần tử cần hiển thị hoặc ẩn khi sản phẩm đó được chọn.

Thay đổi sản phẩm đã chọn từ một phần tử khác

Thông thường, người dùng thay đổi lựa chọn bằng cách nhấn vào thẻ sản phẩm. Để chuyển lựa chọn từ một vị trí khác trên màn hình, hãy thêm hành động Select product và trỏ nó đến thẻ sản phẩm mục tiêu.

Để thiết lập hành động:

1. Chọn phần tử sẽ thay đổi lựa chọn — một nút, một toggle, hoặc bất kỳ phần tử nào khác.
2. Mở tab Interactions trong bảng bên phải và nhấp Add trigger.
3. Chọn trigger và nhấp Add action.
4. Từ dropdown Action, chọn Select product.
5. Đặt Product thành thẻ sản phẩm mà hành động sẽ chọn.

Hành động này chỉ hoạt động với các thẻ sản phẩm trong một nhóm sản phẩm trên cùng một màn hình. Để chọn sản phẩm khác tùy theo lựa chọn của người dùng, hãy bọc hành động trong một hành động có điều kiện.

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 đó.