Template này dùng tab để chuyển đổi giữa hai biến thể của cùng một ưu đãi trên một màn hình duy nhất. Mỗi tab chứa danh sách tính năng, danh sách sản phẩm và nút mua riêng. Nhấn vào tab sẽ thay thế nội dung hiển thị mà không cần rời khỏi màn hình — hữu ích khi phân chia các gói theo cấp độ, kỳ thanh toán, hoặc phân khúc đối tượng.

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à container cho nút đóng, tiêu đề, tab và nội dung tab. Trong ví dụ này, nền là hình ảnh, nhưng màu đơn hoặc gradient cũng hoạt động tương tự.

Để xem toàn bộ thuộc tính màn hình, xem Màn hình và layers — Cài đặt màn hình.

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

1. Nhấp vào vùng trống trên canvas để chọn màn hình.
2. Trong System UI, tắt Safe area để nền kéo dài đến mép 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 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 tab lấp đầy khoảng trống còn lại.

2. Thêm nút đóng

Nút đóng dùng để thoát khỏi paywall. Preset Close đã được cấu hình sẵn — không cần thiết lập thêm 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 ngang hai phần tử, hãy bọc chúng trong một horizontal container.

Để thêm tiêu đề:

1. Nhấp + > Text > H1.
2. Với H1 đượ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 menu ba chấm trên layer nút đóng và chọn Wrap > Wrap in Horizontal Stack.

2. Kéo layer H1 vào horizontal container mới.

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

1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 để chúng nằm gọn trên cùng một dòng.
2. Với horizontal container được chọn, đặt căn chỉnh và phân bố trong bảng bên phải để các phần tử thẳng hàng đúng cách.

4. Thêm tab và cấu hình nhãn tab

Phần tử Tabs chia một phần màn hình thành các bảng nội dung có thể chuyển đổi. Mỗi tab có container nội dung riêng hiển thị khi người dùng chọn tab đó.

Để tìm hiểu thêm về phần tử Tabs, xem Phần tử — Tabs. Để tìm hiểu thêm về các nhóm có thể chọn, xem Phần tử và nhóm có thể chọn.

Để thêm tab:

1. Nhấp + > Tabs và chọn một preset — Segment control, Button Tabs, hoặc Underline.
2. Với tên mỗi tab được chọn trên canvas hoặc trong bảng Layers, chỉnh sửa trường Content trên tab Design để thay đổi nhãn — ví dụ: Premium và Pro.

5. Thêm danh sách tính năng vào tab đầu tiên

Danh sách tính năng ngắn gọn bên trong tab đầu tiên cho người dùng biết gói đó bao gồm những gì.

Để xem toàn bộ preset danh sách, xem Phần tử — List.

Để thêm danh sách tính năng:

1. Nhấp + > List và chọn một list preset. Icon List là dạng gọn nhất cho paywall. Phần tử xuất hiện ở cuối cây layer.
2. Với mỗi hàng được chọn, chỉnh sửa tiêu đề trong trường Content.

3. Trong bảng Layers, kéo danh sách vào container Content của tab đầu tiên.

6. Thêm danh sách sản phẩm vào tab đầu tiên

Danh sách sản phẩm hiển thị các tùy chọn gói đăng ký cho tab đầu tiên. Phần tử Products hiển thị một thẻ cho mỗi sản phẩm được gán cho màn hình và tạo nhóm có thể chọn riêng của nó.

Để 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ấp + > Products và chọn một layout preset. Vertical List phù hợp cho các gói xếp chồng. Phần tử xuất hiện ở cuối cây layer.
2. Chọn từng thẻ sản phẩm trên canvas và chọn sản phẩm từ menu dropdown trong tab Design.

3. Trong bảng Layers, kéo layer Products vào container Content của tab đầu tiên.

7. Thêm nút mua vào tab đầu tiên

Nút mua khởi động in-app purchase cho sản phẩm mà người dùng đã chọn trong tab đầu tiên. Nhãn của nút sử dụng giá của sản phẩm được chọn để luôn đồng bộ với lựa chọn của người dùng.

Để tìm hiểu thêm về hành động Purchase, xem Hành động — Purchase.

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

1. Nhấp + > Buttons và chọn một button preset. Phần tử xuất hiện ở cuối cây layer.
2. Với nút được chọn, mở tab Design và đặt con trỏ vào trường Content. Nhấp biểu tượng variable , chọn products.selectedProduct, sau đó chọn thuộc tính prod_price — biến đầy đủ sẽ là 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ấp Add trigger > On tap > Add action.
4. Đặt Action thành Purchase và Product thành products.selectedProduct.

5. Trong bảng Layers, kéo nút vào container Content của tab đầu tiên.

8. Sao chép nội dung tab đầu tiên sang tab thứ hai

Thay vì xây dựng lại cùng một cấu trúc từ đầu, hãy sao chép danh sách tính năng, danh sách sản phẩm và nút mua từ tab đầu tiên sang tab thứ hai. Bạn chỉ cần cập nhật các giá trị sau đó.

Để sao chép nội dung:

1. Trong bảng Layers, mở rộng container Content của tab đầu tiên.
2. Chọn từng phần tử bên trong (danh sách tính năng, sản phẩm, nút mua), sao chép bằng ⌘C / Ctrl+C, và dán bằng ⌘V / Ctrl+V. Các bản sao xuất hiện ở cuối cây layer.
3. Kéo từng phần tử đã sao chép vào container Content của tab thứ hai.

9. Cập nhật nội dung tab thứ hai

Tab thứ hai giờ đây phản chiếu tab đầu tiên. Cập nhật từng phần tử để phản ánh gói thứ hai.

Để cập nhật tab thứ hai:

1. Chỉnh sửa danh sách tính năng trong tab thứ hai để các hàng khớp với tính năng của gói thứ hai.
2. Chọn từng thẻ sản phẩm trong phần tử Products của tab thứ hai và gán sản phẩm của gói thứ hai từ menu dropdown. Phần tử Products này tự động trở thành một nhóm có thể chọn riêng (products2).
3. Chọn nút mua trong tab thứ hai. Trong trường Content của tab Design, thay đổi biến giá từ products.selectedProduct.prod_price thành products2.selectedProduct.prod_price.
4. Chuyển sang tab Interactions và cập nhật Product của hành động Purchase từ products.selectedProduct thành products2.selectedProduct.

10. Thêm các liên kết footer chung

Điều khoản sử dụng, chính sách quyền riêng tư và khôi phục mua hàng luôn hiển thị bất kể tab nào đang hoạt động. Thêm chúng ở cấp độ màn hình — bên ngoài cả hai container nội dung tab — để chúng được chia sẻ giữa các tab.

Để thêm liên kết footer:

1. Nhấp + > Buttons > Links. Thao tác này thêm một hàng với Restore Purchases, Terms of Use và Privacy Policy ở cuối cây layer, đúng vị trí bạn muốn — ở gốc của màn hình, không lồng trong tab.
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 cho nút Privacy Policy với URL quyền riêng tư của bạn.
4. Để 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.