Template này sử dụng tính năng hiển thị có điều kiện để làm nổi bật các danh sách tính năng khác nhau cho từng gói. Màn hình hiển thị hai sản phẩm — ví dụ như Pro và Pro+ — và danh sách tính năng sẽ thay đổi tùy theo sản phẩm người dùng đang chọn. Một sản phẩm được đánh dấu là mặc định, vì vậy danh sách tính năng của nó sẽ hiển thị ngay khi màn hình tải lần đầu.

Trước khi bắt đầu

• Tạo sản phẩm trong Adapty Dashboard.
• Kết nối Adapty với App Store và Google Play.

1. Thiết lập bố cục màn hình

Màn hình đóng vai trò là vùng chứa cho tất cả nội dung bạn thêm vào. Trong ví dụ này, nền là một hình ảnh, nhưng màu đơn sắc hoặc gradient cũng hoạt động tương tự.

Để xem danh sách đầy đủ các thuộc tính màn hình, hãy xem Màn hình và các lớp — Cài đặt màn hình.

Để cấu hình màn hình:

1. Nhấp vào vùng trống của canvas để chọn màn hình.
2. Trong System UI, tắt Safe area để nền mở rộng đến các cạnh màn hình.
3. Trong Fill, chọn loại nền và cấu hình nó. Ví dụ này dùng Image , nhưng màu nền đơn sắc hoặc gradient cũng hoạt động tương tự.
4. Trong Layout, đặt hướng thành Vertical và cấu hình khoảng cách và căn chỉnh để các phần tử xếp chồng từ trên xuống với nội dung lấp đầy phần không gian còn lại.

2. Thêm nút đóng

Nút đóng sẽ đóng paywall. Preset Close đã được cấu hình sẵn — không cần thiết lập hành động.

1. Trên canvas, nhấp +.
2. Chọn Buttons > Close.

3. Thêm tiêu đề và ghép với nút đóng

Tiêu đề nằm cạnh nút đóng ở đầu màn hình. Để căn chỉnh chúng theo chiều ngang, hãy bọc cả hai trong một container nằm ngang.

Để thêm tiêu đề:

1. Nhấn + > Text > H1.
2. Với H1 đang được chọn, mở tab Design và chỉnh sửa văn bản trong trường Content.

Để nhóm tiêu đề với nút đóng:

1. Trong bảng Layers, nhấp vào menu ba chấm trên layer nút đóng và chọn Wrap > Wrap in Horizontal Container.

2. Kéo layer H1 vào horizontal container vừa tạo.

Để căn chỉnh hai phần tử:

1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 sao cho chúng nằm thoải mái trên cùng một dòng.
2. Với container ngang đang được chọn, thiết lập căn chỉnh và phân bổ trong panel bên phải để các phần tử được sắp xếp đúng vị trí.

4. Thêm danh sách sản phẩm

Thêm các sản phẩm để người dùng lựa chọn. Đánh dấu một sản phẩm làm mặc định để màn hình có trạng thái có nghĩa khi tải lần đầu.

Để tìm hiểu thêm về quản lý sản phẩm, xem Thiết lập mua hàng.

Để thêm và cấu hình sản phẩm:

1. Nhấn + > Products và chọn kiểu bố cục. Vertical List phù hợp với template này.
2. Chọn từng thẻ sản phẩm trên canvas và chọn sản phẩm từ danh sách thả xuống trong tab Design.
3. Chọn thẻ bạn muốn được chọn mặc định — ví dụ, Pro+ — và bật Set as default product trong tab Design.

5. Thêm danh sách tính năng cho sản phẩm đầu tiên

Danh sách tính năng đầu tiên mô tả sản phẩm mặc định. Nó chỉ hiển thị khi người dùng chọn sản phẩm đầu tiên.

Để tìm hiểu thêm về hiển thị có điều kiện, xem Hiển thị có điều kiện.

Để thêm và cấu hình danh sách tính năng:

1. Nhấn + > List và chọn một preset danh sách dạng compact. Icon List phù hợp tốt với paywall.
2. Với mỗi hàng được chọn, chỉnh sửa tiêu đề trong trường Content để mô tả các tính năng của sản phẩm đầu tiên.
3. Khi danh sách vẫn đang được chọn, mở tab Design. Trong phần Visibility, chọn Conditional .
4. Thiết lập điều kiện sao cho danh sách chỉ hiển thị khi sản phẩm đầu tiên là sản phẩm đang được chọn. Khớp với biến products.selectedProduct.prod_title. Ở phần Value, nhấn vào biểu tượng biến {}, chọn thẻ sản phẩm đầu tiên, rồi chọn thuộc tính prod_title của nó — phép so sánh sẽ trả về tiêu đề của sản phẩm đó.

6. Thêm danh sách tính năng cho sản phẩm thứ hai

Lặp lại cách làm tương tự cho sản phẩm thứ hai. Hai danh sách này loại trừ lẫn nhau — chỉ một danh sách được hiển thị tại một thời điểm, tùy thuộc vào sản phẩm nào đang được chọn.

Để thêm danh sách tính năng cho sản phẩm thứ hai:

1. Nhấp + > List và chọn cùng preset compact để giao diện đồng nhất.
2. Chỉnh sửa từng hàng để mô tả các tính năng của sản phẩm thứ hai.
3. Trong mục Visibility, chọn Conditional và thiết lập điều kiện tương tự như bước 5, nhưng trỏ bộ chọn biến Value vào prod_title của thẻ sản phẩm thứ hai.

7. Thêm nút mua hàng

Nút mua hàng sẽ khởi động in-app purchase cho sản phẩm mà người dùng đã chọn. Nhãn của nút hiển thị giá của sản phẩm được chọn, vì vậy nó sẽ cập nhật khi người dùng chuyển đổi giữa các gói.

Để biết thêm về hành động Purchase, xem Actions — Purchase.

Để thêm và cấu hình nút mua hàng:

1. Nhấp + > Buttons và chọn một preset nút.
2. Khi nút được chọn, mở tab Design và đặt con trỏ vào trường Content. 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ẽ thành products.selectedProduct.prod_price. Bao quanh nó bằng phần còn lại của nhãn — ví dụ: Subscribe for {prod_price}.

3. Chuyển sang tab Interactions và nhấn Add trigger > On tap > Add action.
4. Đặt Action thành Purchase và Product thành products.selectedProduct.

8. Thêm các liên kết ở chân trang

Điều khoản sử dụng, chính sách bảo mật và khôi phục mua hàng nằm bên dưới nội dung chính.

Để thêm các liên kết ở chân trang:

1. Nhấp + > Buttons > Links. Thao tác này thêm một hàng gồm Restore Purchases, Terms of Use và Privacy Policy vào cuối cây layer.
2. Trong bảng Layers, chọn nút Terms of Use. Mở tab Interactions và dán URL điều khoản của bạn vào trường Open URL.
3. Lặp lại với nút Privacy Policy bằng URL chính sách bảo mật của bạn.
4. Giữ nguyên liên kết Restore Purchases. Hành động của nó đã được cấu hình sẵn.

Các bước tiếp theo

• Lưu và xuất bản flow của bạn.
• Thêm flow vào một placement để bắt đầu hiển thị cho người dùng.